Membuat Menu Drop Down

Membuat Menu Drop down dengan CSS

Tab menu dropdown ini 100% menggunakan Cascading Style Sheet (CSS), tanpa javascript ataupun skript yang lainnya. Sehingga Menu drop down ini tidak akan membuat blog anda menjadi lambat ketika di loading, dan cocok dalam banyak browser. Bagi anda yang ingin memasang tab menu di bagian headernya, saya sarankan untuk memasang menu drop down ini di blognya. Bagaimana cara untuk membuat menu drop down ini? tentu saja banyak cara untuk membuatnya, namun dalam kesempatan ini saya akan menuliskan dengan 2 cara. Kira-kira caranya seperti ini :

# Metode yang pertama :

langkah #1 :

Login ke blogger dengan ID anda

Setelah berada pada halaman dashboard, klik Layout.

Kemudian klik tab edit HTML.

Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.

Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]>

Copy kode di bawah ini, lalu paste di atas kode : ]]>

/* ================================================================

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/drop_definition2.html

Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.

This stylesheet and the assocaited (x)html may be modified in any

way to fit your requirements.

=================================================================== */

#menu {list-style-type:none; margin:5px; padding:0;}

#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}

#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}

#menu li a, #menu li a:visited {text-decoration:none;}

#menu li dd {display:none;}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}

#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}

#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}

#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}

#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

#menu .one {background: #827b6b; border-top:5px solid #dca;}

#menu .two {background: #646e4c; border-top:5px solid #bb9;}

#menu .three {background: #a4a88d; border-top:5px solid #eec;}

#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}

#menu .one dt {background: #b2ab9b;}

#menu .two dt {background: #949e7c;}

#menu .three dt {background: #d4d8bd;}

#menu .four dt {background: #e2dfa8;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu .one dd {border-bottom:1px solid #aaa;}

#menu .two dd {border-bottom:1px solid #e8e8e8;}

#menu .three dd {border-bottom:1px solid #eee;}

#menu .four dd {border-bottom:1px solid #999;}

#menu dd.last {border-bottom:1px solid #fff;}

#menu dt a, #menu dt a:visited {display:block; color:#444;}

#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}

#menu .one dd a {background:#949e7c; color:#eee;}

#menu .two dd a {background:#d4d8bd; color:#346;}

#menu .three dd a {background:#e2dfa8; color:#654;}

#menu .four dd a {background:#b2ab9b; color:#ff8;}

#menu .one dd a:hover {background: #b2ab9b; color:#345;}

#menu .two dd a:hover {background: #949e7c; color:#543;}

#menu .three dd a:hover {background: #d4d8bd; color:#123;}

#menu .four dd a:hover {background: #e2dfa8; color:#534;}

Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :

Ubahlah kode yang saya cetak hijau, sehingga kodenya menjadi seperti ini :











Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.





lihat ke bagian bawah dan temukan kode ini:

Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :

• 
  
  
  
  

  DEMOS

  zero dollars

  wrapping text

  styled form

  active focus

  shadow boxing

  image map

  fun with backgrounds

  fade scrolling

  em sized images

  
  
  







• 
  
  
  
  

  MENUS

  spies menu

  vertical menu

  enlarging list

  link images

  non-rectangular links

  jigsaw links

  circular links

  
  
  
  







• 
  
  
  
  

  LAYOUTS

  Fixed 1

  Fixed 2

  Fixed 3

  Fixed 4

  minimum width for Internet Explorer

  
  
  







• 
  
  
  
  

  MOZILLA

  drop down menu

  cascading menu

  content:

  mozzie box

  rainbow box

  snooker cue made using border art

  target practise

  
  
  
  

Klik tombol Simpan Perubahan

Selesai. Silahkan lihat hasilnya.

Langkah-langkah di atas hanyalah untuk template minima , jadi untuk template anda terkadang kode nya sama dan banyak juga yang berbeda, silahkan di pelajari saja.

Sedikit tambahan :

Pada kode menu drop down yang saya berikan, ada kode seperti ini :

DEMOS

zero dollars

Perhatikan pada kode

dan

Kode yang di awali dengan

, adalah judul pada menu utama (tulisan yang muncul di muka).

Kode yang di awali dengan

, adalah judul untuk sub menu (tulisan pada drop menu).


Anda harus mengganti link yang ada dengan link milik anda sendiri, sebagai contoh :

zero dollars

ganti menjadi :

UniQue Template R 1.2

Selamat mencoba dan mempelajari.