Membuat Menu Bertingkat dengan CSS

Melanjutkan Postingan Sebelumnya tentang Membuat menu dengan CSS. Kali ini saya ingin berbagi trik cara membuat menu bertingkat dengan CSS yang oleh orang pintar menyebutnya Menu Dropdown. Sebelum lebih jauh membahas tentang menu Drop Down ini, saya merekomendasikan agar anda membaca dua postingan saya sebelumnya (Jika anda belum membacanya).

1. Mengatur Halaman Website dengan CSS
2. Membuat Menu dengan CSS

Membuat menu Dropdown gampang-gampang susah tapi jika anda sudah membaca dua postingan sebelumnya saya yakin prosesnya akan jauh lebih mudah karena postingan ini adalah sambungannya.
Langkah awal untuk membuat menu bertingkat adalah dengan menambahkan code berikut pada listing code CSS yang sudah kita buat sebelumnya
/*Membuat Sub Menu*/

.menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}

.menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;

}

.menu li ul.sub-menu li a {
 text-decoration:none;
 color:#fff;
 background:#666;
 padding:7px;
 width:120px;
 display:block
}

.menu li ul.sub-menu li a:hover {
 background:#333;
  color:#000;
}

.menu li ul.sub-menu {
 position: absolute;
 top:30px; 
 display:none;
}

.menu li:hover ul.sub-menu {
 display:block;
}

/*Membuat Sub Sub Menu*/

.sub-menu ul.sub-sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}

.sub-menu ul.sub-sub-menu li {
 list-style-type:none;
 display:inline-block;

}

.sub-menu li ul.sub-sub-menu li a {
 text-decoration:none;
 color:#fff;
 background:#666;
 padding:7px;
 width:125px;
 display:block;
}

.sub-menu li ul.sub-sub-menu li a:hover {
 background:#333;
 color:#000;
}

.sub-menu li ul.sub-sub-menu {
 position: absolute;
 left:100%; 
 top:0px;
 display:none
}

.sub-menu li:hover ul.sub-sub-menu {
 display:block
}


Simpan Code CSS anda kemudian lanjutkan dengan membuka Code index.html yang sudah kita buat sebelumnya. silahkan ganti potongan code <li><a href="#">Menu Tiga</a></li> dengan code berikut 
<li><a href="#">Menu Tiga</a>
        <!-- Ini Code Sub Menu -->
        <ul class="sub-menu">
        <li><a href="#">Satu</a></li>
        <li><a href="#">Dua</a></li>
        <li><a href="#">Tiga</a>
            <!-- Ini Code Sub Sub Menu -->
            <ul class="sub-sub-menu">
            <li><a href="#">Satu</a></li>
            <li><a href="#">Dua</a></li>
            </ul>
        </li>
        </ul>
    </li>

Hasil yang saya peroleh adalah sebagai berikut

Membuat Menu Bertingkat dengan CSS 

Nantikan Postingan tentang Membuat Slide Show dengan CSS dan Javascript. Lihat disini !
Happy Coding !

Post a Comment

0 Comments