Navigasi Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian Terbaik
Romeltea | Follow @romel_tea
Berikut ini kode dan cara memasang Navigasi Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian. Terbaik menurut saya.
Saya temukan di sebuah template premium yang lupa lagi namanya, namun sempat diuji coba, hasilnya seperti ini, sesudah sedikit dimodifikasi.
Tampilan Mobile/HP
Menu Responsive Tampilan Desktop
Cara Memasang Navigasi Menu Responsive Dropdown & Multidropdown
Berikut ini kode dan Cara Memasang Navigasi Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian seperti tampilan di atas.2. Simpan kode CSS Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian di atas kode ]]></b:skin>
.nav_wrapper{position:relative;left:0;font-weight:700;top:0;width:100%;transition:top .5s ease-out;background:#2f3b3f;margin:0 auto;max-width:1000px;z-index:9999}
.homer{background:#c00}
.btn{padding:10px 1%;margin:5px;color:#fff;text-decoration:none;font-family:sans-serif;transition:all .1s ease}
.btn:hover{transition:all .1s ease}
#search{float:right;font-size:30px;padding:2px 15px;line-height:40px;color:#fff;margin:0;font-weight:700;-webkit-transform:rotate(181deg);-moz-transform:rotate(181deg);-ms-transform:rotate(181deg);-o-transform:rotate(181deg);transform:rotate(181deg)}
#search:hover{color:#efa666}
.search_box{clear:both;width:100%;background:#e8ebf0;padding:0;margin:0;height:0;overflow:hidden;transition:all .1s ease-in-out}
.search_box.active{height:auto;padding:15px 0}
.search_box input{width:85%;font-size:13px;margin:0 0 0 15px;padding:10px;border:none;background:#fff}
.search_box input:focus{outline:none}
.search_box input.search_icon{clear:both;width:12%;height:auto;padding:10px;margin:0;margin-left:-5px;border:none;color:#fff;cursor:pointer;background:#8c949d;opacity:1;transition:all .1s ease}
.search_box input.search_icon:hover{background:#efa666}
.menu-link{display:none}
.spinner-master input[type=checkbox]{display:none}
.menu{width:100%;height:auto;background:#2f3b3f;transition:all .3s ease}
.menu ul{padding:0;margin:0;list-style:none;position:relative;display:inline-block}
.menu > li > ul.sub_menu{min-width:10em;padding:4px 0;background-color:#f4f4f4;border:1px solid #fff}
.menu ul li{padding:0}
.menu > ul > li{display:inline-block}
.menu ul li a{display:block;text-decoration:none;color:#fff;font-size:14px}
.menu ul li a:hover{background:#efa666;color:#fff}
.menu ul li.hover > a{background:#efa666;color:#fff}
.menu ul li > a{padding:15px}
.menu ul ul{display:none;position:absolute;top:100%;min-width:160px;background:#39484d}
.menu ul li:hover > ul{display:block}
.menu ul ul > li{position:relative}
.menu ul ul > li a{padding:10px 15px;height:auto;background:#39484d}
.menu ul ul > li a:hover{background:#efa666;color:#fff}
.menu ul ul ul{position:absolute;left:100%;top:0}
@media all and (max-width:800px) {
.nav_wrapper {width: 93.5%;margin: 0 20px;}
.example-header .container{width:100%}
#search{padding:10px}
.spinner-master *{transition:all .3s;box-sizing:border-box}
.spinner-master{position:relative;margin:15px;height:30px;width:30px;float:left}
.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:5px;left:0}
.spinner-master .spinner{position:absolute;height:4px;width:100%;padding:0;background-color:#fff}
.spinner-master .diagonal.part-1{position:relative;float:left}
.spinner-master .horizontal{position:relative;float:left;margin-top:4px}
.spinner-master .diagonal.part-2{position:relative;float:left;margin-top:4px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal{opacity:0}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-12px}
a.menu-link{display:block;color:#fff;float:left;text-decoration:none;padding:10px 16px;font-size:1.5em}
a.menu-link:hover{color:#efa666}
a.menu-link:after{content:"\2630";font-weight:400}
a.menu-link.active:after{content:"\2715"}
.menu{clear:both;min-width:inherit;float:none}
.menu,.menu > ul ul{overflow:hidden;max-height:0;background-color:#39484d}
.menu > li > ul.sub-menu{padding:0;border:none}
.menu.active,.menu > ul ul.active{max-height:55em}
.menu ul{display:inline}
.menu li,.menu > ul > li{display:block}
.menu > ul > li:last-of-type a{border:none}
.menu li a{color:#fff;display:block;padding:.8em;position:relative}
.menu li.has-submenu > a:after{content:'+';position:absolute;top:0;right:0;display:block;font-size:1.5em;padding:.55em .5em}
.menu li.has-submenu > a.active:after{content:"-"}
.menu ul ul > li a{background-color:#39484d;padding:10px 18px 10px 30px}
.menu ul li a:hover{background:#4b5f65;color:#fff}
.menu ul li.hover > a{background:#4b5f65;color:#fff}
.menu ul ul,.menu ul ul ul{display:inherit;position:relative;left:auto;top:auto;border:none}
.search_box{position:absolute;top:60px;left:0;z-index:10}
.search_box input{width:70%}
.search_box input.search_icon{width:17%}
}
@media (max-width: 600px){
.nav_wrapper {width: 91.5%;margin: 0 20px;}
}
@media (max-width:480px){
.nav_wrapper {width: 90%;margin: 0 20px;}
}
@media (max-width:320px){
.nav_wrapper {width:88%;margin: 0 20px;}
}
3. Simpan kode HTML Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian berikut ini di bawah kode </header>
<div class='nav_wrapper'>
<div class='spinner-master'>
<input id='spinner-form' type='checkbox'/>
<label class='spinner-spin' for='spinner-form'>
<div class='spinner diagonal part-1'/>
<div class='spinner horizontal'/>
<div class='spinner diagonal part-2'/>
</label>
</div>
<a class='btn' href='#search_box' id='search'>☌</a>
<nav class='menu' id='menu'>
<ul class='dropdown'>
<li><a class='homer' href='/' title='Homepage'>Home</a></li>
<li><a href='/search/label/News?amp;max-results=9' title='News'>News</a></li>
<li><a href='/search/label/Tips?amp;max-results=9' title='Tips'>Tips</a></li>
<li><a href='#Link' title='Link'>Dropdown <i class='fa fa-angle-down'/></a>
<ul>
<li><a href='/search/label/Blogging?amp;max-results=9' title='Blogging'>Blogging</a></li>
<li><a href='/search/label/Tips%20SEO?amp;max-results=9' title='Tips SEO'>Tips SEO</a></li>
<li><a href='/search/label/Desain%20Blog?amp;max-results=9' title='Desain Blog'>Desain Blog</a></li>
</ul>
</li>
<li><a href='/search/label/Foto' title='Foto'>Foto</a></li>
<li><a href='/' title='Categories'>Multidropdown <i class='fa fa-angle-double-down'/></a>
<ul>
<li><a href='#' title='Link'>Link » </a>
<ul>
<li><a href='#Link' title='Link'>Link</a></li>
<li><a href='#Link' title='Link'>Link</a></li>
<li><a href='#Link' title='Link '>Link</a></li>
<li><a href='#Link' title='Link'>Link</a></li>
</ul>
</li>
<li><a href='#Link' title='Link'>About</a></li>
<li><a href='#Link' title='Link'>Link » </a>
<ul>
<li><a href='#Link' title='Link'>Link</a></li>
<li><a href='#link' title='Link'>Link</a></li>
<li><a href='#Link' title='Link'>Link </a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#Link' title='Link'>Portfolio <i class='fa fa-angle-down'/></a>
<ul>
<li><a href='#Link' title='Link'>Link</a></li>
<li><a href='#Link' title='Link'>Link</a></li>
<li><a href='#Link' title='Link'>Link</a></li>
</ul>
</li>
<li><a href='#Link' title='Link'>Internet</a></li>
<li><a href='#Link' title='Link'>Links</a></li>
</ul>
</nav>
<form action='/search/' class='search_box' id='search_box'>
<input name='search_criteria' placeholder='Search here' type='text' value=''/>
<input class='search_icon' type='submit' value='Search'/>
</form>
</div>
4. Simpan kode Javascript Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian berikut ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$("ul li:has(ul)").addClass("has-submenu");
$("ul li ul").addClass("sub-menu");
$("ul.dropdown li").hover(function() {
$(this).addClass("hover")
}, function() {
$(this).removeClass("hover")
});
var $menu = $("#menu"),
$menulink = $("#spinner-form"),
$search = $("#search"),
$search_box = $(".search_box"),
$menuTrigger = $(".has-submenu > a");
$menulink.click(function(e) {
$menulink.toggleClass("active");
$menu.toggleClass("active");
if ($search.hasClass("active")) {
$(".menu.active").css("padding-top", "50px")
}
});
$search.click(function(e) {
e.preventDefault();
$search_box.toggleClass("active")
});
$menuTrigger.click(function(e) {
e.preventDefault();
var t = $(this);
t.toggleClass("active").next("ul").toggleClass("active")
});
$("ul li:has(ul)")
//]]>
</script>
5. Copas link ke kode jQuery berikut ini di atas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>
Catatan: Kalau kode di atas sudah ada di template Anda, jangan dipasang.
6. Save Template!
Demikian kode dan cara pasang Navigasi Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian Terbaik. (blogromeltea.blogspot.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me:
facebook
twitter
instagram
linkedin
youtube
No comments on Navigasi Menu Responsive Dropdown & Multidropdown plus Kotak Pencarian Terbaik
Post a Comment
No Spam, Please!