Menu dropdown adalah salah satu fitur yang paling populer pada website. sejak jaman dulu menu dropdown sudah digunakan hampir di setiap template website. karena fungsi nya yang sangat berguna pada sebuah halaman website.
Diantaranya adalah sebagai petunjuk atau arahan halaman pada sebuah website. contohnya pada menu terdapat beberapa link atau hyperlink yaitu misalnya home, tentang, kontak kami, tutorial dan lain-lain.
Tidak hanya itu, menu juga dapat di buat memiliki anak atau memiliki sub menu. misalnya kita memiliki sebuah induk menu yang bernama “Tutorial”. nah kemudian di dalam menu tutorial tersebut kita bisa membuat anak-anak menunya seperti HTML, CSS. PHP dan lain-lain.
Pasti teman-teman penasaran Cara Membuat Menu Dropdown Dengan CSS. pada tutorial ini akan kita bahas tuntas tentang Cara Membuat Menu Dropdown Sederhana Dengan CSS. Langsung saja di simak.
Membuat Menu Dropdown Sederhana Dengan CSS
Untuk membuat menu dropdown dengan html dan css, langsung saja sediakan sebuah file html atau php terserah pada teman-teman.
Di sini saya hanya membuatnya pada file html. saya membuat sebuah file dengan nama menu.php.
<html>
<head>
<title>Menu Dropdown - It - Programmer.tk</title>
</head>
<body>
<style type="text/css">
html,body{
padding: 0;
margin:0;
font-family: sans-serif;
}
.menu-dah{
background-color: #3141ff;
}
.menu-dah ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu-dah > ul > li {
float: left;
}
.menu-dah li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu-dah li a:hover{
background-color: #2525ff;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .isi-dropdown {
display: block;
}
.isi-dropdown a:hover {
color: #fff !important;
}
.isi-dropdown {
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
}
.isi-dropdown a {
color: #3c3c3c !important;
}
.isi-dropdown a:hover {
color: #232323 !important;
background: #f3f3f3 !important;
}
</style>
<header class="header">
<div class="menu-dah">
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 1</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 2</a></li>
<li class="dropdown"><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 3</a>
<ul class="isi-dropdown">
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 1</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 2</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 3</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 4</a></li>
</ul>
</div>
</header>
<center>
<h1>
Menu Dropdown - It - Programmer.tk
itprogrammer.tk</h1>
</center>
</body>
</html>
Perhatikan!!.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class="dropdown"><a href="#">Menu 3</a>
<ul class="isi-dropdown">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
</ul>
Selanjutnya kita masukkan CSSnya dan atur sesuai selera :V.
<style type="text/css">
html,body{
padding: 0;
margin:0;
font-family: sans-serif;
}
.menu-dah{
background-color: #3141ff;
}
.menu-dah ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu-dah > ul > li {
float: left;
}
.menu-dah li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu-dah li a:hover{
background-color: #2525ff;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .isi-dropdown {
display: block;
}
.isi-dropdown a:hover {
color: #fff !important;
}
.isi-dropdown {
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
}
.isi-dropdown a {
color: #3c3c3c !important;
}
.isi-dropdown a:hover {
color: #232323 !important;
background: #f3f3f3 !important;
}
</style>
Coba kita jalankan pada browser dan lihat hasil dari menu dropdown sederhana yang telah kita buat ini..
Tidak ada komentar:
Posting Komentar