Dropdown Menu dengan JQuery

# Amaran, tutorial ni sangat rumit dan agak leceh. T_T Tapi jangan risau, confirm jadi. Insha'Allah. Jom buat!

Bagaimana cara membuatnya? mari kita semak tutorialnya :

Blogger dashboard > Templates > Backup / Restore > Edit HTML > Proceed

Simpan kode script jQuery berikut diatas kode </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.


Masukan kode Javascript berikut dibawah script jQuery tadi :

<script type='text/javascript'>function mainmenu(){$(&quot; #nav ul &quot;).css({display: &quot;none&quot;}); // Opera Fix$(&quot; #nav li&quot;).hover(function(){$(this).find(&#39;ul:first&#39;).css({visibility: &quot;visible&quot;,display: &quot;none&quot;}).show(400);},function(){$(this).find(&#39;ul:first&#39;).css({visibility: &quot;hidden&quot;});});}$(document).ready(function(){
mainmenu();});</script><!-- end dropdown menu-->

Masukan kode HTML berikut sebelum <div id='header-wrapper'>:

<ul id='nav'><li><a href='/'>Home</a></li><li><a href='http://www.rikyrizkiyana.co.cc/'>Riky Rizkiyana</a></li><li><a href='#'>Demo Dropdown Menu jQuery &#187;</a><ul><li><a href='#'>Tutorial &#187;</a><ul><li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/cara-pasang-navigasi-breadcrumb-di-blog.html'>Pasang Breadcrumb di Blog</a></li><li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/07/cara-membuat-related-post-di-sidebar.htmll'>Related Post di Sidebar</a></li></ul></li><li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/pasang-sexy-social-bookmark-di-blog.html'>Pasang Social Bookmark di Blog</a></li><li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/backlink-dari-yahoo.html'>Dofollow Baclink Yahoo</a></li><li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/kesalahan-dalam-optimasi-seo.html'>Kesalahan Optimasi SEO</a></li></ul></li> <div class='clear'/></ul>

Catatan : Anda boleh menepatkan HTML tersebut sesuai dengan template yang anda pakai. 

Masukan kode CSS berikut diatas code ]]></b:skin> 

#nav{background-color: #fff;border: 1px solid #ccc;}#nav, #nav ul{width: 960px;margin:0px auto;padding:5px 0;list-style-type:none;list-style-position:outside;position:relative;line-height:1.5em;text-align:left;}#nav a{display:block;padding:2px 10px;border:1px solid #212421;color:#fff;text-decoration:none;background-color:#212421;}#nav a:hover{background-color:#333;}#nav li{float:left;position:relative;padding:0px 5px;}#nav ul {position:absolute;display:none;width:12em;top:100%;left:0;}#nav li ul a{width:12em;height:auto;float:left;}#nav ul ul{top:auto;}#nav li ul ul {left:13em;margin:0px 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;}

Catatan: kode css ini anda boleh edit sesuai template anda.


Simpan hasil kerja anda dan lihat hasilnya