Membuat Menu Bertingkat dengan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
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 !
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.