Kali ini kita akan membahas cara pembuatan navigasi vertikal atau berada disamping dengan posisi berjejer kebawah, navigasi vertikal yang satu ini hampir mirip dengan navigasi vertikal yang ada di Blog Kang Ismet, untuk pembuatan menu yang satu ini yang dibutuhkan adalah CSS, HTML, dan tentunya juga sentuhan JavaScript, sekali lagi saya katakan, navigasi ini masih default seperti demo diatas, silahkan sobat tambahkan dan edit-edit lagi CSSnya agar tampilannya menjadi lebih bagus, oke tidak usah basa basi lagi, jika sobat ingin menerapkannya berikut tutorialnya :
(Untuk yang satu ini masih default, silahkan dikreasikan sendiri)
Pertama-tama masuk ke Template > Edit HTML, karena menu ini menggunakan icon dari font awesome, jadi letakkan script dibawah ini letakkan diatas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Langkah kedua letakkan kode JavaScript ini tepat diatas </body>
<script type='text/javascript'>
$("#menu a.tutup,#menu a.buka").click(function(e){
e.preventDefault();
if($(this).hasClass("buka"))
{
$(this).removeClass("buka");
$(this).parent().children("ul").stop(true,true).slideUp("normal");
} else {
$("#menu a.tutup.buka").removeClass("buka");
$(this).addClass("buka");
$(".sub").filter(":visible").slideUp("normal");
$(this).parent().children("ul").stop(true,true).slideDown("normal");
}
});
</script>
Langkah ketiga adalah menambahkan CSSnya, letakkan kode css dibawah ini tepat diatas ]]></b:skin> atau </style>
/* --- Menu Navigation Agan-Tutorial--*/
ul,
ul li,
ul li ul {
list-style: none outside none;
padding:0;
margin:0;
}
#menu-wrap {
position: absolute;
top: 50%;
left: 50%;
margin-top: -140px;
margin-left: -140px;
width: 280px;
}
#menu {
padding: 18px 0;
}
#menu > li > a {
display: block;
margin: 0 auto;
width: 90%;
text-indent: 18px;
line-height: 39px;
}
#menu > li > a.tutup::after {
position: absolute;
right: 30px;
margin-top: 2px;
font-family: "FontAwesome";
content: "\f054";
}
#menu > li > a.tutup:hover,
#menu > li > a.tutup.buka {
color: #333;
}
#menu > li > a.tutup.buka::after {
content: "\f078";
}
.sub {
display: none;
}
.sub a {
position: relative;
display: block;
margin: 0 auto;
width: 212px;
text-indent: 0px;
line-height: 39px;
}
Langkah terakhir adalah menambahkan kode pemanggil atau HTMLnya, terserah sobat ingin meletakkannya dimana, di tambah widget juga bisa, di HTML/JavaScript
<div id="menu-wrap">
<ul id="menu">
<li><a href="#">Menu I</a></li>
<li><a class="tutup" href="#">Menu II</a>
<ul class="sub">
<li><a href="#">Sub Menu I</a></li>
<li><a href="#">Sub Menu II</a></li>
</ul>
</li>
<li><a href="#">Menu III</a></li>
<li><a class="tutup" href="#">Menu IV</a>
<ul class="sub">
<li><a href="#">Sub Menu I</a></li>
<li><a href="#">Sub Menu II</a></li>
</ul>
</li>
<!-- Dan Seterusnya-->
</ul>
</div>
Nah itu dia menu navigasi vertikal dengan drop down onclik yang mirip seperti blog kang ismet, silahkan sobat kreasikan lagi agar menunya menjadi semakin mantap, Semoga Bermanfaat.
Script oleh : http://www.xkomo.com/2014/05/tutorial-cara-membuat-menu-navigasi-vertikal.html
Post a Comment