Tutorial Cara Membuat Menu Dropdown Dengan CSS
Navigasi menu merupakan salah satu elemen penting didalam sebuah website, bagian menu ini yang menjadi pemandu pengunjung untuk menjelajahi website kita.
Apabila menu tidak didesain dan ditempatkan dengan baik maka pengunjung bingung dalam menjelajahi website yang sudah susah payah kita buat. Maka dari itu navigasi memiliki peran penting didalam sebuah website, karenanya kita akan coba membuat dropdown menu yang sederhana simpel dan mudah ditemukan oleh pengunjung dengan desain yang minimalis.
Kali ini kita akan membuat menu dropdown dengan CSS, adapun langkah-langkahnya sebagai berikut :
1. Buat struktur HTML.
Langkah awal adalah dengan membuat struktur HTML dengan kode sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Profile</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a>
<ul>
<li><a href="">Subsubmenu1</a></li>
<li><a href="">Subsubmenu2</a></li>
<li><a href="">Subsubmenu3</a>
</ul>
</li>
</ul>
</li>
<li><a href="">About</a></li>
<li><a href="">Menu</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a>
<ul>
<li><a href="">Subsubmenu1</a></li>
<li><a href="">Subsubmenu2</a></li>
<li><a href="">Subsubmenu3</a>
<ul>
<li><a href="">subsubsubmenu1</a></li>
<li><a href="">subsubsubmenu2</a></li>
<li><a href="">subsubsubmenu3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Simpan dengan nama file index.html, nah dari struktur HTML diatas terdapat tag ul dan li dari sitaks itulah menu akan dibuat dan membentuk submenu.
2. Sytle CSS.
Selanjutnya buat file dengan nama style.css untuk membentuk desain tampilan menu agar menarik maka kita masukan kode CSS sebagai berikut :
.nav {
width: auto;
height: 60px;
float: left;
height: 60px;
margin: auto;
}
.nav ul {
list-style: none;
display: inline-table;
position: relative;
padding: 0 20px;
background: #8A2BE2;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul:after {
content: "";
clear: both;
display: block;
}
.nav ul li {
float: left;
}
.nav ul li a{
padding: 20px;
text-decoration: none;
color: #ececec;
display: block;
cursor: pointer;
}
.nav ul ul {
background: #8A2BE2;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
display: none;
}
.nav ul ul li {
float: none;
border-top: 1px solid #def4ff;
border-bottom: 1px solid #def4ff;
position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
}
.nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
Dari struktur CSS diatas akan menghasilkan dropdown menu sebagai berikut, anda dapat melihat langsung demo dibawah ini.
