Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web, navigasi dianggap penting agar user yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam website Anda.
Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website
Biasanya, pada sebuah website, navigasi tertampil pada menu dan link yang terstruktur. Seringkali, saat kita membuka sebuah website, kita merasa kesal karena tidak mendapatkan halaman website yang dicari dikarenakan navigasi yang ruwet dan tidak jelas.
Selain itu dapat diartikan, Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya.
Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut
Cara Memasang Navigasi Menu Responsive Dropdown & Multidropdown
1. Tema > Edit HTML
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!
No comments:
Post a Comment
Dilarang berkata kasar .dan dilarang spam