Cara Membuat Multi Dropdown Menu dengan HTML + CSS

Saat seorang pengunjung mengunjungi halaman utama website anda tentunya ia akan dibimbing melalui menu atau navigasi yang ada dalam website anda. Menu merupakan suatu hal yang wajib ada dalam suatu website, bagaimanapun bentuknya.

Menu website dapat membuat pengunjungnya menulusuri isi website tersebut. Dalam tutorial ini saya akan menjelaskan cara membuat multi level dropdown menu menggunakan HTML dan CSS. Membuat dropdown menu merupakan hal yang cukup rumit bagi seorang pemula dengan HTML khususnya CSS.

Dropdown Menu HTML

Dalam tutorial ini, saya akan menggunakan tag list-unordered (<ul>) untuk membuat kerangka menunya. Langkah pertama yang akan kita lakukan adalah membuat kerangka dari menu itu sendiri. Berikut ini kerangkan dropdown menu yang akan kita buat. (Anda bisa melihat Demo Atau Download Source Pada akhir tulisan ini)

Struktur HTML dropdown menu


<!DOCTYPE html>
<html>
<head>

    <title>Membuat Multi dropdown Menu dengan HTML dan CSS</title>

    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <nav>

       <ul>

        	<li><a href="#">Beranda</a></li>

        	<li><a href="#">Profil</a>

	            <ul>

	                <li><a href="#">Profil 1</a></li>

	                <li><a href="#">Profil 2</a></li>

	            </ul>

        	</li>

        	<li class="dropdown"><a href="#">Kategori</a>

              <ul>

                <li><a href="#">CSS</a></li>

                <li><a href="#">PHP</a></li>

                <li><a href="#">Jquery</a></li>

                <li><a href="#">HTML</a>
                	<ul>
                        <li><a href="#">Dasar HTML</a></li>

                        <li><a href="#">Tag HTML</a></li>

                        </ul>
                   </li>
               </ul>

            </li>

            <li><a href="#">Kontak</a></li>
            
        </ul>

    </nav>

</body>

</html>

Anda perhatikan tag <link rel=”stylesheet” href=”style.css” />, seperti yang telah saya bahas pada postingan pengenalan div, itu adalah tag untuk memanggil file eksternal dalam hal ini style.css.  Jadi silahkan buat dulu satu file bernama style.css.

Setelah kerangka selesai kita buat, saatnya membentuknya menjadi suatu bentuk yang nyaman dilihat, dalam kasus ini dropdown menunya.

Dengan selector canggih yang dimiliki CSS, Kita dapat menargetkan elemen html tanpa menggunakan selector class ataupun ID tapi cukup menggunakan individual element-nya (ul, li).

Pertama kita akan menyembunyikan submenu yaitu dengan menambahkah deklarasi display:none pada setiap UL yang berada dalam UL.

Konsepnya seperti ini, kita akan menyembunyikan submenu (tag ul yang berada dalam tag li) dengan menambahkan deklarasi display:none pada setiap UL yang berada di dalam UL. Submenu yang kita sembunyikan nantinya akan tampil setelah menu utamanya di hover (nav ul li:hover > ul),  tag “>” setelah hover bertujuan untuk menampilkan satu tingkat sub yang ada di bawahnya. Kalau anda hanya menuliskan “nav ul li:hover ul”, maka saat menu utama di hover, baik submenu maupun sub dari submenu akan ditampilkan semuanya.

Kemudian kegunaan deklarasi position:relative yang ada pada selector “nav ul” yaitu untuk menyesuaikan posisi submenu saat ditampilkan. Dan pada setiap submenu dan sub dari submenu kita tambahkan deklarasi position:absolute (pada selector “nav ul ul” dan “nav ul ul ul”) sehingga sub menu akan tampil tanpa mengganggu tampilan menu utama.

Untuk lebih memahaminya, hilangkan beberapa deklarasi css yang anda pertanyakan kegunaannya kemudian lihat perubahan yang dihasilkan. Berikut ini adalah style dari dropdown menunya.

CSS Style


nav ul {
	background: #111;
	padding: 0 0px;
	list-style: none;
	position: relative;
	width: 100%;
	font-family: ‘helvetica’, arial;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	float: left;
}

nav ul li:hover {
	background-color: #222;

}

nav ul li a {

	display: block;
	padding: 20px 30px;
	text-decoration: none;
	color: #fff;

}

nav ul li a:hover{

	color: #fff;

}

nav ul ul {

	display: none;
	background: #111;
	padding: 0;
	position: absolute;
	top: 100%;
	max-width: 300px;
	width: auto;

}

nav ul ul li {

	float: none;
	border-bottom: 1px solid rgba(0,0,0,.2);
	position: relative;

}

nav ul li:hover > ul {

	display: block;

}

nav ul ul li a {

	padding: 10px 40px;
	color: #fff;

}

nav ul ul li a:hover {

	background: #222;

}

nav ul ul ul {

	position: absolute;
	left: 100%;
	top:0;
	width: 200px;

}


Demo Download
Please follow and like us:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *