You must enable Javascript in your browser to run or open this site.

Membuat Menu Navigasi Jquery

Terus terang pada saya mendapatkan template ini, template ini sangat sederhana. Karna sangat sederhana template ini awalnya tidak menampilkan Menu Navigasi yang bagus, tetapi setelah itu saya modif modif hingga sampai saat ini terdapat menu navigasinya yang lumayanlah. Tetapi rata rata semua template menyediakan tempat navigasi.

Menu navigasi adalah kumpulan link link yang dijadikan menu utama dan diletakan di bar navigasi. Navigasi tidak selalu diatas dan dibawah, karna menu utama maka diletakan di tempat yang paling terlihat. Seperti blog Farixsan ini, tampilan blog ini dilengkapi dengan bar navigasi menu dan diletakan disebelah search box (kotak pencarian). Contohnya gambar bisa dilihat dibawah ini.

contohnya lagi bisa dilihat di google.com.


Nah, yang kita bahas ini adalah Menu navigasi dengan menggunakan Jquery. Menu navigasi yang dipasangkan dengan jquery akan terlihat lebih bagus dibanding tidak, terlihat menggulung. Tetapi terserah apa kata sobat. Dibawah adalah tutorial tidak dan menggunakan jquery. Tinggal pilih yang menurut sobat bagus.

NON JQUERY
• Buka blogger.com dengan password dan id

• Saat didashboard, klik design → edit html → centrang expand widget

• Cari kode (ctrl + f) dan letakan kode berikut tepat diatas kode ]]></b:skin>
#nav{
background: url(http://2.bp.blogspot.com/_wej_zr2VzN4/TQqzINDRTlI/AAAAAAAAAyU/BI3xS4PzmIo/s1600/asd.png);
height: 24px;
}

#nav, #nav ul{
width: 1000px;
margin:0px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height: 1.4em;
text-align:left;
font-size: 15px;
margin-bottom: 10px;
}

#nav a{
display:block;
padding:2px 15px;
color:#000;
text-decoration:none;
background: none;
text-shadow: 1px 1px 6px #000;
-moz-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
}

#nav a:hover{
background: url(http://4.bp.blogspot.com/_wej_zr2VzN4/TSVucAnQhgI/AAAAAAAAA4A/3ABWLnHlm7A/s1600/Line.png) no-repeat bottom;
color: #fff;
}

#nav li{
float:left;
position:relative;
padding:0px 5px;
}

#nav ul {
position:absolute;
display:none;
top:100%;
width:160px;
left:0;
background: #ccc;
-moz-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
}

#nav li ul a{
width: 120px;
padding-top: 4px;
padding-bottom: 4px;
float:left;
}

#nav ul ul{
top:auto;
background: none;
}

#nav li ul ul {
left:10.5em;
background: #ccc;
margin:-5px 0 0 0px;
}

#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;
}
Kode kuning adalah background navigasi yang diganti sobat dengan background lain, sedangkan kode merah adalah background hover yang bisa diganti sobat.
Kode Biru adalah jarak antara Sublink dengan Sub Sublink .
Jika ada yang kurang pas dengan lebar, maka ubahlah sendiri kode Width (lebar) atau Height (Tinggi) di sana dengan mengubah angka angkanya

• Selanjutnya letakan dan replace kode berikut ditempat kode navigasi sebelumnya, kalau ragu ragu bisa backup template
<ul id='nav'>

<li><a href='/' title='Home'>Home</a></li>

<li><a href='#' title='Link1'>Link1 &#187;</a>
<ul>
<li><a href='#' title='Sub-Link1'>Sub-Link1</a></li>
<li><a href='#' title='Sub-Link2'>Sub-Link2</a></li>
<li><a href='#' title='Sub-Link3'>Sub-Link3</a></li>
<li><a href='#' title='Sub-Link4'>Sub-Link3</a></li>
</ul>
</li>

<li><a href='#' title='Link2'>Link2 &#187;</a>
<ul>
<li><a href='#' title='Sub-Link1'>Sub-Link1 &#187;</a>
<ul>
<li><a href='#' title='SubSub-Link1'>SubSub-Link1</a></li>
<li><a href='#' title='SubSub-Link2'>SubSub-Link2</a></li>
<li><a href='#' title='SubSub-Link3'>SubSub-Link3</a></li>
</ul>
</li>
<li><a href='#' title='Sub-Link2'>Sub-Link2 &#187;</a>
<ul>
<li><a href='#' title='SubSub-Link1'>SubSub-Link1</a></li>
<li><a href='#' title='SubSub-Link2'>SubSub-Link2</a></li>
<li><a href='#' title='SubSub-Link3'>SubSub-Link3</a></li>
</ul>
</li>
</ul>
</li>

</ul>
Kode merah adalah Sub Link → Keluar dari Link. Kode kuning adalah Sub Sub link → keluar dari Sub Link

• Save Template

JQUERY MODE!

