Penjelasan CSS
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Nah itulah penjelasan sedikit tentang CSS berikut nya langsung saja ke pembahasan bagaimana cara membuat menu dropdown dengan css. Hal yang harus kita ketahui adalah kode css nya terlebih dahulu berikut kode css menu dropdown.
Kode CSS
<style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> Nah letakan kode css diatas dibagian tag atau dibawah <head> dan diatas </head>.
Kode Menu Dropdown
<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> Nah untuk menampilkan menu dropdown silahkan copy-paste kode menu dropdown diatas, letakan kode tersebut dibagian atau dibawah tag <body> dan diatas kode </body>. Sebagai contoh atau demo script bisa dilihat dibawah ini.
Demo :
Nah itulah tutorial bagaimana cara membuat menu dropdown dengan css semoga tutorial css ini dapat bermanfaat dan menjadi bahan pembelajaran anda, Apabila tutorial diatas kurang jelas silahkan bertanya lewat komentar. Selebihnya saya mohon maaf apabila ada kata yang kurang dipahami atau dimengerti sekian terima kasih.