membuat multilevel menu menggunakan css

Membuat Multilevel Menu Menggunakan CSS

Apakah yang pertama kali terlintas dipikiran kita ketika ingin membuat website? Tentu saja adalah bagaimana tampilan sebuah website itu terlihat lebih menarik. Dari pemilihan warna, tulisan sampai penempatan menu2, merupakan salah satu yang memang harus dipikirkan terlebih dahulu.

Pembahasan kali ini adalah membuat multilevel menu menggunakan CSS. Langkah-langkahnya yaitu :1. Membuat Halaman HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Membuat Multilevel Menu</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" href="multi_drop_menus_class.css" />

</head><body>

<div class="multi_drop_menus"> <ul> <li><a href="#">Produk</a> <ul> <li><a href="#">Motor</a> <ul> <li><a href="#">Yamaha</a> <ul>  <li><a href="#">Mio</a></li> <li><a href="#">Vixion</a></li> <li><a href="#">Jupiter Z</a></li> </ul> </li> <li><a href="#">Honda</a> <ul>  <li><a href="#">Tiger</a></li> <li><a href="#">Beat</a></li> <li><a href="#">Kharisma</a></li>

</ul> </li> <li><a href="#">Suzuki</a></li> </ul></li> <li><a href="#">Mobil</a> <ul> <li><a href="#">Honda</a></li> <li><a href="#">Suzuki</a></li> <li><a href="#">Toyota</a></li> <li><a href="#">Daihatsu</a></li> </ul></li> <li><a href="#">Sepeda</a></li> </ul> </li> <li><a href="#">Members</a></li> <li><a href="#">About Us</a> <ul>  <li><a href="#">Profile</a></li> <li><a href="#">Contact Us</a></li> </ul> </li> </ul></div>

</body></html>

2. Membuat CSS

div.multi_drop_menus * { margin:0; padding:0;}

div.multi_drop_menus { behavior:url(../../lib/js_tools/csshover.htc); font-family: arial, sans-serif; font-size:.8em; margin:0px 0 10px 0px; background-color:transparent; } div.multi_drop_menus ul { border-left:1px solid #CCB; display:inline;

} div.multi_drop_menus li { background-color:#E0E7C9; border-right:1px solid #CCB; }

div.multi_drop_menus li:hover { background-color:#F0F7D9; } div.multi_drop_menus a { color:#776; padding:.2em 5px; } div.multi_drop_menus a:hover { color:#443; } div.multi_drop_menus ul li ul { width:12em; } div.multi_drop_menus li li { background-color:#E0E7C9; border-bottom:1px solid #CCB;} div.multi_drop_menus ul li ul li ul { border-top:1px solid #CCB; top:-1px; } div.multi_drop_menus li li li { background-color:#EEB; } div.multi_drop_menus li li li li { background-color:#DDA; }

div.multi_drop_menus.transparent ul ul li { opacity:0.9; -moz-opacity:0.9; filter:alpha(opacity=90); }

div.multi_drop_menus.vertical ul { border-top:1px solid #CCB; }div.multi_drop_menus.vertical li { border-bottom:1px solid #CCB; } div.multi_drop_menus.vertical ul ul { border-top:1px solid #CCB; top:-1px; }

div.multi_drop_menus { float:left; width:100%;}

div.multi_drop_menus ul { float:left; font-size:1em;}

div.multi_drop_menus li { float:left; list-style-type:none; position:relative; } div.multi_drop_menus a { display:block; text-decoration:none; } div.multi_drop_menus ul li ul { position:absolute; border:0; margin-left:0px; } div.multi_drop_menus ul li ul li { width:100%; padding:0; border-left:0; border-right:0; } div.multi_drop_menus ul li ul {display:none;} /* conceals the drop-down when menu not hovered */

div.multi_drop_menus ul li:hover ul { display:block; z-index:1000; }

body div.multi_drop_menus ul li ul li ul { position:absolute; visibility:hidden; left:100%;

top:-1px; } div.multi_drop_menus ul li ul li:hover ul {visibility:visible;}div.multi_drop_menus ul li ul li:hover ul li ul {visibility:hidden;}div.multi_drop_menus ul li ul li ul li:hover ul {visibility:visible;}

div.multi_drop_menus.vertical ul { border-left:0px; margin-left:0; } .vertical ul { width:100%; }

div.multi_drop_menus.vertical li { position:relative; width:100%; clear:left; border-right:0;}

div.multi_drop_menus.vertical ul ul { position:absolute; left:100%; top:-1px; }

div.multi_drop_menus.vertical li li { }div.multi_drop_menus.vertical ul ul ul { left:100%; }* html div.multi_drop_menus { z-index:1; }* html div.multi_drop_menus ul li ul { z-index:400; }* html div.multi_drop_menus a { }* html div.multi_drop_menus.vertical a { zoom:100%; }* html div.multi_drop_menus ul ul a { zoom:100%; }

Membuat button gradasi dengan css

1. Buat terlebih dahulu background gradasi untuk button saat di over dan saat tidak di over di photoshop, misalnya:

image background saat over, kita namakan bg_button_over.gif

image background saat tidak over, kita namakan bg_button.gif2. buat css untuk button saat di over

#button a { margin-top: 12px; float: left; height: 23px; width: 106px; border: 1px solid #CF6F18; background-image: url(images/bg_button_over.gif); font-family: Arial; font-size: 12px; line-height: 23px; font-weight: bold; color: #000000; text-align: center; vertical-align: text-top; text-decoration: none;}masukkan image background yang kita sediakan untuk saat di over ke background-image.

3. buat css untuk button saat tidak diover#button a:hover{ background-image: url(images/bg_button.gif); border: 1px solid #6A9EC3;}masukkan image background yang kita sediakan untuk saat tidak di over ke background-image dan ubah warna bordernya jika diperlukan.

Contoh html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">

</style></head>

<body><div id="button"><a href="/search/">Search</a></div></body></html>

membuat multilevel menu menggunakan css

Documents