jQuery dropdown

Hi semua.... maaf atas keterlambatan posting blog kali ini karena saya masih sibuk...
hehehe...

yak kita mulai saja... kita akan belajar JQUERY
menu dropdown yang memakai jquery sangat bagus...
lihat lah page nav blog ini... dia turun secara pelahan kan.. ini lah kelebihan jquery
mau coba buat??? ok.. kita mulai..

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.

Posted in: jQuery