728x90 AdSpace

HEADLINE NEWS

29 September 2010

Membuat Dropdown Horizontal Menu Jquery di Blog merupakan trik yang akan saya bahas pada kali ini, berhubung ada sahabat blogger yang bertanya mengenai cara membuat horizontal menu. banyak yang menyajikan tutorial ini, namun hal ini cukup berbeda dengan tutorial yang lainnya karena menggunakan jquery. penggunaan jquery ini tidak terlalu berat dalam loading blog karena hanya alakadarnya saja, tidak terlalu full jquery.Setelah pada posting sebelumnya saya pernah membahas bagaimana cara membuat/pasang sexy social bookmark di blog.
untuk melihat dropdown menu ini dapat dilihat dengan klik gambar dibawah ini :

Bagaimana cara membuatnya? mari kita simak tutorialnya :
  • Login ke account blog anda
  • Klik rancangan
  • Klik edit html dan expand widget template
  • Simpan kode script jQuery berikut diatas kode </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.
  • 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-->
  • 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://asrizalwahdanwilsa.blogspot.com/2010/09/cara-pasang-navigasi-breadcrumb-di-blog.html'>Pasang Breadcrumb di Blog</a></li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/07/cara-membuat-related-post-di-sidebar.htmll'>Related Post di Sidebar</a></li>
</ul>
</li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/pasang-sexy-social-bookmark-di-blog.html'>Pasang Social Bookmark di Blog</a></li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/backlink-dari-yahoo.html'>Dofollow Baclink Yahoo</a></li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/kesalahan-dalam-optimasi-seo.html'>Kesalahan Optimasi SEO</a></li>
</ul>
</li> <div class='clear'/>
</ul>
Catatan : Anda bisa menepatkan HTML tersebut sesuai dengan template yang anda pakai.
  • 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.
  • Simpan hasil kerja anda dan lihat hasilnya
----Semoga Bermanfaat----
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

4 komentar:

  1. Met pagi SObat... maaf aku baru bisa berkunjung....

    Wah bikin Top menu ya Sob...,klo Jquery kayanya emank udah jadi komponen wajib SOb buat Menu SOb... soalnya gak ad efek apa2 klo gak ditambah Jquery.. klo CSSnya ditambah Webkit dan opacitynya dinaikin lebih bagus tuh Sob.. sedikit rounded Menunya hhe,,,, thnx 4 share Sob... Semangat N happy blogging...

    BalasHapus
  2. met malam menjelang pagi sobat
    wah belom mengerti saya..tak pelajari dulu

    BalasHapus
  3. butuh beljar lagi ni gan maih pusing :a:

    BalasHapus

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Membuat Dropdown Horizontal Menu Jquery di Blog Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top