Jumat, Juni 18, 2010

Membuat menu dropdown menggunakan css script (menu navigasi horisontal)

Menu navigasi yang terpasang diblog dimaksudkan untuk memudahkan pengunjung menelusuri isi blog, selain itu juga menjadi pinti masuk robot search engine dalam menelusuri link yang ada di dalam blog.

Seperti dalam bahasan terdahulu tentang menu navigasi horisontal bercabang dengan cabang hanya 1 level, dalam postingan ini kita mencoba membuat menu navigasi horisontal (drop down menu) dengan cabang hingga dua level. Script menu ini bersumber dari css menu maker.

Tampilan menu navigasi bisa dilihat pada gambar di bawah ini




Untuk membuatnya login ke akun blogger



1. Pilih Dashboard - Tataletak - Edit HTML

menu horisontalcari kode berikut:


]]></b:skin>


2. Di bagian atas kode tersebut masukkan kode berikut

div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"



Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header 

6. Pilih gadget html/javascript
masukkan script berikut :

<div id="container">
<br><br>
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" >Notebook</a></li>
<li><a href="#" >Modem<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">GSM Modem</a></li>
<li><a href="#">CDMA Modem</a></li>
</ul>
</li>
<li><a href="#">Desktop PC</a></li>
<li><a href="#">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#">VGA Card</a></li>
<li><a href="#">Sound card</a></li>
<li><a href="#">TV Tuners</a></li>
<li><a href="#">Modem</a></li>
<li><a href="#">Mainboard</a></li>
<li><a href="#">Firewire</a></li>
<li><a href="#">Hardisk</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Amazon</a></li>
<li><a href="#">Clothes</a></li>
<li><a href="#"> Computer Articles<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">My Computer Dummies</a></li>
<li><a href="#">Dummy Blog</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</div>

Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.

Contoh blog yang memakai menu horisontal bisa dilihat disini menu horisontal





Artikel Terkait :



14 komentar:

Subhan mengatakan...

wah...yap..makin keren menunya, kalau pake drop down...keren
www.bebasberbagi.co.cc

mulyana post mengatakan...

ka saya lagi belajar bikin blog nih,,,udah saya ikutin caranya kaka,tapi ko malah jadi ga fungdi ya,,,tolong ya ka liatin ni blog saya ka www.kumpulananakmusikdangdut.blogspot.com

tlong balas ke email saya ya ka mulyanagitar@yahoo.co.id

m_chandra mengatakan...

sob. .
saya sudah follow. .
follow blog saya balik ya. .

Jevfri mengatakan...

mas menu drop downnya ada warna yang lain gk? Font hurufnya jg ada yg lain gk?

Artikel Komputer mengatakan...

Untuk ganti warna, coba diganti kode #b9121b, yang ada dibelakang background,, seperti di bawah ini

background:#b9121b

dropdown boys mengatakan...

Bos, gimana caranya supaya jika kita buka menu dropdown tapi menu dropdownnya ga cepat hilang seperti punya anda?
misal:
Blog&SEO->Panduan blog->Teknik SEO

setelah aku coba menu dropdownnya, aku ga bisa klik menu panduan blog dan di bawahnya coz mesti cepat hilang.

tolong kasih solusi dong bos...

Artikel Komputer mengatakan...

Mungkin script menu css tidak kompatible (ada konflik) dengan script template. Kelemahan script css terkadang tidak semua template cocok karena script css langsung disisipkan di template. Agak beda dengan menu javascript karena umumnya menggunakan external file sehingga kompatibilitasnya tinggi.
Coba pakai script menu css ini
http://artikelkomputerku.blogspot.com/2010/06/cara-membuat-menu-navigasi-horisontal.html
Mungkin cocok dengan script template anda.

stephencung mengatakan...

thx...bos,buat infonya

Anonim mengatakan...

BELAJAR LAGI BRO. JANGAN ASAL COPAS DARI BLOG ORANG.....LAM KENAL

Trance & House mengatakan...

Sobat "artikel Komputer"... trus berkarya maju jgn dengarkan bisikan "anonim".... sy dukung "artikel Komputer" karena tidak semua orang bisa tahu hanya dari 1 orang saja.... biar copas tapi niat kita ikhlas menyebarkan ilmu, maka dpt pahala kebajikan..., drpd punya ilmu tidak di bagi bisa masuk neraka.... karena berdosa....

anang yulianto mengatakan...

mantap benar infonya gan, trims banget

Agen Ace Max's Jakarta Selatan mengatakan...

Wah ternyata masih tetap gagal. aduh bodoh sekali ya aku ini..

alisa art shop mengatakan...

ahhhh sayang bgt templatenya beda sama template blog saya...

www.kerajinantangantasikmalaya.blogspot.com

pasang iklan gratis mengatakan...

sippp mantap gan...yang langsung di tempel di widget html tampa masuk ke template giman carannya?