Template dan Tips Seputar Blogger

Thursday, June 22, 2017

Menu Navigasi Dropdown Pure CSS

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.

Menu Navigasi Dropdown Pure 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>

3. Simpan template

See the Pen Menu Navigasi Dropdown Pure CSS by Indzign (@Indzign) on CodePen.


Silakan dicoba di blog masing-masing.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×