√ Menu Navigasi Dropdown Pure CSS

Menu Navigasi Dropdown Pure CSS

6/22/2017

Menu Navigasi Dropdown Pure CSS - Untuk membuat Menu Navigasi bergaya Dropdown biasanya yang sering kita temui dengan bantuan javascript. Namun disini saya akan memberikan tutorial bagaimana cara yang paling mudah hanya untuk membuat menu navigasi dropdown pure css atau tanpa javascript yang diembed maupun inline, cukup dengan kode HTML yang dibubuhi sedikit CSS.

Sekalipun Anda tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML. Kalau dinilai dari sisi besar-kecilnya source, maka dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengaksesannya lebih cepat dibanding menggunakan javascript.

Berikut kode Menu Navigasi Dropdown Pure CSS

1. Login ke blog > Buka Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

CSS sengaja tidak di minify, biar jelas

ul#menu,
ul#menu ul.sub-menu {
  padding: 0;
  margin: 0;
  text-align: center;
  opacity: .9
}

ul#menu li,
ul#menu ul.sub-menu li {
  list-style-type: none;
  display: inline-block;
  width: 120px
}

ul#menu li a,
ul#menu li ul.sub-menu li a {
  text-decoration: none;
  color: #fff;
  background: #666;
  padding: 5px;
  display: block
}

ul#menu li a:hover,
ul#menu li ul.sub-menu li a:hover {
  background: #333
}

ul#menu li {
  position: relative
}

ul#menu li ul.sub-menu {
  position: absolute;
  top: 30px;
  display: none
}

ul#menu li:hover ul.sub-menu {
  display: block
}

2. Kemudian salin kode di bawah ini di bagian <body>

<ul id="menu">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 5</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
</ul>