Cara Bikin Menu Navigasi Accordion Efek Smooth JQuery

Menu navigasi accordion atau menu navigasi bertingkat dengan menggunakan efek smooth jquery atau efek slide yang akan saya bahas kali ini tampilannya sangat menarik sekali. Untuk blog anda yang sudah terlanjur dipasang menu navigasi biasa, silahkan dihapus dahulu lalu anda bisa membuat menu navigasi accordion atau menu navigasi bertingkat dengan efek smooth jQuery ini yang letaknya diatas header blog atau dibawah header. Maaf saya tidak mencantumkan demonya karena tidak punya blog untuk dibuat percobaan, tapi tutorial ini sudah saya uji coba di blog saya ini dan berhasil. Bagi yang ingin mencoba, silahkan simak cara membuatnya dibawah ini.

Cara membuat menu navigasi accordion efek smooth jquery
1. Login ke blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

.menu {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;}
.menu ul {height:32px;line-height:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUFe0KlLxOaxaP7m1nipDHP2fZ5GaRf8H7vVtog0GTVq8zbgJmIP291pyIjmf_XZIw_fzgvtEnkYrMFOJDfodsEGzcKuEnD63cdeL6RDwEo67fczrQy8Y330m7dr1n7gcxWMSr8JI82fs/s1600/videobar.png) 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;}
.menu li {list-style:none;margin:0px 0px;padding:0px 0px;
color:white;float:left;display:inline;position:relative;}
.menu li a {display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUFe0KlLxOaxaP7m1nipDHP2fZ5GaRf8H7vVtog0GTVq8zbgJmIP291pyIjmf_XZIw_fzgvtEnkYrMFOJDfodsEGzcKuEnD63cdeL6RDwEo67fczrQy8Y330m7dr1n7gcxWMSr8JI82fs/s1600/videobar.png) 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;}
.menu 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;}
.menu li ul a {border-left:none;border-right:none;border-top:1px solid #444;
border-bottom:1px solid #222;display:block;}
.menu li ul li {float:none;display:block;width:auto;}
.menu li ul ul {top:0px;left:100%;}
.menu li a:hover,
.menu ul li a:hover {background:#FDDF00;color:#fff;text-decoration:none}

4. 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() {$('.menu li').hover(function() {
$(this).children('ul').filter(':not(:animated)').slideDown(400);}, function() {
$(this).children('ul').slideUp(400);});});</script>

Keterangan :
Kalau pada template sudah ada kode jquery warna merah, maka tidak perlu lagi ditambahkan.

5. Cari kode <div id='header-wrapper'> lalu letakkan kode berikut dibawahnya

<div class='menu'>
<ul>
<li><a href='/'>About Me</a></li>
<li><a href='#'>Blogging</a>
<ul>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>Seo</a></li>
</ul>
</li>
<li><a href='#'>Design Grafis</a>
<ul>
<li><a href='#'>Sotosop</a></li>
<li><a href='#'>Coreldraw</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul>
<li><a href='#'>Lagu Barat</a></li>
<li><a href='#'>Lagu Indonesia</a></li>
<li><a href='#'>Lagu Daerah</a></li>
</ul>
</li>
<li><a href='#'>Mode Rambut</a>
<ul>
<li><a href='#'>Rambut Pria</a></li>
<li><a href='#'>Rambut Wanita</a></li>
</ul>
</li>
<li><a href='#'>Portal Berita</a>
<ul>
<li><a href='#'>Gosip Seleb</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>Biodata</a></li>
</ul>
</li>
<li><a href='#'>Hardware</a>
<ul>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Handphone</a></li>
<li><a href='#'>Printer</a></li>
</ul>
</li>
<li><a href='#'>Kesehatan</a></li>
</ul>
</div>

6. Simpan template

Demikianlah cara membuat menu navigasi bertingkat dengan efek smooth jQuery, semoga bermanfaat.

tutorial blog

Terlintas

Cara Bikin Menu Navigasi Accordion Efek Smooth JQuery

Related Posts

Entri Populer