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>