Vertikal Dropdown Menu

Assalamu'alaikum wr. wb.
Tulisan saya kali ini membahas tentang Dropdown Menu, salah satu bagian yang sering ditemui di halaman website ataupun blog. Menu pada suatu website biasanya dibuat untuk memudahkan navigasi dan pengkategorian atau pengelompokan jenis tulisan. 

Berikut ini merupakan tampilan yang akan dibuat:




Pertama-tama, tulis kode HTML berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Menu Horizontal</title>
  <style>
    <!-- Script CSS -->
  </style>
</head>
<body>

 <div>
  <!-- Menu utama -->
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
      <!-- Submenu -->
      <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
      </ul>
      <!-- Akhir dari Submenu -->
    </li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>
</body>
</html>

Kode HTML tersebut jika ditampilkan di browser menjadi seperti ini:





Kemudian tambahkan script CSS pada tag <style></style>
/* --------------- Style Menu Utama ------------- */
    div ul {
      background-color: green;
      width: 200px;
      text-align: center;
      list-style: none;
      padding: 0;

     }
    div ul li {
      position: relative;
     
    }
    div ul li:hover {
      background: lightgreen;
    }
    div ul li a {
        text-decoration: none;
        color: white;
        font-size: 20px;
        padding: 15px;
        display:block;
    }

     /* --------------- Style Submenu ----------------- */

     div ul li ul {
      position: absolute;
      display: none;
      top: 0;
      left: 100%;
    }
   
    div ul li:hover ul {
      display: block;
    }

Script CSS digunakan untuk memodifikasi tampilan yang dihasilkan oleh HTML.
Pada baris script Style Submenu, property display: none; digunakan agar submenu (ul yang kedua) tidak ditampilkan ketika halaman website dibuka. Kemudian ketika li yang pertama (Menu utama) ditunjuk (hover), Submenu akan ditampilkan dengan property display: block;
position: absolute; pada submenu bermaksud untuk memposisikan submenu relative terhadap Menu Utamanya

Itu sedikit yang dapat saya perlihatkan dan yang saya jelaskan, semoga bermanfaat.
Wassalamu'alaikum wr. wb

Komentar

Posting Komentar

Postingan populer dari blog ini

Tentang Pertanggungjawaban, Selamat Datang!

"Manusia disebut sebagai manusia karena ada sesuatu yang mulia di dalam dirinya. Manusia bukan karena badannya yang kuat. Jika manusia direduksi hanya dari kekuatannya, maka unta itu lebih kuat. Manusia disebut manusia bukan hanya dari tulangnya, karena gajah jauh lebih kuat. Dan bukan karena keberaniannya saja karena sesungguhnya hewan buas itu jauh lebih berani. Dan bukan hanya untuk makan, tak ubahnya seperti sapi. Dan bukan hanya untuk berhubungan, tak ubahnya seperti kelelawar. Tetapi manusia tidak diciptakan kecuali hanya untuk ilmu." - Paragraf di atas saya kutip dari catatan ngaji kitab Ihya’ yang dikarang oleh Imam Al-Ghazali. Terhitung sejak TK, sudah sekitar 16 tahun saya mendapatkan pendidikan formal. Betapa luar biasa orang tua saya mampu mengorbankan banyak hal demi pendidikan saya. Selama itu saya menuntut ilmu, sebagaimana tugasnya manusia diciptakan selain untuk beribadah kepada Tuhan. Namun, tak selamanya ilmu yang dituntut. Sudah selama apapun ses...
Baca selengkapnya