adsense link 728px X 15px

Thursday, June 3, 2010, 

menu drop down navigasiPostingan ini merupakan permintaan dari Paman Helman lewat kotak komentar pada postingan saya sebelumnya, adapun yang dipertanyakan oleh paman Helman yakni tentang bagaimana cara membuat menu drop down pada navigasi. Perhatikan image di samping. Sebelumnya saya minta maaf kepada paman Helman, karena baru sempet posting, akhir-akhir ini saya disibukkan oleh aktifitas saya di dunia nyata ^^. Kembali ke topik, pada navigasi di atas saya menggunakan CSS dan HTML. Dikarenakan menggunakan kode CSS maka kodenya pun lumayan ribet, kurang lebih seperti ini.


#NavbarMenu {
background:#434343; /*-- warna background navigasi --*/
width:900px; /*-- lebar navigasi --*/
height:34px; /*-- tinggi navigasi --*/
color:#ccc; /*-- warna teks navigasi --*/
margin:0 auto;
padding:0;
font:bold 8px Arial,Tahoma,Verdana;
}

#NavbarMenuleft {
width:650px; /*-- lebar menu (biasanya bagian kanan untuk kotak pencarian) --*/
float:left; /*-- posisi menu --*/
margin:0;
padding:0;
}

#nav {
margin:0;
padding-top:3px;
}

#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#nav li {
list-style:none;
margin:0;
padding:0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color:#ccc; /*-- warna teks menu --*/
display:block;
text-transform:uppercase;
margin:0;
padding:9px 15px 8px;
font:bold 12px Arial,Times New Roman;
}

#nav li a:hover, #nav li a:active {
background:#333; /*-- warna background menu drop down --*/
color:#FFF; /*-- warna teks pada menu drop down --*/
margin:0;
padding:9px 15px 8px;
text-decoration:none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#333; /*-- warna background menu drop down --*/
width:150px; /*-- lebar menu drop down --*/
color:#ccc; /*-- warna teks pada menu drop down --*/
text-transform:lowercase;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #131313; /*-- warna border bawah pada menu drop down --*/
border-left:1px solid #131313; /*-- warna border kiri pada menu drop down --*/
border-right:1px solid #131313; /*-- warna border kanan pada menu drop down --*/
font:normal 14px Georgia,Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background:#434343; /*-- warna background aktif menu drop down --*/
color:#fff; /*-- warna teks aktif pada menu drop down --*/
padding:7px 10px;
}


#nav li {
float:left;
padding:0;
}

#nav li ul {
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; /*-- lebar menu drop down --*/
margin:0;
padding:0;
}


#nav li ul a {
width:140px; /*-- lebar menu drop down --*/
}

#nav li ul ul {
margin:-32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}

#nav li:hover, #nav li.sfhover {
position:static;
}

* Silakan sesuaikan dengan template anda semua kode yang saya beri warna merah.

     Copy kode di atas lalu simpan dulu di note atau editor text lainnya. Kemudian ikuti langkah berikut.

  1. Login akun blogger anda.
  2. Klik Tata Letak, kemudian klik Edit HTML
  3. Expand widget template, setelah prosesnya selesai, cari kode berikut ]]
  4. Letakkan kode yang anda copy tadi tepat di atas kode ]]
  5. Copy kode di bawah ini

    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a href='URL'>Menu 1</a></li>
    <li><a href='URL'>Menu 2</a></li>
    <li><a href='#'>More &#187;</a>
    <ul>
    <li><a href='#'>Menu Drop Down 1#1&#187;</a>
    <ul>
    <li><a href='#'>Menu Drop Down 2#1 &#187;</a>
    <ul>
    <li><a href='URL'>Menu Drop Down 3#1</a></li>
    <li><a href='URL'>Menu Drop Down 3#2</a></li>
    </ul>
    </li>
    <li><a href='URL'>Menu Drop Down 2#2</a></li>
    </ul>
    </li>
    <li><a href='URL'>Menu Drop Down 1#2</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

    * Ganti URL dengan url yang anda tuju.
  6. Lalu cari lagi kode <div id='header-wrapper'>
  7. Apabila anda ingin navigasi berada di atas header, letakkan kode tadi (kode kedua) tepat diatas kode <div id='header-wrapper'>
  8. Tetapi apabila anda ingin navigasi berada di bawah header, letakkan kode tadi di bawah kode end tag header-wrapper. </div><!-- end header-wrapper -->
  9. Setelah selesai klik Simpan

     Cukup panjang kan kodenya?, ^^ Silakan lihat hasilnya, Semoga bermanfaat...







33 Comments:

darahbiroe said...  on  June 3, 2010 at 8:25 PM

wahhbegiutu yaw caranya
makasih untuk tutorialnya
thanks bgt
:D

antokcupu said...  on  June 3, 2010 at 8:26 PM

ijin copy scriptna yaw
dan dipraktekkan
:D

Rock said...  on  June 4, 2010 at 3:24 AM

Keren nich...
Aku simpan kodenya dulu sob...

Etc News said...  on  June 4, 2010 at 3:25 AM

Banyak banget ya kodenya...

