Cara Membuat Menu Dropdown Dengan Flex CSS

Halo selamat datang kembali di website tips dan trik dumet school, berjumpa kembali dengan saya tentunya pada pembahasan tips dan trik seputar dunia website. Kali ini saya akan memberikan tips tentang Cara Membuat Menu Dropdown Dengan Flex CSS dimana pada biasanya kita membuat menu dengan memanfatkan float css dan kali ini kita tidak lagi menggunakannya karena kita akan menggunakan flex css. Dengan menggunakan flex tag li yang akan kita atur dengan otomatis akan di susun sesuai pembungkusnya, kita bisa memanfaatkan untuk mengatur untuk tag li lapis pertama.

Baik langsung saja kita implementasikan Cara Membuat Menu Dropdown Dengan Flex CSS untuk membuat menu dropdown, pertama – tama kita buat struktur dasarnya terlebih dahulu.

<nav>
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">Home</a></li>
		<li><a href="">Home</a>
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">Home</a></li>
				<li><a href="">Home</a>
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">Home</a></li>
						<li><a href="">Home</a></li>
						<li><a href="">Home</a></li>
						<li><a href="">Home</a></li>
					</ul>
				</li>
				<li><a href="">Home</a></li>
				<li><a href="">Home</a></li>
			</ul>
		</li>
		<li><a href="">Home</a></li>
		<li><a href="">Home</a></li>
	</ul>
</nav>

Kemudian simpan dengan nama menu.html, lalu kita atur untuk li lapis pertama

*{padding: 0; margin: 0; box-sizing: border-box;}
nav{max-width: 900px; margin: auto;}
nav li{position: relative; height: 40px; text-align: center; background-color: red; list-style: none;}
nav > ul{display: flex;}
nav > ul > li{flex-grow: 1}

Kita simpan dan coba jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Memanfaatkan Flex CSS Untuk Drop Down Menu

Kemudian kita tambahkan lagi css nya untuk menyempurnakan menu drop down nya

nav li a{line-height: 40px;display: block;color: white; text-decoration: none;}
nav li a:hover{background-color: white; color: black}
nav li > ul{display: none; position: absolute; top: 40px; left: 0}
nav li:hover > ul{display: block;}
nav ul ul li{width: 180px}
nav ul ul li > ul{left: 100%; top: 0}

Jika sudah save dan refresh kembali pada browsernya, maka hasilnya seperti gambar di bawah ini

Memanfaatkan Flex CSS Untuk Drop Down Menu

Dengan begitu kita sudah berhasil membuat menu dropdown secara dinamis, jika kita tambahkan menu pada tag htmlnya akan otomatis ada drop down nya pada saat menu di hover.

Memanfaatkan Flex CSS Untuk Drop Down Menu

Maka hasilnya seperti gambar di bawah ini

Memanfaatkan Flex CSS Untuk Drop Down Menu

Nah itulah cara Cara Membuat Menu Dropdown Dengan Flex CSS kita sudah bisa membuat menu drop down dengan menggunakan flex untuk mengganti fungsi dari float css. Sekian pada artikel kali ini, tentu kita akan lanjut lagi pada tips dan trik lainnya seputar dunia website. Terimakasih dan sampai jumpa.

Hernowo Author

Leave a Reply

Your email address will not be published. Required fields are marked *