Menu Dropdown adalah sebuah navigasi menu yang sangat berguna karena terbukti digunakan hampir semua blog dan website. Kegunaan utama Navigasi ini supaya pengguna dapat dengan mudah menemukan artikel atau konten sesuai dengan judul topik yang sedang dicari.
Dalam pembuatannya menu Dropdown bisa menggunakan CSS atau Javascript. Kali ini saya akan memberikan cara membuat dropdown menu sederhana menggunakan CSS untuk belajar kalian.
Jika kalian tahu sebenarnya menu dropdown dapat dengan mudah dibuat tanpa repot-repot membuat CSS, yaitu dengan framework Bootsrap. Namun, saya rasa penggunaan Bootstrap untuk pemula tidaklah perlu karena untuk menambah ilmu sebaiknya hindari hal-hal yang praktis tanpa tahu cara sebenarnya.
Dalam pembuatannya menu Dropdown bisa menggunakan CSS atau Javascript. Kali ini saya akan memberikan cara membuat dropdown menu sederhana menggunakan CSS untuk belajar kalian.
Jika kalian tahu sebenarnya menu dropdown dapat dengan mudah dibuat tanpa repot-repot membuat CSS, yaitu dengan framework Bootsrap. Namun, saya rasa penggunaan Bootstrap untuk pemula tidaklah perlu karena untuk menambah ilmu sebaiknya hindari hal-hal yang praktis tanpa tahu cara sebenarnya.
Cara Membuat Menu Dropdown Sederhana tanpa Framework
- Siapkan Text Editor(Notepad/Notepad++/Sublime/VS Code/dll).
- Buat 2 File index.html dan style.css dalam 1 folder.
- Copy Kode yang ada dibawah ke file masing-masing.
- Save lalu jalankan index.html.
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body><h1>Motubablog Simple Dropdown</h1>
<nav class="nav">
<ul class="nav-menu">
<li class="nav-menu-item"><a>Home</a></li>
<li class="nav-menu-item"><a>Content</a>
<ul class="nav-submenu">
<li class="nav-submenu-item"><a>Android</a></li>
<li class="nav-submenu-item"><a>Bahasa C</a></li>
<li class="nav-submenu-item"><a>Blog</a></li>
<li class="nav-submenu-item"><a>Windows</a></li>
<li class="nav-submenu-item"><a>Aplikasi</a></li>
</ul>
</li>
<li class="nav-menu-item"><a>About</a>
<ul class="nav-submenu">
<li class="nav-submenu-item"><a>Blog Ini</a></li>
<li class="nav-submenu-item"><a>Awal Mula</a></li>
</ul>
</li>
<li class="nav-menu-item"><a>Contact</a></li>
</ul>
</nav>
</body>
</html>
style.css
body {
margin: 1;
font-size: 16px;
line-height: 1.5;
background: #b300b3;
font-family: 'Segoe UI', 'Courier New';
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
}
nav ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
h1 {
width: 500px;
margin: 100px auto 20px;
text-align: center;
text-shadow: 3px 3px black;
color: whitesmoke;
}
.nav {
width: 392;
background: #660066;
color: whitesmoke;
margin: 0 auto;
}
.nav a {
display: block;
padding: 0 16px;
cursor: pointer;
text-decoration: none;
line-height: inherit;
color: whitesmoke;
}
.nav-menu {
line-height: 45px;
text-transform: uppercase;
font-weight: 700;
}
.nav-menu-item {
display: inline-block;
position: relative;
}
.nav-menu-item:hover {
background-color: #800080;
}
.nav-menu-item:hover .nav-submenu {
display: block;
}
.nav-submenu {
font-weight: 300;
text-transform: none;
width: 220px;
background-color: #800080;
text-decoration: none;
display: none;
position: absolute;
}
.nav-submenu-item:hover {
background: rgba(0, 0, 0, 0.1);
}
Hasil
Bagaimana sobat mudah bukan? setelah berjalan dengan baik seperti diatas waktunya kalian mengedit-edit kode CSS nya sehingga bisa jadi lebih bagus dari yang saya buat diatas, oke!.
Sekian Artikel membuat Menu Drop down Css dengan mudah dan sederhana ini, semoga berguna dan menambah ilmu sobat-sobat sekalian. Terimaksih.