TopBottom
Announcement: MOHON KLIK FOLLOW( KLIK AGAK SUSAH, PENCET DI BAWAH HURUF) TERIMA KASIH DAN MAAF ATAS KETIDAK NYAMANAN..

cara membuat dropdown menu jquery

Posted by Anas Imaduddin at Selasa, 01 Maret 2011
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

ara 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.

Label: ,

0 komentar:

Posting Komentar