Membuat Menu Dropdown dengan List dan CSS
Navigasi menu pada sebuah website merupakan elemen yang wajib ada pada sebuah laman web, karena dapat mempermudah pengunjung untuk mengakses bagian - bagian dari laman tersebut. Nah kali ini saya akan membagikan tutorial cara membuat navigasi sticky plus dropdown dengan list dan CSS, tanpa javascript. Silahkan ikuti langkah berikut :
Markup HTML
Buatlah sebuah dasar markup HTML terlebih dahulu, seperti ini :
<!DOCTYPE HTML>
<html>
<head>
<title>Sampel Dropdown</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- tempatkan tag navigasi disini -->
</body>
</html>
Lalu mulailah membuat list kerangka dasar menu
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Submenu 1</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3 Sub menu</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Submenu 2</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Submenu 3</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</li>
<li><a href="#">Tentang</a></li>
</ul>
</nav>
<div style="clear:both;"></div>
Maka akan menjadi seperti ini :
Bagaimana Cara Membuat Dropdown ?
Perhatikan pada list tag <li>, sebelum penutup tag dibuat list ul li lagi. Sepertinya saya sulit untuk menjelaskan dan mungkin juga Anda tidak mengerti, perhatikan markup berikut.
<li><a href="#">Submenu 1</a>
<!-- sebelum penutup tag li, buat list ul li lagi -->
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</li> <!-- penutup tag li Submenu 1 -->
Sederhananya :
<nav> <ul> <li><a href="#">Submenu 1</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> </li> </ul> </nav>
Pada tahap markup dasar sudah selesai, sekarang mulailah menambahkan CSS.
Style CSS
Sebelum menambah style pada menu, reset margin dan padding bawaan pada browser.
<style type="text/css">
* {
margin:0;
padding:0;
}
</style>
Mengapa Perlu CSS Reset ?
Secara default, browser akan memberikan margin dan padding pada semua elemen. Ini mungkin membantu karena Anda tidak perlu menambah extra CSS, tapi setiap browser mungkin mempunyai pengaturan margin dan padding yang berbeda, sehingga bisa jadi layout menjadi bernatakan. Perhatikan gambar dibawah, ini akibat jika navigasi tidak diberi CSS reset.
Sekarang tambahkan CSS pada menu.
<style type="text/css">
nav {
width:100%;
height:53px;
position:fixed;
-moz-transition:background 0.4s ease-out;
-webkit-transition:background 0.4s ease-out;
transition:background 0.4s ease-out;
z-index:999;
top:0;
left:0;
background:#259780;
box-shadow:inset 0px -4px 0px #2f8178;
}
nav a {
text-decoration:none!important;
}
nav ul {
font-family:Arial;
text-transform:uppercase;
font-size:17px;
background:transparent;
list-style:none;
position:relative;
display:inline-table;
}
nav ul:after {
content:"";
clear:both;
display:block;
}
nav ul a {
color:#fff!important;
text-decoration:none!important;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
animation:radith 0.3s ease-out;
-moz-animation:radith 0.3s ease-out;
-webkit-animation:radith 0.3s ease-out;
border:1px solid rgba(47,129,120,0.5);
}
nav ul li a.dropdown-parent:after {
content:"";
vertical-align:middle;
margin-top:5px;
margin-left:8px;
display:inline-block;
width:0px;
height:0px;
border-right:4px solid transparent;
border-left:4px solid transparent;
border-top:4px solid #fff;
border-bottom:4px solid transparent;
}
nav ul li {
float:left;
-moz-transition:background-color 0.3s ease-out;
-webkit-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out;
}
.home-nav {
background:transparent url(home-logo.png) no-repeat center center;
color:transparent!important;
}
.home-nav:hover {
background-color:#ec595c;
-moz-transition:background-color 0.3s ease-out, box-shadow 0.3s ease-out;
-webkit-transition:background-color 0.3s ease-out, box-shadow 0.3s ease-out;
transition:background-color 0.3s ease-out, box-shadow 0.3s ease-out;
box-shadow:inset 0px -4px 0px #c0392b;
}
nav ul li:hover a {
color:#fff;
}
nav ul li a {
display:block;
padding:14px 18px 15px;
color:#757575;
text-decoration:none;
}
nav ul ul {
position:absolute;
top:100%;
background:#259780;
min-width:230px;
}
nav ul ul li {
float:none;
position:relative;
font-family:Arial;
font-size:16px;
border-bottom:1px solid rgba(255,255,255,0.08);
border-left:3px solid #2f8178;
text-transform:none;
-moz-transition:background-color 0.1s linear;
-webkit-transition:background-color 0.1s linear;
transition:background-color 0.1s linear;
}
nav ul ul li:last-child {
border-bottom:none;
}
nav ul li:hover {
background:#2f8178;
}
nav ul ul li a {
padding:15px 40px 15px 30px;
color:#fff;
-moz-transition:padding 0.3s ease-out;
-webkit-transition:padding 0.3s ease-out;
transition:padding 0.3s ease-out;
}
nav ul ul li:hover a {
padding:15px 35px 15px 35px;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
a.sub-dropdown:after {
float:right;
content:"";
vertical-align:middle;
margin-top:7px;
margin-right:-25px;
display:inline-block;
width:0px;
height:0px;
border-right:5px solid transparent;
border-left:5px solid #fff;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
}
@keyframes radith {
0% {margin-top:-20px;opacity:0.9;}
100% {margin-top:0;opacity:1;}
}
@-moz-keyframes radith {
0% {margin-top:-20px;opacity:0.9;}
100% {margin-top:0;opacity:1;}
}
@-webkit-keyframes radith {
0% {margin-top:-20px;opacity:0.9;}
100% {margin-top:0;opacity:1;}
}
</style>
Penjelasan
Gabungkan Markup dengan CSS
Langkah selanjutnya adalah menggabungkan markup HTML dan style CSS diatas, lalu simpan sebagai file HTML.
<!DOCTYPE HTML>ginan. Cari kode CSS ini :nav ul { font-family:Arial; text-transform:uppercase; font-size:17px; ... }Dan juga :
nav ul ul li { float:none; position:relative; font-family:Arial; font-size:16px; ... }Ganti nilai property
font-familydengan font pilihan Anda.Warna
Pada CSS navigasi saya berikan warna default hijau. Jika Anda ingin mengganti warna tersebut silahkan temukan kode warna ini :
- #259780 (Warna latar navigasi dan dropdown)
- #2f8178 (Warna menu saat di hover dan border navigasi)
- #fff (Warna teks menu)
Logo
Untuk menambah logo, silahkan tambahkan class home-nav pada menu utama navigasi.
<nav>
<ul>
<li><a href="index.html" class="home-nav">Beranda</a></li>
...
Dan temukan kode CSS ini :
.home-nav {
background:transparent url(home-logo.png) no-repeat center center;
color:transparent!important;
}
Penambahan Panah (arrow)
Perhatikan pada navigasi diatas, menu yang berisi dropdown berisi panah ke bawah. Untuk menambah panah tersebut tinggal tambahkan class dropdown-parent pada menu utama.
<nav>
<ul>
...
<li><a href="#" class="dropdown-parent">Submenu 1</a>
<ul>
<li><a href="#">Menu 1</a></li>
Menambah Panah pada Submenu
Untuk Menu 3 Sub menu seperti gambar diatas bisa ditambah panah kesamping. Untuk menambah panah tersebut tinggal tambahkan class sub-dropdown pada list submenu
<nav> <ul> <li><a href="#">Submenu 1</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#" class="sub-dropdown">Menu 3 Sub menu</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> </ul> </li> </ul> </li> </ul> </nav>
Sekian...untuk selebihnya silahkan Anda kustomisasi dan edit sesuka hati. Jika ada kesulitan silahkan PM saya melalui menu Kontak » Facebook » Author. Semoga bermanfaat... :)