Membuat Drop Down Menu (Sub Menu)


dropdown

dropdown

Dalam beberapa kasus akan dijumpai menu yang masih mempunyai menu-menu lagi (sub menu), maka ketika menu tersebut disorot akan tampil menu-menu lagi dibawahnya atau sering dikenal dengan drop down menu.
Pada tulisan saya kali ini, kita akan coba membuat sub menu pada web yang akan dirancang. Silahkan ketikkan skrip dibawah dengan nama dropdown.html

<html>
<head>
<title>Latihan</title>
</head>

<body>
<div id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Profil</a>
<ul>
<li><a href=”#”>Tentang Kami</a></li>
<li><a href=”#”>Sejarah</a></li>
<li><a href=”#”>Visi dan Misi</a></li>
<li><a href=”#”>Struktur Organisasi</a></li>
</ul>
</li>
<li><a href=”#”>Agenda</a></li>
<li><a href=”#”>Berita</a></li>
<li><a href=”#”>Download</a></li>
<li><a href=”#”>Hubungi Kami </a></li>
</ul>
</div>
</body>
</html>

Kalau skrip dropdown.html dijalankan di browser, maka akan terlihat seperti gambar dibawah.
2

Pada menu profil belum dapat muncul sub menunya. Untuk membuat sub menu dibawahnya ketika disorot, coba ketikkan skrip dibawah ini dengan nama styledropdown.css

/* Menu Horizontal */
#menu{
position : relative;
width : 100%;
height : 40px;
background : #6699CC;
border : 1px solid #000000;
}
#menu ul{
padding : 0;
margin : 0;
list-style : none;
}
#menu ul li{
float : left;
position : relative;
}
#menu ul li a{
float : left;
color : #FFFFFF;
padding : 10px;
border-right : 1px solid #000000;
text-decoration : none;
display : block;
}

/* Menu Dropdown */
#menu ul li ul{
display : none;
}
#menu ul li:hover ul{
display : block;
position : absolute;
top : 41px;
left : 0;
}
#menu ul li:hover ul li a{
display : block;
background : #6699CC;
color : #ffffff;
width : 130px;
border-left : 1px solid #000000;
}
#menu ul li:hover ul li a:hover{
background : #000000;
color : #FFFFFF;
}

Kemudian terapkan file styledropdown.css dengan menambahkan skrip pada file dropdown.html diantara bagian <head>…</head>

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

Coba jalankan lagi skrip dropdown.html, kemudian arahkan kursor mouse di atas menu Profil, maka akan tampil sub menu dibawahnya seperti gambar di bawah
down
semoga bermanfaat πŸ˜€

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s