Dropdown Menu dengan CSS
Dropdown menu
berfungsi saat kita membutuhkan sub menu untuk menu utama. Pada posting
kali ini saya akan mencoba membuat menu dropdown sederhana dengan
menggunakan css (Cascading Style Sheet). Disini saya akan membuat dua buah file yaitu style.css yang berfungsi untuk mengatur tampilan dari code html dan yang kedua adalah dropdown.html yang akan tampil di dalam browser internet. Kedua file ini harus diletakkan dalam folder yang sama.
Baiklah, berikut ini adalah file style.css nya :
Buka notepad anda, tulis atau copy paste code di bawah, lalu save as style.css.
/* CSS Document */
#menu { position: relative;
width: 100%;
height: 40px;
background: #6699cc;
border: 1px solid #000000;
}
#menu ul{ margin: 0;
padding: 0;
list-style: none;
}
#menu ul li{ position: relative;
float: left;
}
#menu ul li a{ display: block;
text-decoration: none;
color: #ffffff;
padding: 10px;
float: left;
border-right: 1px solid #000000;
}
#menu ul li a:hover{ background-color: #000000; }
#menu ul li ul { display: none;}
#menu ul li:hover ul { display: block;
position: absolute;
top: 41px;
left: 0px;
}
#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;
}
Lalu file dropdown.html nya adalah :
Buka notepad kembali, tulis atau copy paste code di bawah, lalu save as dropdown.html.
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dropdown menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a>
<ul>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="http://www.bum1.info">bumi.info</a></li>
<li><a href="http://www.prodesign.web.id">Prodesign</a></li>
</ul>
</li>
<li><a href="">Post Feed</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via Rss</a></li>
</ul>
</li>
</ul>
</body>
</html>
Simpan kedua file dalam folder yang sama. Setelah selesai coba ditest dengan membuka file dropdown.html dengan browser kesayangan anda. Bila berhasil maka akan terlihat seperti gambar di bawah ini :
^_^ senangnya bisa berbagi..
Post a Comment
FOLLOW ME WILL BE FOLLOW YOU
JANGAN BUANG SPAM SEMBARANGAN LHO ^_^