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(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(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 »</a>
<ul>
<li><a href='#'>Tutorial »</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.
Drop-down
Tips N Triks
- Tips & Trik Jumper | Teknik Jumper Keypad Handphone
- Blackberry Software Solution By Kenny ic3
- Tips mempertahankan baterai laptop agar bertahan lama I Battery Care | Hausgame software center
- cara menggabungkan dan memotong video
- membuat poster animasi gokil abis dengan photobie
- Pengalaman membasmi virus shortcut, W32 Ramnit
- Perbaiki Safe Mode bermasalah dengan Safe Mode Fixer
- BlackBerry 8520 Curve usb solution
- Nokia E63 E71 E72 SMPS Jumper
- Hardware pack For Nokia X6 16GB Latest Software
- Nokia x6 16gb hardware solution
- Nokia X5 Hardwere Solution One Exe
- Nokia x5
- Nokia X6 32GB solution
- Nokia C1-00 All Hardware Latest Solution Pack
- Nokia X2 Soution
- x6 Nokia ALL UseFull Hardware Repair Solution Pack
- Nokia X3 all Hardware Tested Solution
- NOKIA x6 All Solution Here (Setup File v-4)
- Nokia X5 All Hardware Latest Solution
- Nokia X7-00 charging way
- Nokia E 71 Hardware Solution
- Nokia 1616 Display
- nokiaE7-00 power key way
- Nokia C,E,N,X series All hardware solution exe
JQery
- Switch Stylesheets jQuery: Trik Gonta-ganti CSS
- Scroll Background jQuery di Blogger Template
- Slide Show, jQuery Slider di Blogger Template
- Thumbnail Gallery, Heading dan Caption dengan Effect jQuery
- Social Bookmarks dengan jQuery di Blogger Template
- Drag Me Donk jQuery di Blogger Template
- Tabs - jQuery: Dalam Beragam Jenis
- Penerapan "Simple Tabs" di Blogger Template
- Penerapan Link Nudging di Blogger Template
- Menu Navigasi Vertikal dengan Efek jQuery
- Membuat Sliding Login/Register Form Panel di Blogspot [JQery]
0 komentar:
Posting Komentar