Jangan pernah lari dari masalah, karena masalah akan selalu mengikutimu. Hadapilah, karena itu akan membuatmu menjadi pribadi yg lebih kuat. Oke pada kesempatan kali ini saya akan berbagi ilmu lagi kepada kalian tentang bagaimana Cara Membuat Menu Dropdown dengan W3.CSS.
Membuat Navbar atau Menu yang ada Dropdown nya kadang masih bingung untuk kita buat. Nah jika teman-teman sedang membuat Web/Blog dengan Framework W3.CSS ini, saya akan memberitahukan kepada kalian cara nya.
Berikut Cara Membuat Menu Dropdown dengan W3.CSS.
Pertama-tama, seperti biasa siapkan file index.html nya.
Kemudian, isi di bagian <head> link untuk menghubungkan file HTML kita dengan library CSS nya.
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah.
<body class="w3-container">
<h2>Navigation Bar Dropdown</h2>
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</body>
Nah bagaimana teman-teman? cukup mudah bukan?
Sekian untuk tutorial kali ini tentang Cara Membuat Menu Dropdown dengan W3.CSS.
Semoga bermanfaat, terima kasih