Membuat Dropdown Menu Dengan Jquery dan CSS

Membuat dropdown menu dengan css, menu adalah hal paling penting dalam sebuah website, Menu yang baik akan memudahkan pengunjung dalam menjelajahi website kita, terutama ketika website kita ternyata memiliki halaman yang terdiri dari sub dan sub sub halaman.

Pada tutorial kali ini kita akan mencoba membuat Dropdown menu dengan CSS, dan kita akan mempercantik menu yang kita buat dengan sedikit bantuan Jquery.
Pada artikel terdahulu kita juga telah beberapa kali membuat contoh menu, mungkin bisa untuk jadi referensi lain.
OK, kita mulai saja.

Struktur HTML

Disini kita perlu mempersiapkan struktur HTML terlebih dahulu, buat file dengan nama index.html, lalu tulis code berikut ini.

<div class="container">
 <!-- Header -->
 <header>
  <h1>Dropdown Menu</h1>
  <p>Tutorial-WebDesign.com</p>
 </header>
 <!-- /Header -->

 <div class="content">
  <nav>
   <ul id="nav">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Tutorial</a>
         <ul>
               <li><a href="#">Web Development</a>
                 <ul>
                       <li><a href="#">Server Side</a></li>
                       <li><a href="#">Client Side</a>
         <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">Javascript</a>
          <ul>
           <li><a href="#">Jquery</a></li>
           <li><a href="#">Mootool</a></li>
           <li><a href="#">Prototipe</a></li>
          </ul>
          </li>
          <li><a href="#">DOM</a></li>
         </ul>
        </li>
                 </ul>
               </li>
               <li><a href="#">Web Design</a></li>
               <li><a href="#">Security</a></li>
         </ul>
       </li>
   </ul>
  </nav> <!-- /Navigation -->
 </div> <!-- /Content -->

 <footer>
  Copyright &copy; 2012, <a href="septianto04.blogspot.com.com">Tutorial-webdesign.com</a>
 </footer> <!-- /Footer -->
</div> <!-- /Container -->

Sisipkan Jquery dan CSS di bagian head dan /head.

 <title>Demo Dropdown Menu:kambingbetina.com</title>

 <link rel="stylesheet" href="style.css">

 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="twd-menu.js"></script>

Sebenarnya menu ini tetap berjalan dengan baik tanpa Javascript/Jquery, namun untuk membuat efek muncul dengan perlahan kita menggunakan Jquery.
Efek seperti itu sebenarnya bisa dibuat juga dengan CSS3 Animation, ayo silahkan tunjukan creasi anda!!

Styling

Untuk mempercantik tampilan tulis css berikut ini, di file style.css.

body{
 font-size:0.85em;
 font-family:Verdana, Arial, Helvetica, sans-serif;
}

.container{
 width: 800px;
 padding:20px;
 margin: 50px auto;
 border-top: 5px solid orange;
 background: #f4f4f4;
 overflow: hidden;
}
 .content{
  height: 200px;
 }

 #nav, #nav ul{
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position:outside;
  position:relative;
  line-height:1.5em;
 }

 #nav a{
  display:block;
  padding:5px 5px;
  border:1px solid orange;
  color:#fff;
  text-decoration:none;
  background-color:orange;
 }

 #nav a:hover{
  background-color:#fff;
  color:#333;
 }

 #nav li{
  float:left;
  position:relative;
 }

 #nav ul {
  position:absolute;
  display:none;
  width:12em;
  top:2.3em;
 }

 #nav li ul a{
  width:12em;
  height:auto;
  float:left;
 }

 #nav ul ul{
  top:auto;
 }

 #nav li ul ul {
  left:12em;
  margin:0px 0 0 10px;
 }

 #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
  display:none;
 }
 #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
  display:block;
 }

footer{
 margin-top:50px;
 clear: both;
}

Jquery

Sebenarnya sampai disini menu sudah tampil OK.
Untuk memperhalus munculnya sub menu, kita bisa membuat nya dengan Javascript/Jquery seperti dibawah ini.
Kita juga bisa menggantinya dengan CSS3 Animation jika diinginkan.
Code untuk twd-menu.js.

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
  });
}

 $(document).ready(function(){
 mainmenu();
});

Hasil
Berikut adalah hasil dari menu yang kita buat, anda bisa merubahnya sesuai kebutuhan anda, kita ada saran dan masukan anda bisa menuliskan komentar anda, atau membuat tulisan juga di blog ini, dengan cara mendaftar terlebih dahulu.