Ditulis oleh: Ditulis pada: 6/14/2017
Jika Anda kurang mengerti dengan judul postingannya, silahkan lihat gif animasi pada thumbnail post di atas.Menu horizontal seperti itu kini digunakan oleh template-template baru default Blogger. Cukup menarik bukan?
Karena itu, kemudian saya mencoba membuat menu horizontal responsive overflow list menjadi dropdown seperti yang digunakan template baru default Blogger agar bisa digunakan juga oleh pengguna template custom.
Demonya seperti terlihat pada blog dengan template default Blogger berikut ini, menu yang atas adalah menu bawaan template baru Blogger, sedangkan menu yang kedua itu menu yang saya buat. Silahkan coba resize browsernya atau silahkan coba gunakan responsive tool.
Bagaimana, tertarik untuk mencobanya juga?
Silahkan gunakan kode-kode di bawah ini.
Simpan kode CSS berikut di atas kode
</head>
<style type='text/css'>
/*<![CDATA[*/
nav#menu-overflow {
background: #fff;
max-width: 100%;
overflow-x: auto;
}
nav#menu-overflow ul {
margin: 0;
padding: 0;
list-style: none;
}
nav#menu-overflow ul li {
float: left;
list-style: none;
font: 700 12px lato, arial;display: list-item;
}
nav#menu-overflow ul li.more {
height:45px;
line-height:45px;
text-align: center;
display: none;
float: right
}
nav#menu-overflow ul li.more ul#overflow.show {
display: block;
}
nav#menu-overflow ul li a,
nav#menu-overflow ul li span,
nav#menu-overflow ul li.more span.btnmore {
display: block;
background: #fff;
color: #333;
text-decoration: none;
padding:0 1em;
cursor: pointer;
transition-duration: .3s;
height:45px;
line-height:45px;
}
nav#menu-overflow ul li a:hover,
nav#menu-overflow ul li span:hover {
background: #e00;
color: #fff;
}
nav#menu-overflow ul li.more #overflow {
display: none;
position: absolute;
text-align: left;
transition-duration: .3s;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
background-color: #ffffff;
z-index: 9999;
}
nav#menu-overflow ul li.more #overflow li {
float: none;
}
nav#menu-overflow ul li.more #overflow li a {
background: #fff;
white-space: nowrap;
padding: 0 15px;
height: 35px;
line-height: 35px;
}
nav#menu-overflow ul li.more #overflow li a:hover {
background: #e00;
}
nav#menu-overflow ul li.more span.btnmore {
background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;
height: 100%
}
/*]]>*/
</style>
Kemudian simpan kode javascript berikut di atas kode
</body>
<script>
//<![CDATA[
window.onresize = navigationResize;
navigationResize();
function navigationResize() {
$('#nav li.more').before($('#overflow > li'));
var $navItemMore = $('#nav > li.more'),
$navItems = $('#nav > li:not(.more)'),
navItemMoreWidth = navItemWidth = $navItemMore.width(),
windowWidth = $(window).width(),
navItemMoreLeft, offset, navOverflowWidth;
$navItems.each(function() {
navItemWidth += $(this).width();
});
navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
while (navItemWidth > windowWidth) {
navItemWidth -= $navItems.last().width();
$navItems.last().prependTo('#overflow');
$navItems.splice(-1, 1);
}
navItemMoreLeft = $('#nav .more').offset().left;
navOverflowWidth = $('#overflow').width();
offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
$('#overflow').css({
'left': offset
});
}
function showOverflow() {
document.getElementById("overflow").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.btnmore')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//]]>
</script>
Kemudian gunakan kode HTML seperti di bawah ini untuk menampilkan menunya.
<nav id="menu-overflow">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
<li class="more">
<span onclick="showOverflow()" class="btnmore"></span>
<ul id="overflow" class="dropdown-content"></ul>
</li>
</ul>
</nav>
Dan pastikan Anda sudah menyimpan jquery library pada template blog Anda berapa pun versinya.
Selamat mencoba.