Home » Trick Blog » Membuat Horizontal Menu Dropdown

Membuat Horizontal Menu Dropdown

kali ini saya akan memposting horizontal menu versi Technology Tower karena  tadi ada sobat blogger saya yang bertanya di fb bagaimana cara membuat horizontal menu dropdown, contohnya bisa kalian lihat sendiri di blog ini. Atau kamu bisa melihat gambar ini: 

langsung aja sob:

1. Masuk ke Rancangan Blogger>Edit HTML>Expand Template Widget
2. Cari kode <b:skin><![CDATA[ lalu pastekan kode dibawah ini sesudah kode <b:skin><![CDATA[

#menu-wrapper{color:#fff;width:100%;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXbkxuKFNdoCCGPqNJv84RW6ZCNF40ApjU3ee7Ey8G2o7GwT4hDuN-hJqv5SuTZCSenWoD5gIsgG7HdxMcBrpQXuLcZ7ZXPz2Vk8LzilplSPMoqNV77xZrF1sOWTyxX8Tu6J2XXYR6SxQ/s1600/bgnav.png) repeat-x #1e1e1e;border-bottom:2px solid #007acc;border-top:1px solid #191919;box-shadow:0 0 8px #007acc;position:relative}
#menu{color:#fff;width:900px;height:40px;font-family:'Agency FB';font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 auto}
#menu ul{width:100%;height:auto;list-style:none;margin:0;padding:0}
#menu ul li{float:left;position:relative;width:110px;margin:0}
#menu ul li ul{position:relative;z-index:111;display:none}
#menu ul li ul li{width:100%;background:#0e0e0e}
#menu ul li a,.menu ul li a:visited{display:block;text-decoration:none;width:100%;height:40px;text-align:center;line-height:40px;overflow:hidden;color:#007acc}
#menu ul li:hover ul{display:block;position:absolute;top:40px;left:0;width:100%;border-bottom:1px solid #0a0a0a;border-right:1px solid #0a0a0a;border-left:1px solid #0a0a0a;border-bottom-left-radius:5px;border-bottom-right-radius:5px;margin-left:-1px;box-shadow:0 8px 6px -6px #000}
#menu ul li:hover ul li ul{display:none}
#menu ul li:hover ul li a{display:block;color:#999;-webkit-transition:text-shadow .2s linear;-moz-transition:text-shadow .2s linear;-o-transition:text-shadow .2s linear;transition:text-shadow .2s linear}
.anditechno{background:transparent;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}
.anditechno:hover{color:#fff;background:#000}

3. cari kode <body> lalu pastekan kode dibawah ini sesudah kode <body>


<div id='menu-wrapper'><div id='menu'><ul><li> <a class='anditechno' href='/'>Home</a>
</li>

<li><a class='anditechno' href='#' title=''>Techno Zone</a>

<ul><li><a href='http://andi-techno.blogspot.com/search/label/teknologi' title='Artikel Teknologi'>Berita Teknologi</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/gadget' title='All About Gadget'>Gadget</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/software' title='All About Software'>Software</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/mobile' title='All About Mobile/Handphone'>Mobile</a></li></ul></li>

<li><a class='anditechno' href='http://andi-techno.blogspot.com/search/label/unik' title='Artikel Aneh dan Unik'>Unik + Aneh</a></li>

<li><a class='anditechno' href='#' title=''>Social Media</a>

<ul><li><a href='http://andi-techno.blogspot.com/search/label/social%20media' title='All About Social Media'>Social Media Article</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/facebook' title='All About Tips and Trick Facebook'>Facebook</a></li></ul></li>

<li><a class='anditechno' href='http://andi-techno.blogspot.com/search/label/tips%20dan%20trik' title='All About Tips and Trick'>Tips and Trick</a></li>

<li><a class='anditechno' href='http://andi-techno.blogspot.com/search/label/artikel' title='Other Article'>Artikel</a></li></ul></div></div>


keterangan:
- kamu bisa mengganti kode berwarna hijau dan biru dengan url dan nama menu sesuai menu yang mau kamu masukkan
- kode berwarna biru adalah kode menu dropdown (menu yang dibawahnya akan keluar menu lain ketika disorot mouse)

4. oke, klik simpan template dan lihat hasilnya

selamat berkreasi :)
Diposting oleh — Rabu, 22 Agustus 2012
Komentar Facebook
0 Komentar Blogger

Belum ada komentar untuk "Membuat Horizontal Menu Dropdown"

Tambahkan komentar anda :

Langganan: Posting Komentar (Atom)
© 2012 Karya Dika - ReDesign by Adam-xp