| Sapi Bosok

Membuat Menu Dropdown Sederhana

Kali ini kita akan mencoba membuat menu dropdown sederhana dengan menggunakan CSS. Menu dropdown ini berfungsi ketika kita membutuhkan sebuah sub menu untuk menu utama. Kira-kira seperti ini menu dropdown yang akan dibuat.

Pertama kita membutuhkan sebuah file CSS dengan nama style.css. Isi file-nya sebagai berikut:

ul{

margin: 0;

padding: 0;

list-style: none;

}

ul li{

position: relative;

float: left;

width: 120px;

}

li ul{

position: absolute;

top: 30px;

display: none;

}

ul li a{

display: block;

text-decoration: none;

line-height: 20px;

color: #FFFFFF;

padding: 5px;

background: #000000;

margin: 0;

text-align: center;

font-family: Arial, Helvetica, sans-serif;

}

ul li a:hover{

background: #b5001f;

}

li:hover ul, li.hover ul{

display: block; 

}

Dapat dilihat pada kode diatas, ada beberapa format CSS yang mengatur tampilan tag <ul> dan <li>, dimana tag-tag tersebut berfungsi untuk mengatur tampilan list menu.

Setelah itu buat sebuah buat sebuah file html dengan nama menu-dropdown.html untuk menampilan style menu pada file CSS yang tadi dibuat. Isi file-nya sebagai berikut:

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<ul>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a>

<ul>

<li><a href="#">Submenu 2A</a></li>

<li><a href="#">Submenu 2B</a></li>

</ul>

</li>

<li><a href="#">Menu 3</a>

<ul>

<li><a href="#">Submenu 3A</a></li>

<li><a href="#">Submenu 3B</a></li>

<li><a href="#">Submenu 3C</a></li>

</ul>

</li>

<li><a href="#">Menu 4</a>

<ul>

<li><a href="#">Submenu 4A</a></li>

<li><a href="#">Submenu 4B</a></li>

<li><a href="#">Submenu 4C</a></li>

<li><a href="#">Submenu 4D</a></li>

</ul>

</li>

</ul>

</body>

</html>

Membuat Menu Dropdown Sederhana

0 Response to " "

Posting Komentar