Dropdown Menu jQuery di Blogger Template

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 dibawah ini 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>



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.

:: lihat juga: Berbagai macam "Dropdown Menu Jquery"

Artikel dari http://deconstructioncode.blogspot.com/ di copy pada tanggal 03 April 2010 jam 22.08 wib.

Manuk Merak

Only blogger users are learning

Share this post