Teknotes.id – Menu adalah menu yang mempunyai anak, yang berisikan menu-menu lain yang saling berhubungan dengan menu utama yang ditampilkan menurun ke bawah.
Jika menu utama didekati atau diklik maka menu yang berada di dalam menu utama akan muncul. Menu dropdown sangat berfungsi untuk mengurangi banyaknya menu atau meminimalisir space yang ditampilkan dimain menu.
Situs-situs besar biasanya menggunakan menu ini, karena menu ini sangat populer pada website. Berikut ini adalah artikel tentang Tutorial Membuat Menu Dropdown Dengan Tampilan CSS
Daftar Isi
1. Index.html
Copy paste script dibawah ini lalu simpan dengan nama index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Membuat Menu Dropdown - EKNotes | Teknotes.id</title>
<!---================Assets=====================-->
<link href="style.css" rel="stylesheet" >
<!---================End Assets=====================-->
</head>
<body>
<nav id="menu">
<ul>
<div id="heading"><br>
<a href="index.html"><img src="logo.png" width="170" height="60" ><i></i></a></li>
</div>
<li><a href="#"> Menu 1</a></li>
<li class="dropdown"><a href="#">Menu 2</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 3</a></li>
<li><a href="#"> Menu 4</a></li>
<li class="dropdown"><a href="#"<Menu 5</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>
</ul>
</nav>
</body>
</html>
2. Style CSS
Copy paste script di bawah ini kemudian simpan dengan nama style.css
*{
margin: 0px;
padding: 0px;
}
body {
font-size: 14px;
font-family: verdana;
}
#heading{
float: left;
width: 640px;
}
#heading a {
line-height: 65px;
text-decoration: none;
padding-left: 60px;
color:#0000FF;
font-family: aardvark cafe;
font-size: 40px;
}
#menu {
background:#C0C0C0;
width: 100%;
height: 65px;
margin: 0px;
padding: 0px;
}
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
line-height: 65px
}
#menu ul li a {
float:left;
width:100px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}
#menu ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#26C4C2;
float: none;
top:65px;
width:190px;
}
#menu ul li a:hover {
background-color:#2E9EA2;
display:block;
}
#menu ul li:hover ul {
display:block;
}
#menu ul ul li a {
display:block;
padding-left:30px;
text-align:left;
width:160px;
height: 60px;
line-height: 60px;
}
#menu ul ul li a:hover {
color:#fff;
}
3. Tampilan
Kesimpulan
Untuk gambar kamu bisa menggunakan gambar kamu sendiri. Demikian artikel tentang Tutorial Membuat Menu Dropdown Dengan Tampilan CSS. Jika ada saran silahkan komentar. Semoga Bermanfaat
