Membuat Dropdown Horizontal Menu Jquery di Blog

Membuat Dropdown Horizontal Menu Jquery di Blog merupakan trik yang akan saya bahas pada kali ini, berhubung ada sahabat blogger yang bertanya mengenai cara membuat horizontal menu. banyak yang menyajikan tutorial ini, namun hal ini cukup berbeda dengan tutorial yang lainnya karena menggunakan jquery. penggunaan jquery ini tidak terlalu berat dalam loading blog karena hanya alakadarnya saja, tidak terlalu full jquery.Setelah pada posting sebelumnya saya pernah membahas bagaimana cara membuat/pasang sexy social bookmark di blog.
untuk melihat dropdown menu ini dapat dilihat dengan klik gambar dibawah ini :
Bagaimana cara membuatnya? mari kita simak tutorialnya :

* Login ke account blog anda
* Klik rancangan
* Klik edit html dan expand widget template
* 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 bisa 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 bisa anda edit sesuai template anda.
Simpan hasil kerja anda dan lihat hasilnya
sumber: http://asrizalwahdanwilsa.blogspot.com/2010/09/membuat-dropdown-horizontal-menu-jquery.html