Menu Responsive Collapse dengan Logo
Menu Collapse Responsive dengan Logo. Mungkin anda bertanya-tanya apa itu menu collapse, menu collapse adalah sticky menu yang ketika layar discroll ke bawah menu tersebut akan menghilang dan akan muncul lagi ketika layar discroll ke atas.Keunggulan dari menu ini selain berada diposisi sticky (tetap diatas mengikuti layar) juga responsive dan menggunakan hamburger menu ketika berada pada tampilan mobile. Selain itu menu ini dapat menggunakan logo dalam format gambar atau text serta dilengkapi dengan search bar.
Menu Collapse Responsive dengan Logo
Langsung saja kita ikuti langkah-langkahnya.
1. Buka blogger pilih menu tema disebelah kiri kemudian klik edit HTML.2. Letakkan kode HTML ini di bawah kode <header> atau sejenisnya
<nav class='float_wrapper'>
<div class='ct-wrapper'>
<div id='cssmenu'>
<div class='icon-searchku' id='search-resp'>
<span class='show'><a class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById('box').style.display='block';document.getElementById('hide').style.display='block''><i aria-hidden='true' class='fa fa-search'/></a></span>
</div>
<div class='logo'><a expr:href='data:blog.homepageUrl' title='home'><img alt='bromo tour package' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTLzWagbz6oKlWTblPn5o_mdlXJSqQGkVmYc20xqa9JqWCvm7r-Tv7lO4y2obojG3zZtrDNfaA1-xrdWHYgt47_85ZyWvsWdRwIQl-QM-w0VrVrGHAaJ49oLfh34BB2vJxb_3kfz8X_WJ/s1600/MOUNT+BROMO+TOUR+GUIDE+white.png'/></a></div>
<div id='head-mobile'/>
<div class='button'/>
<ul class='menumen'>
<li><a href='#'>Official</a>
<ul>
<li><a href='/p/about.html' title='about'>About</a></li>
<li><a href='/p/privacy-policy.html' title='privacy policy'>Privacy Policy</a></li>
<li><a href='/p/term-of-service.html' title='term of service'>TOS</a></li>
</ul>
</li>
<li><a href='#'>Tour Package</a>
<ul>
<li><a href='/p/bromo-tour.html' title='bromo tour'>Bromo Tour</a></li>
<li><a href='/p/ijen-crater-tour-package.html' title='ijen crater tour'>Ijen Crater Tour</a></li>
<li><a href='/p/semeru-trekking-tour-package.html' title='semeru trekking tour'>Semeru Trekking Tour</a></li>
<li><a href='/p/east-java-tour-package.html' title='east java tour'>East Java Tour</a></li>
</ul>
</li>
<li><a href='/p/travel-destination.html' title='tour destination'>Destination</a></li>
<li><a href='/p/travel-information.html' title='tour information'>Info</a></li>
<li><a href='/p/travel-tips.html' title='travel tips'>Tips</a></li>
<li><a href='/p/booking.html' title='booking'>Booking Room</a></li>
<li class='icon-searchku'>
<span class='show'><a class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById('box').style.display='block';document.getElementById('hide').style.display='block''><i aria-hidden='true' class='fa fa-search'/></a></span>
</li>
</ul>
</div>
</div>
</nav>
<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><a class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById('box').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block''><i aria-hidden='true' class='fa fa-times'/></a></div>
<div id='search-wrap'>
<p>ENTER HERE</p>
<div class='search'>
<form action='https://www.mtbromotourguide.com/p/search-result.html' id='searchformku' target='_blank'>
<input name='cx' type='hidden' value='014198858917514360859:eju3z92tzcm'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-formku' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button class='button-searchku' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
</div>
</div>
</div>
</div>
3. Letakkan kode CSS berikut ke dalam deretan kode CSS di dalam b:skin
/**Main Menu CSS**/
nav{background:#263238;z-index:999}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
ul.menumen{float:right;padding-bottom:0;margin:0}
#cssmenu #head-mobile{display:none}
#cssmenu{background:#263238}
#cssmenu > ul > li{float:left;text-transform: uppercase;}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto;margin:0}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
li.icon-searchku{padding-top:3px}
#search-resp{display:none}
@media screen and (max-width:1000px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
#search-resp{display:block;width:55px;height:46px;position:absolute;left:14px;top:2px;cursor:pointer;z-index:12399994}
li.icon-searchku{display:none!important}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}
#search-resp .show a.tombolkecil{display:block;padding-top:10px}
}
#search-resp{display:block!important;position:absolute;top:3px;right:15px}
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow .3s ease-in-out;-moz-animation:shownow .3s ease-in-out;animation:shownow .3s ease-in-out}
@keyframes shownow {
0%{transform:scale(0.9)}
50%{transform:scale(1.01)}
100%{transform:scale(1)}
}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#searchformku{border:1px solid #fff;border-radius:5px;color:#111;width:99%;margin:0 auto;overflow:hidden;position:relative}
.button-searchku,.button-searchku:hover{clear:both;background:none;border:3px;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700}
.button-searchku:active{border:none;outline:none;background:none}
#search-formku{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:20px;color:#fff!important;-webkit-box-sizing:border-box}
#search-formku:focus{border:none;outline:0;color:#fff}
#searchformku:focus{border:none;outline:0;color:#3f3f3f}
#box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s}
#hide a.tombolkecil{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;float:right;overflow:hidden;display:block}
#hide a.tombolkecil:hover{color:#eee;border-color:#eee}
#box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.icon-searchku a{font-weight:400;width:auto;height:50px;top:6px;cursor:pointer;font-size:20px;color:#dedede}
.icon-searchku{display:block;float:left}
4. Cari </body> lalu letakkan javascript dibawah ini dan taruh / paste di atasnya.
<script>
/*<![CDATA[*/
//Main Menu
!function(s){s.fn.menumaker=function(o){var e=s(this),n=s.extend({format:"dropdown",sticky:!1},o);return this.each(function(){return s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var o=s(this).next("ul");o.hasClass("open")?o.slideToggle().removeClass("open"):(o.slideToggle().addClass("open"),"dropdown"===n.format&&o.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle():s(this).siblings("ul").addClass("open").slideToggle()})},"multitoggle"===n.format?multiTg():e.addClass("dropdown"),n.sticky===!0&&e.css("position","fixed"),resizeFix=function(){var o=1e3;s(window).width()>o&&e.find("ul").show(),s(window).width()<=o&&e.find("ul").hide().removeClass("open")},resizeFix(),s(window).on("resize",resizeFix)})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery),$(function(){var s=$(document).scrollTop(),o=$(".float_wrapper").outerHeight();$(window).scroll(function(){var e=$(document).scrollTop();$(document).scrollTop()>=50?$(".float_wrapper").css("position","fixed"):$(".float_wrapper").css("position","fixed"),e>o?$(".float_wrapper").addClass("scroll"):$(".float_wrapper").removeClass("scroll"),e>s?$(".float_wrapper").removeClass("no-scroll"):$(".float_wrapper").addClass("no-scroll"),s=$(document).scrollTop()})});
/*]]>*/
</script>
5. Simpan
Demikian tutorial tentang Menu Responsive Collapse dengan Logo semoga bermanfaat. Terima kasih telah membaca postingan agung jaka nugraha. Wassalam
