Membuat Drop Down Menu Dengan CSS dan Jquery

Pada artikel sebelumnya kami telah menampilkan cara membuat drop down menu dengan css dan html. Nah, sekarang kami akan menambahkan penggunaan jquery dalam membuat dropdown menu agar tampilannya lebih terlihat OK.

Sebelumnya dowonload jquery disini.

<div id=”layout”>

<h1>Drop Down Menu Dengan CSS</h1>

<div id=”menu”>

<ul>

<li><a href=”http://berbagiyuks.com”>Home</a></li&gt;

<li><a href=”#”>Tutorial</a>

<ul>

<li><a href=”http://www.berbagiyuks.com/category/tech/internet/web/htmlcssjquery”>HTML/CSS</a></li&gt;

<li><a href=”http://www.berbagiyuks.com/category/tech/internet/web/php-web”>PHP</a></li&gt;

<li><a href=”http://www.berbagiyuks.com/category/tech/internet/wordpress”>Wordpress</a></li&gt;

</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>

Dengan Jquery Dropdown menu akan terlihat smooth. Selamat mencoba.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

%d blogger menyukai ini: