Cara Membuat Dropdown Menu jQuery di Blogger

Diposting oleh rizalfauzan's blog di 15.05

Anda bisa merubahnya dengan cara memberi efek dropdown dengan jquery, "Create a multilevel Dropdown menu with CSS and improve it via jQuery" adalah salah satu pilihan menarik, yang dikembangkan oleh kriesi.at. Untuk melihat hasil dari penerapan itu anda bisa melihat pada blog saya atau melihat disini.  Live Demo

Cara Membuat Dropdown Menu jQuery di Blogger:

1. Masukan script jQuery 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.
2. 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-->

3. 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://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html'>Back to Top</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/link-hover-dengan-jquery.html'>Link Hover</a></li>
</ul>
</li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-jquery-color-picker-di_12.html'>jQuery Color Picker</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-menu-horizontal-ala-cnncom.html'>Menu Horizontal Ala CNN.com</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-tabbed-sidebar-by-abu.html'>Tabbed Sidebar by Abu Farhan</a></li>
</ul>
</li> <div class='clear'/>
</ul>

¶ Catatan : Anda bisa menepatkan HTML tersebut sesuai dengan template yang anda pakai.
4. 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.
5. Save template, selesai.

Sumber artikel:

1. Penerapan Dropdown Menu jQuery di Blogger Template - Deconstructioncode
2. Create a multilevel Dropdown menu with CSS and improve it via jQuery - kriesi.at