Membuat drop down menu sederhana dengan CSS3

Menu navigasi sangatlah penting dalam sebuah web, untuk memudahkan pengunjung menelusuri isi web. Banyak sekali desain menu yang ada di internet dengan berbagai macam baik horisontal maupun vertical.

Berbagai teknik dapat dilakukan untuk membuat menu navigasi dalam website, dapat menggunakan javascript, jQuery, mootools dan masih banyak lagi library yang menyediakan plugin untuk menu.

Kali ini ada sedikit contoh membuat animasi dropdown menu menggunakan CSS3.

berikut script dari CSS3 : 

<style type="text/css">
.blok_menu {
 height:40px;width:375px;border:0px solid #000;
}
.menu_sub,
.menu_sub ul.kolom,
.menu_sub li.baris,
.menu_sub a.pertama {
 margin: 0;
 border: none;
}
.menu_sub { 
 padding: 0;
 margin: 0;
 height: 40px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
}
.menu_sub li.baris {
 position: relative;
 float: left;
 display: block;
 height: 40px;
 width:125px;
}
.menu_sub li.baris a.pertama{
 display: block;
 padding: 0 10px 0 10px;
 margin: 0px 0;
 line-height: 40px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.menu_sub li.baris a.kedua{
 display: block;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.menu_sub li.baris:first-child a.pertama{ border-left: none; }
.menu_sub li.baris:last-child a.pertama{ border-right: none; }
.menu_sub li.baris:hover > a.pertama { color: #8fde62; }
.menu_sub ul.kolom2{
 position: absolute;
 top: 40px;
    padding:0px;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}
.menu_sub li.baris:hover > ul.kolom2 { opacity: 1; }
.menu_sub li.baris2:hover > a.kedua { color: #8fde62; }
.menu_sub ul.kolom2 li.baris2 {
 height: 0;
 overflow: hidden;
 width:105px;
    padding: 0 10px;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
 list-style-type:none;
}
.menu_sub li.baris:hover > ul.kolom2 li.baris2 {
 height: 36px;
 overflow: visible;
    padding: 0 10px;
}
.menu_sub ul.kolom2 li.baris2 a.kedua {
 width: auto;
 padding: 4px 0 4px 0px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.menu_sub ul.kolom2 li.baris2:last-child a.kedua { border: none; }
</style>

tempatkan CSS di atas di antara head

Kemudian berikut adalah tag HTML untuk menggunakan CSS di atas :

<div class="blok_menu">
 <ul class="menu_sub">
 <li class="baris"><a class="pertama" href="#">Menu 1</a>
 </li>
 <li class="baris"><a class="pertama" href="#">Menu 2</a>
       <ul class="kolom2">
   <li class="baris2"><a class="kedua" href="" >Sub Menu 2.1</a></li>
   <li class="baris2"><a class="kedua" href="" >Sub Menu 2.2</a></li>
   <li class="baris2"><a class="kedua" href="" >Sub Menu 2.3</a></li>
       </ul>
 </li>
 <li class="baris"><a class="pertama" href="#">Menu 3</a>
       <ul class="kolom2">
   <li class="baris2"><a class="kedua" href="" >Sub Menu 3.1</a></li>
   <li class="baris2"><a class="kedua" href="" >Sub Menu 3.2</a></li>
   <li class="baris2"><a class="kedua" href="" >Sub Menu 3.3</a></li>
   <li class="baris2"><a class="kedua" href="" >Sub Menu 3.4</a></li>
   <li class="baris2"><a class="kedua" href="" >Sub Menu 3.5</a></li>
       </ul>
 </li>
 </ul>
</div>

Tempatkan script html di atas kedalam dalam tag body website atau blog anda. Kompabilitas CSS3 telah didukung oleh browser terkini. Demikian sedikit sharenya, selamat mencoba dan semoga berguna.

---