Buat sebuah menu geser
HTML/CSS
Pertama buat HTML/CSS.
Sebuah menu adalah komponen tersendiri pada halaman, jadi lebih baik untuk menaruhnya kedalam satu elemen DOM.
Sebuah daftar dari item menu bisa dapat diatur kedalam daftar menggunakan ul/li.
Ini contoh strukturnya:
<div class="menu">
<span class="title">Manis-Manis (Tekan saya)!</span>
<ul>
<li>Kue</li>
<li>Donat</li>
<li>Madu</li>
</ul>
</div>
Kita dapat menggunakan <span> untuk judul, karena <div> memiliki display:block, dan akan memenuhi 100% horisontal lebar elemen.
Seperti ini:
<div style="border: solid red 1px" onclick="alert(1)">Manis-Manis (Tekan saya)!</div>
Jadi jika kita mengatur onclick pada judul, maka itu akan menangkap klik diselah kanan teks.
Sedangkan <span> memiliki display:inline, dan akan memenuhi ruang yang cukup sesuai dengan teks:
<span style="border: solid red 1px" onclick="alert(1)">Manis-Manis (Tekan saya)!</span>