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
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
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.
Maka hasilnya seperti gambar di bawah ini
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.