bluethunderheart said...  on  June 4, 2010 at 4:15 AM

wah blue pasti simpan kodenya
salam hangat dari blue

mansuka said...  on  June 4, 2010 at 6:25 AM

wah makin sipp aja nih .. calon pengganti kang rohman ni .... mampir mas

Masda said...  on  June 4, 2010 at 8:29 AM

@darahbiroe, sama-sama mas
@antokcupu, selamat mencoba mas,
@rock, silakan dicopy mas,
@Etc News, iya mas pake CSS sìh, laen kali saya posting yang lebih simple,
@bluethunderheart, silakan dicopy mas, salam hangat juga dari Masda...
@mansuka, wah g mungkin tuh mas, kang rohman kan designer+masterblog, kalo saya kan cuman seorang blogger, btw makash apresiasinya...

imtikhan said...  on  June 4, 2010 at 8:22 PM

terima kasih tutorialnya sangat bermanfaat
semoga sukses

Uswah said...  on  June 4, 2010 at 9:18 PM

Met siang

informasi seputar PC said...  on  June 4, 2010 at 9:58 PM

siip ni,saya pake wordpress sudah ada menu dropdown bawaan dari templates.

berbagi wacana said...  on  June 4, 2010 at 9:59 PM

makasih informasinya ni,nambah cantik blogspot ni..

rizan said...  on  June 4, 2010 at 10:01 PM

kalo untuk wordpress ada nggak ya sobat,saya mau pasang menu dropdown ni..

Masda said...  on  June 4, 2010 at 10:38 PM

@imtikhan, sama-sama mas...
@uswah, siang juga...
@informasi seputar PC, saya malah lum pernah pake wordpress, :D
@berbagi wacana, sama-sama mas,,,
@rizan, waduh mas, saya lum pernah pake wordpress nih, maaf ya,,,

mixedfresh said...  on  June 4, 2010 at 11:17 PM

Mantap banget infonya....Tapi ada ga buat perbaiki gambar header yang rada eror???

rij4 said...  on  June 4, 2010 at 11:18 PM

Mantap buanget informasinya lumyana berguna buat newbie kaya aku...hehehe

ina said...  on  June 5, 2010 at 12:32 AM

nice tutorial kag :D

akhatam said...  on  June 5, 2010 at 1:58 AM

Wahh lumayann juga broo buat triknya... Bagus dehh!! Keep Blogging!

Masda said...  on  June 5, 2010 at 2:17 AM

@mixedfresh, terima kasih mas apresiasinya,,, erornya gimana ya?
@rij4, alhamdulillah deh kalo bermanfaat,,,
@ina, terima kasih mbk apresiasinya,,,
@akhatam, terima kasih mas apresiasinya,,,

Laksamana Embun said...  on  June 5, 2010 at 2:51 AM

Thanks Infonya sobat... Sangat informatif

Oia Salam knal dari Laksamana Embun

mansuka said...  on  June 5, 2010 at 4:49 AM

ya dengan terus belajar pasti bisa mas... oke linknya segera aku pasang

secangkir teh dan sekerat roti said...  on  June 5, 2010 at 8:11 AM

wah... sayang sekali baru liat.. :)

Zippy said...  on  June 5, 2010 at 9:05 AM

Wah..keren nih infonya.
Kapan2 kalo gak malas ngoprek HTML-nya, bakalan gue coba... :)

Dunia Hape said...  on  June 5, 2010 at 9:06 AM

Sayang, gak bisa nyobain.
Pake WP sih, hehehe...
Tapi mantep infonya :)

Hanna Pertiwi said...  on  June 5, 2010 at 11:38 AM

salam sobat
wah..tips hebat mas..menu navigasi yg hebat...

trims ya kemarin udh berkunjung ke rumah saya

Masda said...  on  June 5, 2010 at 3:27 PM

@Laksamana Embun, sama-sama mas, salam kenal balik,,,
@Mansuka, makasih mas,,,
@Secangkir teh dan sekerat roti, Zippy, Dunia Hape, Hanna Pratiwi, terima kasih apresiasinya... :)

kezedot said...  on  June 5, 2010 at 9:15 PM

makasih tipsnya
salam dalam persahabatan

Electronic Computer Home said...  on  June 5, 2010 at 10:41 PM

tips bagus dan berguna sekali. ijin como (copy & modify) ya sob. thanks :)

Power Plant said...  on  June 5, 2010 at 10:46 PM

ini yang aku butuhkan.. thanks :)

syahidacomputer said...  on  June 6, 2010 at 2:26 AM

info yang sangat bermanfaat shob untuk kemudahan blog....

Rizky2009 said...  on  June 7, 2010 at 4:55 AM

mangtab sob blog q juga dah tak pasang drop dowen navigasi

look at my face said...  on  August 1, 2010 at 9:35 PM

ini mazda hanggardi alumni wec madiun bukan?

goyang patah patah said...  on  October 18, 2012 at 10:48 AM

keren nich sobat, lumayan bisa buat belajar cara buat menu dropdown :)

Tips and Tricks said...  on  November 29, 2017 at 10:15 PM

I love that idea. Awesome Post..

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers