Membuat Navigasi Bertingkau Diatas Header Dengan Efek Smooth JQUERY

Menu Navigasi Bertingkat Diatas Header Dengan Efek Smooth JQuery - Kali ini kita akan bahas mengenai menu navigasi, yang letakknya di top / diatas header blog. Menu navigasi berfungsi untuk mempermudah pengunjung mencari label dari artikel blog anda. Menu navigasi bertingkat yang saya share ini menggunakan efek JQuery dan tampilannya juga tidak kalah menarik dari menu navigasi yang pernah anda jumpai pada blog lain. Anda nantinya dapat memasang menu navigasi bertingkat ini tidak hanya di atas header, tapi anda dapat memasang menu navigasi bertingkat ini di bawah header blog anda.

Seperti apa format / bentuk dari menu navigasi bertingkat dengan efek smooth JQuery tersebut, Linggar Maretva akan berikan demonya, coba anda klik disini untuk melihatnya.

Membuat Menu Navigasi Bertingkat Dengan Efek Smooth JQuery

1. Login ke blogger
2. Pilih Template => Edit HTML
3. Pilih Lanjutkan
4. Backup dulu template anda
5. Centang Expand Templates Widget
6. Tekan F3 untuk mencari kode ]]></b:skin>
7. Setelah itu copy kode dibawah ini dan paste di atas kode ]]></b:skin>

/*
 Copyright Desember 2012 by Rudy Hartono
 (http://teknik-blog-tutorial.blogspot.com)
 */
.menurudyhartono {
  font:normal 11px Times New Roman,Times,serif;
  line-height:normal;
  text-transform:uppercase;
  margin:5px 0px;
  padding:0px 0px;
  color:white;
  text-decoration:none;
}
.menurudyhartono ul {
  height:34px;
  line-height:34px;
  background-color:#009999;
  margin:0px 0px 10px;
  padding:0px 0px;
  border:2px solid #F4F4F4;
  -webkit-box-shadow:0 1px 5px #007D47;
  -moz-box-shadow:0 1px 5px #007D47;
  box-shadow:0 1px 5px #007D47;
}
.menurudyhartono li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  color:white;
  float:left;
  display:inline;
  position:relative;
}
.menurudyhartono li a {
  display:block;
  background-color:#009999;
  border-left:1px solid #19D5D5;
  border-right:1px solid #19D5BC;
  margin:0px 0px;
  padding:0px 15px;
  color:white;
  text-decoration:none;
  font-weight:bold;
  line-height:34px;
  text-shadow:1px 1px 2px #007D47;
  outline:none;
}
.menurudyhartono 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 #007D47;
  -moz-box-shadow:0 1px 5px #007D47;
  box-shadow:0 1px 5px #007D47;
  display:none;
}
.menurudyhartono li ul a {
  border-left:none;
  border-right:none;
  border-top:1px solid #19D5D5;
  border-bottom:1px solid #19D5BC;
  display:block;
}
.menurudyhartono li ul li {
  float:none;
  display:block;
  width:auto;
}
.menurudyhartono li ul ul {
  top:0px;
  left:100%;
}
.menurudyhartono li a:focus {
  background-color:#009999;
  border-left-color:#00B66D;
  border-right-color:#009F5F;
}
.menurudyhartono ul li a:focus {
  background-color:#009999;
  border-top-color:#00B66D;
  border-bottom-color:#009F5F;
}
.menurudyhartono li a:hover,
.menurudyhartono ul li a:hover {color:#19D58A;}

8. Selanjutnya letakkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.menurudyhartono li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>

Apabila didalam template blog anda sudah terdapat kode yang mirip dengan kode yang saya beri warna merah, maka abaikan saja dan tidak perlu anda copy lagi.

9. Setelah itu cari kode <div id='header-wrapper'> atau <div id='top-wrapper'>, dan letakkan kode berikut diatasnya

<div class='menurudyhartono'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Blogging</a>
            <ul>
                <li><a href='#'>Tips Blog</a></li>
                <li><a href='#'>Triks Blog</a></li>
                <li><a href='#'>Seo</a></li>
            </ul>
        </li>
        <li><a href='#'>Serba-Serbi</a>
            <ul>
                <li><a href='#'>Hot News</a></li>
                <li><a href='#'>Profil</a></li>
                <li><a href='#'>Life Style</a></li>
                <li><a href='#'>Tips Sehat</a></li>
                <li><a href='#'>Download</a></li>
                <li><a href='#'>Wallpaper</a></li>
            </ul>
        </li>
        <li><a href='#'>Aneka Resep</a>
            <ul>
                <li><a href='#'>Masakan Indonesia</a></li>
                <li><a href='#'>Masakan China</a></li>
                <li><a href='#'>Masakan Eropah</a></li>
                <li><a href='#'>Masakan Jepang</a></li>
            </ul>
        </li>
    </ul>
</div>

10. Selesai dan simpan template

Nah selamat mencoba Membuat Menu Navigasi Bertingkat Diatas Header Dengan Efek Smooth JQuery, semoga bermanfaat dan semoga sukses, happy blogging.

Sumber : http://teknik-blog-tutorial.blogspot.com/2012/12/menu-navigasi-bertingkat-diatas-header.html

Tweet