Cara Membuat Menu Navigasi Bertingkat dengan Efek Smooth JQuery - Menu navigasi bertingkat yang akan dibahas kali ini mirip dengan menu na...
Cara Membuat Menu Navigasi Bertingkat dengan Efek Smooth JQuery - Menu navigasi bertingkat yang akan dibahas kali ini mirip dengan menu navigasi accordion efek jquery yang pernah saya bahas sebelumnya namun tampilannnya lebih keren. Untuk anda yang ingin memasang menu navigasi bertingkat efek slide, silahkan simak tutorialnya dibawah ini, namun jika anda sudah lebih dulu memasang menu navigasi biasa silahkan hapus dulu agar tidak saling timpah tindih. Yuk simak bagaimana membuat menu navigasi bertingkat atau menu navigasi accordion dengan efek smooth jQuery di atas header blog.
Menu Navigasi Bertingkat dengan Efek Smooth JQuery diatas header blog :
1. Login ke akun blogger anda
2. Pada dashboard, pilih Template => Edit HTML
3. Backup dulu template anda
4. Centang Expand Widget Template
5. Tekan F3 dan cari kode <div id='header-wrapper'>
Nah untuk cara memasang menu navigasi diatas header blog, letakkan kode berikut dibawah kode <div id='header-wrapper'>
<div class='rudybondmenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Blogging</a>
<ul>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>Belajar Seo</a></li>
</ul>
</li>
<li><a href='#'>Design</a>
<ul>
<li><a href='#'>Photoshop</a></li>
<li><a href='#'>CorelDraw</a></li>
</ul>
</li>
<li><a href='#'>Health</a>
<ul>
<li><a href='#'>Tips Sehat</a></li>
<li><a href='#'>Tips Tampil Cantik</a></li>
<li><a href='#'>Tips Ibu</a></li>
</ul>
</li>
<li><a href='#'>LifeStyle</a>
<ul>
<li><a href='#'>Gaya Rambut Pria</a></li>
<li><a href='#'>Gaya Rambut Wanita</a></li>
<li><a href='#'>Model Busana</a></li>
</ul>
</li>
<li><a href='#'>Relegius</a></li>
<li><a href='#'>Education</a></li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Info Menarik</a>
<ul>
<li><a href='#'>Berita Terkini</a></li>
<li><a href='#'>Gosip</a></li>
<li><a href='#'>Profil dan Biodata</a></li>
</ul>
</li>
<li><a href='#'>Komputer</a>
<ul>
<li><a href='#'>Teknologi Komputer</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Hardware</a></li>
</ul>
</li>
<li><a href='#'>Love</a></li>
</ul>
</div>
6. Lalu cari kode ]]</b:skin> dan letakkan kode berikut diatasnya
.rudybondmenu {
padding-left:0;color:#fff;text-transform:uppercase;list-style-type:none;font:bold 11px Arial;text-shadow:1px 1px 1px #000;margin:0
text-decoration:none;
}
.rudybondmenu ul {
height:32px;
line-height:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHufpLIJFTMV-uze_5sVTdStBq7iO_M9T-2_ZyPU9cqfIQQuOxK496bpgUC3o4FH1imBJBWxSEobjMECJkJoToNK-OeeUXgqRydJ5zcwM5SBAlUe_sNdsFT-wwWtjG9qJcqOX-6hoLjA/s1600/nav.jpg) repeat-x;
margin:0px 0px 10px;
padding:0px 0px;
border:0px solid #e6e6e6;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
}
.rudybondmenu li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
color:white;
float:left;
display:inline;
position:relative;
}
.rudybondmenu li a {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHufpLIJFTMV-uze_5sVTdStBq7iO_M9T-2_ZyPU9cqfIQQuOxK496bpgUC3o4FH1imBJBWxSEobjMECJkJoToNK-OeeUXgqRydJ5zcwM5SBAlUe_sNdsFT-wwWtjG9qJcqOX-6hoLjA/s1600/nav.jpg) repeat-x;
border-left:1px solid #444;
border-right:1px solid #222;
margin:0px 0px;
padding:0px 15px;
color:#FDDF00;
text-decoration:none;
font-weight:bold;
line-height:32px;
text-shadow:1px 1px 2px #000;
outline:none;
}
.rudybondmenu li ul {
position:absolute;
z-index:10;
left:0px;
top:100%;
height:auto;
margin:0px 0px;
padding:0px 0px;
width:170px;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
}
.rudybondmenu li ul a {
border-left:none;
border-right:none;
border-top:1px solid #444;
border-bottom:1px solid #222;
display:block;
}
.rudybondmenu li ul li {
float:none;
display:block;
width:auto;
}
.rudybondmenu li ul ul {
top:0px;
left:100%;
}
.rudybondmenu li a:hover,
.rudybondmenu ul li a:hover {background:#FDDF00;color:#fff;text-decoration:none}
7. Langkah terakhir cari kode </head> dan letakkan kode berikut diatasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
$('.rudybondmenu li').hover(function() {
$(this).children('ul').filter(':not(:animated)').slideDown(400);
}, function() {
$(this).children('ul').slideUp(400);
});
});
</script>
8. Simpan template
Keterangan :
Apabila didalam template blog anda sudah menggunakan kode warna biru diatas, maka tidak perlu ditambahkan lagi.
Demikianlah Cara Membuat Menu Navigasi Bertingkat dengan Efek Smooth JQuery, silahkan dicoba dan semoga bermanfaat.
COMMENTS