Cara Membuat Menu Drop Down dengan CSS

Unknown

CSS, Menu Drop Down

Kamis, 10 Juli 2014

2 Komentar

Dropdown menu dengan CSS

ERIKPLUS ~ Bagaimana kabar kalian semua ? pasti baik lah :) dalam kesempatan ini / dalam postingan ini saya akan memberikan sebuah tutorial atau Cara Membuat Menu Drop Down dengan CSS . Sesuai dengan judulnya jadi disini kita hanya menerapkan code CSS dan tidak menggunakan javascript.
Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik:

Berikut penjelasan dari code css:

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Code ini adalah styling untuk submenu. Artikel mempunyai submenu WordPress, Photoshop dan Web Design. Nah style ini dimaksudkan untuk submenu. 

Bagaimana ? Mudah kan ? pasti mudah dalam tutorial ini , oke sekian dulu dalam tutorial ini , Wassalamualaikum Wr. Wb. . Semoga Bermanfaat ^_^