Membuat Menu Drop Down dengan Superfish JQuery Plugin

Contoh Kasus:

Seseorang Klien meminta bantuan dari freelancer untuk membuat menu dropdown dengan menggunakan plugin dari JQuery yaitu Superfish seperti terlihat pada gambar dibawah ini:

Pertanyaan:
Bagaimana membuatnya … ?

Analisa:

Setelah saya lihat demo dari Superfish disini , maka yang cocok dengan permintaan klien adalah Basic Style dari Superfish.

Pembuatan:

Download Superfish dari http://users.tpg.com.au/j_birch/plugins/superfish/#download

Lalu extractlah disembarang tempat.

Setelah diextract maka isi direktorinya terlihat seperti pada gambar dibawah ini:

Rubahlah file example.html menjadi seperti dibawah ini:

<html >
<head>
<title>A very basic Superfish menu example</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<link rel=”stylesheet” type=”text/css” href=”css/superfish.css” media=”screen”>
<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”js/hoverIntent.js”></script>
<script type=”text/javascript” src=”js/superfish.js”></script>
<script type=”text/javascript”>

jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});

</script>
</head>
<body>
<ul>
<li>
<a href=”#a”>WOMEN</a>
<ul>
<li>
<a href=”#aa”>dropdown 1</a>
</li>
<li>
<a href=”#ab”>dropdown 2</a>

</li>
<li>
<a href=”#”>dropdown 3</a>

</li>

</ul>
</li>
<li>
<a href=”#”>MEN</a>
</li>
<li>
<a href=”#”>EDITORIAL</a>
<ul>
<li>
<a href=”#”>dropdown 1</a>

</li>
<li>
<a href=”#”>dropdown 2</a>

</li>
<li>
<a href=”#”>dropdown 3</a>

</li>
<li>
<a href=”#”>dropdown 4</a>

</li>
<li>
<a href=”#”>dropdown 5</a>

</li>
<li>
<a href=”#”>dropdown 6</a>

</li>
<li>
<a href=”#”>dropdown 7</a>

</li>
<li>
<a href=”#”>dropdown 8</a>

</li>
<li>
<a href=”#”>dropdown 9</a>

</li>
</ul>
</li>
<li>
<a href=”#”>INFO</a>
</li>
<li>
<a href=”#”>CONTACT</a>
</li>
</ul>
</body>
</html>

Nah sekarang coba dijalankan file example.html tersebut, apakah sudah berhasil … ?

Hasil:

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

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