Cara Membuat Menu Dropdown dengan W3.CSS
Jangan pernah lari dari masalah, karena masalah akan selalu mengikutimu. Hadapilah, karena itu akan membuatmu menjadi pribadi yg lebih kuat. Oke di kesempatan kali ini saya akan berbagi ilmu lagi kepada kalian mengenai bagaimana Cara Merancang Fitur Dropdown dengan W3.CSS.
Merancang Navbar atau Fitur yang terdapat Dropdown nya kadang masih bingung bagi kita bikin. Nah apabila teman-teman sedang membangun Web/Blog dengan Framework W3.CSS ini, saya akan memberitahukan kepada kalian cara nya.
Berikut Cara Merancang Fitur Dropdown dengan W3.CSS.
Pertama-tama-tama, seperti biasanya siapkan file index.html nya.
Kemudian, isi di bagian <head> link bagi 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? lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai Cara Merancang Fitur Dropdown dengan W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
