Penerapan Dropdown Menu jQuery di Blogger Template

Demo

Apabila kita ingin memberikan sedikit effect pada Menu Navigasi seperti Effect 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.

Saya mencoba menerapkan Menu Dropdown dengan jQuery ini di blogger template, hasil effect-nya cukup memuaskan (lihat demo dropdown menu).

Penerapan "Dropdown Menu - jQuery" di "Blogger Template"

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'> (penempatan lainnya bisa juga dibawah header):

<!-- Menu HTML -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>jQuery &#187;</a>
<ul>
<li><a href='#'>Tutorial &#187;</a>
<ul>
<li><a href='http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html'>Back to Top</a></li>
<li><a href='http://deconstructioncode.blogspot.com/2009/07/link-nudging-di-blogger-template.html'>Link Nudging</a></li>
</ul>
</li>
<li><a href='#'>Plugin</a></li>
<li><a href='#'>News</a></li>
</ul>
</li> <div class='clear'/>
</ul>

:: Catatan: isi dari konten tiap menu ini perlu anda rubah sesuai yang anda inginkan.

4. Masukan kode CSS berikut:

/* menu
*/
#nav{
background-color: #eee;
border: 1px solid #cccccc;
}
#nav, #nav ul{
width: 760px;
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 perlu anda sesuaikan dengan karakter template anda.

5. Save template, selesai.

Artikel Terkait di Bawah posting