CSS Dropdown

by

Dropdown adalah jenis navigasi menu utama, dimana jika salah satu linknya dihover / diklik maka akan muncul menu dropdown (list kebawah).

Contoh:

Arahkan Mouse Kesini

Hello World!

Tahu kan apa yang akan kita buat sekarang?

Basic dropdown

Contoh diatas adalah basic dropdown, belum diimplementasikan dalam sebuah menu navigasi.

Kode dari contoh diatas adalah berikut:

<style>
.contoh-dropdown {
  position: relative;
  display: inline-block;
}
.contoh-dropdown span {
  background:#333232;
  color:white;
  padding:10px
}
.isi-dropdown {
  display: none;
  position: absolute;
  background-color: #5340ff;
  margin-top:5px;
  min-width: 150px;
  padding: 5px 5px;
  z-index: 1;
  color:white
}

.contoh-dropdown:hover .isi-dropdown {
  display: block;
}
</style>
<div class="contoh-dropdown">
  <span>Arahkan Mouse Kesini</span>
  <div class="isi-dropdown">
  <p>Hello World!</p>
  </div>
</div>

Penjabaran:

HTML:

Disini saya buat box terluar dulu, sebagai area untuk membuat dropdown yaitu <div class="contoh-dropdown">.

Logika dropdown ini adalah, ada konten yang dihidden atau sembunyikan. Kemudian ketika menu atau area yang ditentukan dihover maka konten yang disembunyikan akan ditampilkan.

Disini konten yang dihide adalah konten di dalam <div class="isi-dropdown"> </div> yaitu <p>Hello World!</p>.

<span> adalah area yang saya tentukan, ketika dihover maka isi-dropdown akan muncul.

CSS:

Secara default, class .isi-dropdown saya beri display:none;. Artinya, secara default .isi-dropdown tidak tampil.

Namun, ketika span dihover maka akan tampil. Saya mengaturnya di kode .contoh-dropdown:hover .isi-dropdown dengan set display:block.

Artinya adalah ketika .contoh-dropdown di hover, maka .isi-dropdown display diganti block.

Supaya lebih paham, kamu harus menguasai css combinator.

Dropdown Nav

Ok, lanjut.

Kita akan implementasi untuk membuat navigasi dropdown.

Kode yang saya gunakan:

<style>
.clear {
  clear: both;
}

.navigasi {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgb(58,58,58);
  /*
  box-shadow:  0px -2px 3px -1px rgba(0, 0, 0, 1);
  */
}

.navigasi li {
  float: left;
}

.navigasi li:hover {
  background: #5340ff;
}

.navigasi li:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 0 0 5px;
}

.navigasi li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.navigasi ul {
  display: none;
  position: absolute;
  list-style: none;
  margin-left: -3px;
  padding: 0;
  overflow: hidden;
}

.navigasi ul li {
  float: none;
}

.navigasi li:hover > ul {
  display: block;
  background: #222;
  border: solid 3px #fff;
  border-top: 0;
}

.navigasi li:hover > ul li:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.navigasi li li a:hover {
  background: #5340ff;
}

.navigasi ul li:last-child a,
.navigasi ul li:last-child a:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
</style>  
<ul class="navigasi">
    <li><a href="" title="Home">Home</a></li>
    <li><a href="" title="About">About</a></li>
    <li><a href="" title="Portfolio">Dropdown</a>
      <ul>
        <li><a href="" title="Menu 1">Ini Menu 1</a></li>
        <li><a href="" title="Menu 2">Menu 2</a></li>
        <li><a href="" title="Menu 3">Menu 3</a></li>
      </ul>
    </li>
    <li><a href="" title="Contact">Contact</a></li>
    <div class="clear"></div>
  </ul>

Leave a Comment