Membuat Menu Drop Down dengan CSS

Kali ini saya mendapatkan syntax atau script menu drop down mengunakan css. Dari pada disimpan di dalam buku ataupun disimpan di komputer, takutnya lupa diletakkan dimana ataupun file nya hilang terkena virus ataupun format ulang. Lebih baik saya simpan di blog saya ini, mungkin sudah banyak artikel yang sama. Langsung saja kita memulai membuat menu drop down.

  1. Membuat struktur Menu Drop Down, dengan HTML seperti dibawah ini
  2. <ul id="menudropdown">
        <li><a href="#">Home</a></li>    
        <li><a href="#">Artikel</a>
            <ul>
                <li><a href="#">PHP</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </li>
        <li><a href="#">About US</a></li>
    </ul> 
  3. Membuat layout menu dengan CSS, supaya lebih tertata rapi. Silahkan copy dan letakkan di atas "</head>".
  4. body{
    font-size:0.85em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #menudropdown, #menudropdown ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:25px; 
    }
    
    #menudropdown a{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
    }
    
    #menudropdown a:hover{
    background-color:#fff;
    color:#333;
    }
    
    #menudropdown li{
    float:left;
    position:relative;
    }
    
    #menudropdown ul {
    position:absolute;
    display:none;
    width:12em;
    top:25px;
    }
    
    #menudropdown li ul a{
    width:12em;
    height:auto;
    float:left;
    }
    
    #menudropdown ul ul{
    top:auto;
    } 
    
    #menudropdown li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }
    
    #menudropdown li:hover ul ul, #menudropdown li:hover ul ul ul, #menudropdown li:hover ul ul ul ul{
    display:none;
    }
    #menudropdown li:hover ul, #menudropdown li li:hover ul, #menudropdown li li li:hover ul, #menudropdown li li li li:hover ul{
    display:block;
    }
    
    
Akan saya terangkan masing-masing CSS diatas. Silahkan mengedit bila anda sudah memahami syntax-syntax dibawah ini :
Keterangan I
#menudropdown, #menudropdown ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:1.5em;
}

Kode CSS diatas akan menghilangkan identasi pada browser dan membuang semua tanda bullet pada #nav dan semua elemen yang ada didalamnya. Kode "position:relative;" digunakan untuk menyusun ulang posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini nantinya digunakan untuk menata menu-menu berikutnya yang akan disusun sesuai dengan isi blok serta atribut-atribut lainnya. Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita inginkan, tetapi link teks akan berada pada posisi center secara vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan padding pada kode CSS in

Keterangan II
/* keadaan menu normal, aktif dan pernah diakses */
#menudropdown a:link, #menudropdown a:active, #menudropdown a:visited {
   display:block; /* link menu di blok */
   padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */
   border:1px solid #333; /* ketebalan garis pinggir dan warna garis */
   color:#fff; /* warna teks */
   text-decoration:none; /* menghilangkan garis bawah pada link menu */
   background-color:#333; /* warna latar belakang menu */
}
/*  keadaan menu saat dipilih */
#menudropdown a:hover {
   background-color:#fff; /* warna latar belakang menu */
   color:#333; /* warna huruf */
}
Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses maka menu memiliki tampilan yang sama.

Keterangan III
#menudropdown li {
   float:left; /* menu ditempatkan pada sebelah kiri */
   position:relative; /* posisi relatif */
}
Kode Diatas digunakan untuk menjadikan menu horizontal.

Keterangan IV
#menudropdown ul {
   position:absolute; /* posisi absolute */
   width:12em; /* lebar menu */
   top:1.5em; /* jarak menu bagian atas */
   display:none; /* menu disembunyikan */
}
Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu utama tetap tampil). Lebar masing-masing menu ditetapkan 12em (width:12em;) hal ini agar menu memiliki ukuran tetap, jika kurang anda bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;" pada #menudropdown (lihat keterangan 2)

Keterangan V
#menudropdown li ul a {
   width:12em;
   float:left;
}
Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.

Keterangan VI
#menudropdown ul ul{
 top:auto;
} 
#menudropdown li ul ul {
   left:12em;
   margin:0px 0 0 10px;
}
#menudropdownli:hover ul ul, #menudropdown li:hover ul ul ul, #menudropdown li:hover ul ul ul ul{
   display:none;
}
#menudropdown li:hover ul, #menudropdown li li:hover ul, #menudropdown li li li:hover ul, #menudropdown li li li li:hover ul{
   display:block;
}
#menudropdown ul ul dan #menudropdown li ul ul digunakan untuk memperbaiki penempatan menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih (hover) dan susunan tingkatnya.

Silahkan Download Sourcode Disini

Komentar

Postingan Populer