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"><!-- adding class="vertical" creates a vertical (stacked) first level menu - remove for a horizontal first level -->
 <ul>
  <li><a href="#">Produk</a>
     <ul><!-- drop down menu items -->
        <li><a href="#">Motor</a>
          <ul><!-- pop-out menu items -->
            <li><a href="#">Yamaha</a>
              <ul> <!-- second level pop-out menu items -->
                <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> <!-- second level pop-out menu items -->
                <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><!-- pop-out menu items -->
            <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>
        <!-- second level pop-out menu items-->
         <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 {
    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%; }

Komentar

Posting Komentar

Postingan populer dari blog ini

Login, Session, dan Logout

-
Gambar
Login, Session, dan Logout Login dan logout merupakan proses yang hampir tiap kali kita temui sewaktu browsing. Misalnya saja untuk cek e-mail atau masuk ke account di friendster, atau.. (saking banyaknya, saya sampai tidak bisa menyebutkan satu persatu). Sekarang saatnya kita mencoba membuat form login dan logout sendiri  secara sederhana . Menggunakan PHP & MySQL tentunya. Langkah-langkahnya: Jika anda mencoba dari komputer stand-alone, jalankan dulu webserver dan database server anda. Untuk gampangnya, gunakan saja  phptriad . 1. Database Setiap user yang login akan dicek username dan passwordnya dari tabel user yang terdapat pada database. Kita buat dulu databasenya: Perintah yang digunakan: create database coba; use coba; create table users ( id int auto_increment not null, username varchar(20) not null, password varchar(35) not null, primary key(id) ); jika sudah selesai, ketikkan perintah desc users; maka akan tampil seperti berikut ini:...
Baca selengkapnya
-
Gambar
Membuat Login dan Register Sederhana dengan PHP dan MySQL. fyan_bluffy Gudang Koding  - Kali ini Gudang Koding akan memberikan Tutorial tentang membuat Sebuah Form Login dan Register sederhana Menggunakan PHP dan MySQL, lagi lagi saya tekankan jika anda masih dalam tahap belajar dalam pemograman PHP silahkan Baca Tutorial saya sebelumnya, tentang dasar dasar pemograman PHP.  Spesifikasi Program dan Database :  Program dibuat menggunakan PHP Murni ( Native ) Database Program Menggunakan MySQL. Tabel yang digunakan hanya 1 ( satu ) CSS menggunakan Bootstrap Framework Implementasi Form dan Session pada PHP. File dari Tutorial bisa Anda Download. Buat sebuah Database dengan nama  simplelogin  lalu buat Table " user " dengan detail sebagai berikut :  - username : varchar : 50 : Primary Key  - password: varchar : 100 : -  - email: varchar : 50 : Unique  - nama: varchar : 35: -  Pastikan Urutannya Sama.  Lalu buat str...
Baca selengkapnya

Cara Membuat File Setup / Installer Aplikasi Sendiri dengan Inno Setup Compiler

-
Gambar
Pernahkah anda bertanya-tanya bagaimana caranya membuat file setup / installer / installan aplikasi sendiri dalam berbentuk .exe ? kemungkinan anda akan menemukan hal ini ketika akan menginstall sebuah aplikasi dan anda diharuskan untuk mengklik  next-next  dan  next  agar aplikasi tersebut terinstall. Namun, ketika anda membuat sebuah aplikasi menggunakan Visual Studio (misalnya) semua isi file tersebut akan berantakan dan pada waktu inilah anda perlu sebuah aplikasi untuk merapihkan file-file yang berantakan tersebut menjadi satu  package installer  sehingga pengguna yang akan menginstall aplikasi anda pun tidak akan kebingungan. Adapun nama aplikasinya adalah Inno Setup Compiler. Inno Setup  adalah sebuah perangkat lunak instalasi bebas berbasis skrip yang ditulis menggunakan Embarcadero Delphi oleh Jordan Russel. Versi pertama perangkat lunak ini dirilis tahun 1997. Aplikasi ini memudahkan para programmer untuk menyatukan beberapa file p...
Baca selengkapnya