Menu Dropdown
Menu dropdown adalah salah satu menu yang sangat populer dan juga tampilan yang dinamis dan efisien , menu ini sudah banyak yang menggunakan hampir semua tiap-tiap template web dan blog memiliki menu ini .
Nah pada postingan ini saya akan mencoba membahas bagaimana cara membuat menu Dropdown sederhana .dari pada basa basi mending langsung saja kita simak tutorialnya saja .
Cara Membuat Menu DropDown
Pertama yang perlu kita lakukan adalah membuat sebuah file dengan nama dropdown.html
<html>
<head>
<title>Menu Dropdown Sederhana</title>
<style>
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Twitter</a></li>
<li class="dropdown"><a href="#">DROPDOWN</a>
<ul class="eagle-dropdown">
<li><a href="#">SubMenu 3</a></li>
<li><a href="#">SubMenu 4</a></li>
<li><a href="#">SubMenu 5</a></li>
<li><a href="#">SubMenu 6</a></li>
</ul>
</li>
<li><a href="#">YOUTUBE</a></li>
</ul>
</body>
</html>
Selanjutnya kita tinggal membuat style CSS nya agar tampilannya lebih dinamis .
.menu-drop{
background-color: #a11f1f;
}
.menu-drop ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu-drop > ul > li {
float: left;
}
.menu-drop li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu-drop li a:hover{
background-color: #2b2b2b;
}
li.droddown {
display: inline-block;
}
.dropdown:hover .eagle-dropdown {
display: block;
}
.eagle-dropdown a:hover {
color: #fff !important;
}
.eagle-dropdown {
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #a11f1f;
}
.eagle-dropdown a {
color: #fff !important;
}
.eagle-dropdown a:hover {
color: #fff !important;
background: #2b2b2b !important;
}
Contoh :
<style>
Kodenya
</style>
Kemudian kita berikan element ini diatas <ul>.
<header class="header">
<div class="menu-drop">Karena element inilah yang membuat menu dropdown semakin menarik atau enak dipandang.
Dan letakkan element penutup yang diatas tadi.
</div>
</header>Letakkan element ini diatas element </body>.
Jika sudah selesai sekarang tinggal save filenya dan jalankan di browser kalian masing-masing, Maka tampilannya akan seperti gambar dibawah.
<html>
<head>
<title>Menu Dropdown sederhana</title>
<style>
.menu-drop{
background-color: #a11f1f;
}
.menu-drop ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu-drop > ul > li {
float: left;
}
.menu-drop li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu-drop li a:hover{
background-color: #2b2b2b;
}
li.droddown {
display: inline-block;
}
.dropdown:hover .eagle-dropdown {
display: block;
}
.eagle-dropdown a:hover {
color: #fff !important;
}
.eagle-dropdown {
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #a11f1f;
}
.eagle-dropdown a {
color: #fff !important;
}
.eagle-dropdown a:hover {
color: #fff !important;
background: #2b2b2b !important;
}
</style>
</head>
<body>
<header class="header">
<div class="menu-drop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Twitter</a></li>
<li class="dropdown"><a href="#">DROPDOWN</a>
<ul class="eagle-dropdown">
<li><a href="#">SubMenu 3</a></li>
<li><a href="#">SubMenu 4</a></li>
<li><a href="#">SubMenu 5</a></li>
<li><a href="#">SubMenu 6</a></li>
</ul>
</li>
<li><a href="#">YOUTUBE</a></li>
</ul>
</div>
</header>
</body>
</html>Bila ada kesalahan pengetikan saya mohon maaf ,sampai jumpa di postingan selanjutnya.
Comments
Post a Comment