• Letakan kode dibawah sesudah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
• Letakan kode brikut setelah kode diatas
<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-->
• Save Templates

Mungkin bagi sobat blogger yang kurang PAS dengan templatenya, kami mohon maaf yaaa.
Terimakasih untuk para pengunjung yang sudah datang :)

26 comments

  1. wew... keren bro navbar nya bro...
    tapi bikin berat gak??

    BalasHapus
  2. jawaban untuk TYrips : Sepertinya tidak sob... Tidak sama sekali ^^ cobain saja sob

    BalasHapus
  3. nice tutor sob..
    keren sich tp klo menurut q berat

    BalasHapus
  4. @Karlz : makasih sob, sob blogku lambat atau tidak? kalo disini cepet sob.. gak ngadet ngadet..

    BalasHapus
  5. Kalau di PC saya blog ini ga berat sob. Menurut saya widget ini ga buat berat soalnya cuma sama dg menambah link, bnr ga ? :D

    BalasHapus
  6. salam sob
    akan dicoba nanti
    thanks sharenya

    BalasHapus
  7. @Kelpo : Terimakasih komentar dan kunjungannya sob... yaa kurang lebih begitu ^^
    @Kisah Abu Nawas : Weeee Online lagi nih! Makasih ya dah berkunjung abis dari liburan hehehe :)

    BalasHapus
  8. tak diragukan lagi kalo sobatku yang satu ini pandai sekali dalam olah html
    thanks sob
    sangat bermanfaat

    BalasHapus
  9. tutorial yang menarik dan detail, makasih sahabat sudah sharing.

    BalasHapus
  10. wuoooohh..mantap...mau coba ah...dari dulu pengen gitu..terus nanti kalo mau nambah tulisan kaya punya kamu gimana??misal home,my storu,exchange,dll
    balesnya ke buku tamu aja yak

    BalasHapus
  11. Thanks yaa All ^^.
    @Dimas : Untuk kreasi penambahannya, kan sudah ada contohnya diatas yang Home itu. Kalau mau nambah lagi, hanya edit copy kode <li><a href='/' title='Home'>Home</a></li> tadi ditambah merubah link dan namalink, paste kode buatan mas sebelum kode </ul>

    BalasHapus
  12. makasih banget infonya,,aku ambil beberapa kodenya...

    BalasHapus
  13. @Faril : Silahkan sob ambil sampai tangan kering hehehe... :)

    BalasHapus
  14. nice tutor sob,,,

    saya mau bertanya,,tp bkn mslh menu melainkan masalah
    bagaimana cara y link yg dituju kursor ada tulisannya...mhn tutor y,,
    @dareandtwo_fe@yahoo.co.id

    BalasHapus
  15. To Blogger Mania : (Saya menjawab di email dan di blogger ini) Tulisannya bagai mana sob? Link ada kotak warna putih ada tulisannya?

    BalasHapus
  16. sob, ya apa menunya biar sama kaya yang di blog ini....
    warnanya hitam bukan putih seeperti contoh di atas :D
    tolong donk, soalnya menu di blog ini bagus sob....

    BalasHapus
  17. To evosoftblog : Sob sebenarnya kode diatas tersebut sama dengan kode CSS punya saya ini, tetapi karna ini postingan sudah lama saya posting jadi tak terasa jika saya telah merubah kode CSS blog saya demi sedikit. Jika sobat mau dengan kode CSS klik disini : KLIK CSS CODE

    BalasHapus
  18. Selanjutnya letakan dan replace kode berikut ditempat kode navigasi sebelumnya, kalau ragu ragu bisa backup template
    maksudnya ni apa
    soalnya templateku ga ada menu navigasi sebelumnya...
    makasi

    BalasHapus
  19. sob, maksudnya ane mau minta background menu urlnya yang warna hitam itu...

    BalasHapus
  20. To evosoftblog : Selanjutnya letakan dan replace kode berikut ditempat kode navigasi sebelumnya, kalau ragu ragu bisa backup template maksudnya adalah letakan sesuai kebutuhan sobat mau dimana itu...., kalo ragu ragu atau takut salah, bisa di backup templatenya dulu dari pada salah total.

    Untuk backgroundnya ane menggunakan kode Warna HTML abu abu yaitu : #111111 bukan gambar.

    BalasHapus
  21. MOhon bantuan Mas Farix Kalau Menu Header Bersama Searh engine Dimana ?

    BalasHapus
  22. maksudnya sobat itu apa? saya tidak mengerti pertanyaan sob. Menu Header Bersama Search Engine??? Menu Header itu maksudnya menu Navigasi postingan ini?
    Kalau gitu sih, Sobat harus masukan kode search engine diantara kode <ul id='nav'> dan </ul>
    kode DAN itu adalah kode SEARCH ENGINE sobat

    BalasHapus
  23. mantep nih gan...
    makasih yach udah mau ngeshare...

    BalasHapus
  24. aku juga udah pasang nih menu yang seperti ini...

    BalasHapus