Advertisement
Html/Css/Jquery

Bagaimana Cara Membuat Drop Down Menu Dengan CSS dan Jquery

Pada artikel sebalumnya saya sudah membahas bagaiamana cara membuat drop down menu dengan css dan html, itu semua berawal dari seseorang teman yang ingin belajar membuat website. Nah, sekarang dari artikel tersebut saya ingin mengembangkannya sedikit. Sebelumnya hanya menggunakan css dan html saja, sekarang saya menambahkan penggunaan jquery, agar tampilannya lebih kelihatan oke.

Jika ada pertanyaan, apa sih perbedaan yang mencolok dari penggunaan jquery ini? Maka kamu tinggal melihat drop down menu yang ada pada tampilan website ini atau kamu bisa langsung buka link ini untuk melihat demonya.

Terus keuntungannya apa? Keuntungannya website kamu akan kelihatan lebih dinamis dengan animasi drop downnya jadi tidak kaku.

Ok, agar tidak terlalu bertele-tele, langsung saja ke pembahasannya.

Sebelumnya dowonload jquery disini.

Buat code htmlnya, seperti yang saya bahas pada tutorial sebelumnya. Atau mungkin kamu bisa mengembangkannya sesuai dengan kebutuhan kamu sendiri.

<div id="layout">
<h1>Drop Down Menu Dengan CSS</h1>
<div id="menu">
<ul>
<li><a href="http://pindexain.com">Home</a></li>
<li><a href="#">Tutorial</a>

<ul>
 <li><a href="http://www.pindexain.com/category/tech/internet/web/htmlcssjquery">HTML/CSS</a></li>
 <li><a href="http://www.pindexain.com/category/tech/internet/web/php-web">PHP</a></li>
 <li><a href="http://www.pindexain.com/category/tech/internet/wordpress">Wordpress</a></li>
 </ul>

</li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak Kami</a></li>
</ul>
</div>
</div>

Pada penggunaan code css ini tidak jauh berbeda dengan code sebelumnya, cuma saya menambahkan dan memperbaiki beberapa code saja agar fungsinya bisa berjalan dengan baik.

h1 {
 text-align: center;
}
#layout {
 width:600px;
 margin:auto;
 }
#menu {
 width: 400px;
 margin: auto;
}
#menu ul {
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
}
/*membuat menu menjadi horizontal dengan display block*/
#menu ul li {
 display: block;
 position: relative;
 float: left;
}
/*Untuk menyembunyikan ul li (submenu)*/

#menu li ul {
 display: none;
}
/*style awal seblum cursor mouse di arahkan (menu utama)*/
#menu ul li a {
 display: block;
 text-decoration: none;
 color: #ffffff;
 padding: 10px 15px 10px 15px;
 background: #000;
 /*margin-left: 1px;*/
}
/*style setelah cursor diarahkan*/
#menu ul li a:hover {
 background: #666;

}
/*Untuk menampilak arrow pada menu yang memiliki dropdown*/
#menu li a:after { margin-left: 7px; content: '\25BA'; font-size:7px; font-family:Arial, Helvetica, sans-serif;}
#menu li a:after { margin-left: 7px; content: '\25BC';font-size:7px;font-family:Arial, Helvetica, sans-serif;}
#menu li a:only-child:after { margin-left: 0; content: ''; }

/*untuk memunculkan submenu jika pada sebuah menu utama ada tag il ul (maksudnya ada tag ul dai dalam tag li)*/
#menu li ul {
 display: block;
 position: absolute;
 display: none;
}
/*meratakan sub menu kanan kiri dan menghilangkan fungsi float left (mengembalikan ke default)*/
#menu li li {
 float: none;
 font-size: 11px;
 width: 92px;
}
/*style awal seblum cursor mouse di arahkan (submenu)*/
#menu li a {
 background: #3b3b3b;
}
/*style setelah cursor diarahkan (submenu)*/
#menu li li a:hover {
 background: #666;
}

Tahapan selanjutnya insert jquery plugin ke dalam file website kamu dengan menggunakan code berikut,

<strong></strong><script type="text/javascript" src="jquery-1.10.1.min.js"></script>

Berikut code javascript pemanggilan fungsi jquerynya,

<script type="text/javascript">
$(document).ready(function () {
 $('#menu li').hover(
 function () {
 //show submenu
 $(' ul', this).stop().slideDown(500);

},
 function () {
 //hide submenu
 $(' ul', this).stop().slideUp(500);
 }
 );

});
</script>

Nah kelihatan lebih smooth bukan dibandingkan cuma dengan css saja? Ada lebih kelihatan beranimasinya.
Sekian tutorialnya, jika ada pertanyaan, kamu bisa menanyakan dengan mengirim kementar pada artikel ini, salam

Download Code

I Wayan Widyana

Selalu menganggap diri seorang pemula. Seorang Website Designer yang lagi suka nulis, juga editing video, dan memperhatikan tren desain. Entrepreneur. Co-Founder & CTO Pilar Kreatif Studio - Marketing & Editor Palawakia Studio

Related Stories

3 Responses to Bagaimana Cara Membuat Drop Down Menu Dengan CSS dan Jquery

  1. jquery nya pake yang mana yaa….
    soalnya di halaman tsb banyak sekali pilihan
    trims….

    • download yang “Download the compressed, production jQuery 2.1.0”. Kalau mau pakai versi 1.0 bisa pakai yang “Download the compressed, production jQuery 1.11.0” 😀

  2. keren pasti nih hasilnya,,makasih sudah berbagi sob 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *