Cara membuat menu navigasi dropdown


Menu navigasi adalah, sebuah menu yang berada dibawah/diatas header (Biasanya) yang berguna untuk menuju kesuatu link. Pasti sobat" disini sudah tidak asing lagi kan? Soalnya hampir disetiap blog ada navigasinya atau mungkin semuanya ada. Kalau memang sudah tidak asing, bagaimana dengan yang dropdown? Masih sedikit asing kan? Langsung aja keinti. Disini saya mau kasih Tutor cara membuat menu navigasi dropdown.

    1. Login keAkun blogger sobat.

    2. Copas kode dibawah ini dibawah code <div id="outer-wrapper"> / dimana saja.

<div id='menu'>
<ul id='menu'>
<li><a href="#">About Me</a>
<ul>
 <li><a href="#">Saya</a></li>
 <li><a href="#">Sejarah blog ini</a></li>
 </ul>
</li>
<li><a href="#">Contact</a>
 <ul>
 <li><a href="#">Facebook</a></li>
 <li><a href="#">Twitter</a></li>
 <li><a href="#">Mail</a></li>
 </ul>
</li>
<li><a href="#">Tutorial</a>
 <ul>
 <li><a href="#">Tutorial</a></li>
 <li><a href="#">Tutorial Blog</a></li>
 </ul>
</li>
<li><a href="#">Informasi/Berita</a>
<ul>
 <li><a href="#">Politik</a></li>
 <li><a href="#">Peristiwa</a></li>
 <li><a href="#">News</a></li>
 </ul>
</li>
<li><a href="#">Resep</a>
<ul>
 <li><a href="#">Kueh</a></li>
 <li><a href="#">Sop</a></li>
 <li><a href="#">Daging</a></li>
 </ul>
</li>
<li><a href="#">Game</a>
<ul>
 <li><a href="#">Lostsaga</a></li>
 <li><a href="#">Point Blank</a></li>
 <li><a href="#">Godswar</a></li>
 </ul>
</li>
<li><a href="#">Download</a>
<ul>
 <li><a href="#">Antivirus</a></li>
 <li><a href="#">Microsoft</a></li>
 <li><a href="#">Office</a></li>
 </ul>
</li>
<li><a href="#">Cheat</a>
<ul>
 <li><a href="#">Lostsaga</a></li>
 <li><a href="#">PB</a></li>
 <li><a href="#">Grandchase</a></li>
 </ul>
</li>
</ul>
</div>
NB: Ganti kode "#" dengan link sobat, ganti teks merah dengan judul tampilan link/apa saja. Teks hijau merupakan judul menu dropdown, bisa diganti.


    3. Lalu cari kode ]]></b:skin> lalu letakan kode dibawah ini tepat diatas kode  ]]></b:skin>

#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
display: block;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
padding:5px 15px 5px 15px;
background:#ccc;
margin:1px;
white-space: nowrap;
}
#menu ul li a:hover {
background:#000;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 14px;
    5. Simpan dan lihat hasilnya.

Apabila ada kesalahan, harap comment. Selamat mencoba :)


9 comments :

  1. gan,beneran sekolah kelas 5 sd ya / bohong ?

    ReplyDelete
    Replies
    1. ngga percaya ya? langsung kerumah saya aja deh hehe.. tapi sebentar lg ane naik ke kelas 6 :)

      Delete
  2. wahh..mantap nich,
    eh,btw tadi Q baca komen diatas admin kelas 5 SD,bener ga?????

    ReplyDelete
    Replies
    1. maksudnya??? maaf saya nggak ngerti :)

      Delete
  3. Asiikk..sob triknya... Blognya ringan juga nih. happy Blogging ya

    ReplyDelete
  4. wah asik ini tips...
    pengen ah dterapin di http://thephatar.blogspot.com
    maksih gan infonya...

    ReplyDelete