Cara Membuat Menu Dropdown
Membuat Menu Dropdown:
Suatu menu dropdown biasanya disediakan ketika website terdiri dari banyak menu halaman. Keuntungan dari penggunaan menu dropdown ini adalah desain halaman menjadi lebih menarik serta meningkatkan kemudahan pengguna untuk menjelajahi web site.
Mulai membuat :
<html>
<head><title>Belajar WEB</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">Artikel 1</a></li>
<li><a href="#">Artikel 2</a></li>
<li><a href="#">Artikel 3</a></li>
<li><a href="#">Artikel 4</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Phone</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Coding Di Atas Simpan Dalam Format .html
Selanjutnya Coding Dibawah ini Simpan Dalam format .css
#menu ul {
list-style: none;/*menghilangkan list style*/
}
#menu li{
float:left;
}
#menu ul ul{
visibility:hidden;/*menyembunyikan element*/
width:150px;
}
#menu ul li:hover ul, #menu ul a:hover ul{
visibility:visible;
}
Kode ccs diatas berfungsi agar bagian list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.
HASIL:
Selanjutnya kita akan mengatur style pada menu, berikut adalah kode untuk mengatur style pada menu:
#menu ul {
list-style: none;/*menghilangkan list style*/
}
#menu li{
float:left;
}
#menu ul ul{
visibility:hidden;/*menyembunyikan element*/
width:150px;
}
#menu ul li:hover ul, #menu ul a:hover ul{
visibility:visible;
}
#menu li a {
height: 30px;
width: 150px;
display: block;
color: black;
border:1px solid #000000;
background-color:#dfdfdf;
text-decoration: none;
text-align: center;
padding-top:5px;
}
Setelah Mengatur style dengan Coding di atas Maka Hasil Nya Akan Jadi Seperti Ini:
Selamat Mencoba
Comments
Post a Comment