Cara buat Dropdown Menu jQuery pada Template Blogger

Dropdown Menu jQuery
Berikut ini merupakan multilevel Dropdown menu dengan menggunakan CSS dan sedikit sentuhan jQuery, penggunaan yang sangat simple dan ringan cocok pada Blogger Template.
Live Demo
Untuk Cara membuat Dropdown Menu jQuery pada Template Blogger sebagai berikut :
Langkah pertama masukan script jQuery dibawah ini berikut diatas </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

Kemudian masukan kode Javascript berikut dibawah script jQuery tadi:
<script type='text/javascript'>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
  });
}
$(document).ready(function(){     
 mainmenu();
});
</script>


Masukan kode HTML dibawah ini sebelum <div id='header-wrapper'> atau sesuai kebutuhan template diantara <body> ............ </body> :
<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript </a>
      <ul>
            <li><a href="#">3.1 jQuery</a>
              <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
              </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
      </ul>
    </li>
</ul>


Masukan kode CSS dibawah ini pada template blogger tempatnya diatas </b:skin>, jika perlu sesuaikan terlebih dahulu sesuai dengan karakter template anda. Selanjutnya silahkan Simpan Template dan lihat hasilnya.
#nav,#nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:1.5em}
#nav a{display:block;padding:0 5px;border:1px solid #333;color:#fff;text-decoration:none;background-color:#333}
#nav a:hover{background-color:#fff;color:#333}
#nav li{float:left;position:relative}
#nav ul{position:absolute;display:none;width:12em;top:1.5em}
#nav li ul a{width:12em;height:auto;float:left}
#nav ul ul{top:auto}
#nav li ul ul{left:12em;margin:0 0 0 10px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

Baca juga :

2 comments:

to Top