Membuat Menu Dropdown Menggunakan Plugin JQuery Superfish

Membuat Menu Dropdown Menggunakan Plugin JQuery Superfish

Tutorial Information

ProgramJQuery/HTML/CSS
Version1.0
DifficultyPemula
Estimated Time10 Menit
DownloadClick this link

Setiap halaman web pasti memiliki menu yang dapat mempermudah pengunjung web tersebut untuk mengakses setiap halaman pada website. Tetapi jika suatu webpage memiliki banyak…

Setiap halaman web pasti memiliki menu yang dapat mempermudah pengunjung web tersebut untuk mengakses setiap halaman pada website. Tetapi jika suatu webpage memiliki banyak menu pasti akan sangat sulit untuk mengatur tampilan menu agar rapi dan memiliki desain yang bagus.

Salah satu cara untuk mendesain webpage dengan menu yang sangat banyak adalah dengan  menggunakan menu dropdown. Menu dropdown adalah menu yang apabila kita hover (sorot) maka submenunya akan muncul yang tadinya tidak muncul. Menu dropdown dapat menghemat space webpage dan juga memperindah webpage.

Ada banyak cara yang dapat dilakukan untuk membuat dropdown menu salah satunya dengan menggunakan plugin jquery superfish. Superfish adalah salah satu plugin gratis yang yang dapat Anda download di http://users.tpg.com.au/j_birch/plugins/superfish/ . Plugin ini dapat memudahkan Anda dalam membuat menu dropdown berikut adalah langkah-langkahnya.

HTML Markup

Buatlah sebuah file HTML   yang berisi unorder list untuk membuat menu dropdown seperti dibawah ini

<div class="menu-wrap">
    	<ul class="sf-menu">
        	<li><a href="#">HOME</a></li>
            <li><a href="#">NEWS</a>
            	<ul><li><a href="#">Menu Level 2</a></li>
                <li><a href="#">Menu Level 2</a>
                	<ul><li><a href="#">Menu Level 3</a></li>
                    <li><a href="#">Menu Level 3</a></li>
                    <li><a href="#">Menu Level 3</a></li></ul>
                </li>
                <li><a href="#">Menu Level 2</a></li></ul>
            </li>
            <li><a href="#">ARTICLE</a></li>
        	<li><a href="#">DESIGN</a>
            	<ul><li><a href="#">Menu Level 2</a></li>
                <li><a href="#">Menu Level 2</a></li>
                <li><a href="#">Menu Level 2</a></li></ul>
            </li>
            <li><a href="#">DEVELOPMENT</a>
            	<ul><li><a href="#">PHP</a></li>
            		<li><a href="#">JAVASCRIPT</a></li>
            		<li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                </ul></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">ABOUT</a></li>
        </ul>
    </div><!-- .menu wrap -->

Jika Anda melihat hasilnya di browser, hasilnya masih seperti ini.

Markup HTML

Markup HTML

 

Menggunakan Plugin JQuery Superfish

Tambahkan beberapa baris program berikut kedalam tag <head></head> di file HTML

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

<script type="text/javascript" src="js/superfish.js"></script>

Disini saya menggunakan plugin jquery-1.6.2.min.js.js, plugin ini dapat Anda download di jquery.com. Sesuaikan src dari script yang akan Anda gunakan agar plugin dapat bekerja. Selanjutnya tambahkan baris program berikut ke file html.

<script type="text/javascript">

jQuery(function(){

jQuery('ul.sf-menu').superfish();

});

</script>

Baris program ini akan memanggil fungsi superfish().

Jika sintaks yang Anda masukkan benar maka hasilnya akan seperti ini.

Menggunakan Plugin

Menggunakan Plugin

Ketika Anda hover menu yang memiliki tanda panah, maka submenunya akan muncul.

CSS

/* Style untuk body-nya */
body{
	background-color:#c1c1c2;

}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu {
	line-height:	1.0;
	margin-top:15%;
	margin-left:20%;
	font-family: 'Anaheim', sans-serif;
}
.sf-menu ul {
	position: absolute;
	top: -999em;
	width: 	10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width: 	80%;
}
.sf-menu li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float: left;
	position: relative;
}
.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu li:hover ul {
	left: 0;
	top: 2.5em; /* match top ul list item height */
	z-index: 99;
}
ul.sf-menu li:hover li ul {
	top: -999em;
}
ul.sf-menu li li:hover ul {
	top: 0;
}
ul.sf-menu li li:hover li ul {
	top: -999em;
}
ul.sf-menu li li li:hover ul {
	top: 0;
}

Ini adalah style dasar untuk menu, hasilnya adalah sebagai berikut.

Superfish CSS

Superfish CSS

Agar lebih menarik tambahkan style berikut.

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu li {
	padding: 		.75em 1em;

	/* transition */
	transition: background-color .2s linear, color .2s linear, border .2s linear;
	-moz-transition: background-color .2s linear, color .2s linear, border .2s linear;
	-o-transition: background-color .2s linear, color .2s linear, border .2s linear;
	-ms-trasition: background-color .2s linear, color .2s linear, border .2s linear;
	-webkit-transition: background-color .2s linear, color .2s linear, border .2s linear;
}
.sf-menu li a{
	text-decoration:none;
	text-shadow: 1px 1px #fff;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#686868;
}
.sf-menu{
	background-color:#ececec;
	-moz-border-radius: 5px; /* FireFox 1+ */
	-webkit-border-radius: 5px;/* Safari 3+, Chrome */
	border-radius: 5px; 

	background: -moz-linear-gradient(#f4f4f3, #e0e0e1); /* FF 3.6+ */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f3), color-stop(100%, #e0e0e1)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(top, #f4f4f3, #e0e0e1); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#f4f4f3, #e0e0e1); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f3', endColorstr='#e0e0e1'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f3', endColorstr='#e0e0e1')"; /* IE8+ */  
    background: linear-gradient(#f4f4f3, #e0e0e1); /* the standard */ 

	border: 1px solid #ffffff;
	box-shadow: 2px 4px 5px #888; 
	}

.sf-menu ul {
	background:	#ececec;
	background-image: -moz-linear-gradient(#f4f4f3, #e0e0e1); /* FF 3.6+ */  
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f3), color-stop(100%, #e0e0e1)); /* Safari 4+, Chrome 2+ */  
    background-image: -webkit-linear-gradient(top, #f4f4f3, #d9d9d9); /* Safari 5.1+, Chrome 10+ */  
    background-image: -o-linear-gradient(#f4f4f3, #e0e0e1); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f3', endColorstr='#e0e0e1'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f3', endColorstr='#e0e0e1')"; /* IE8+ */  
    background-image: linear-gradient(#f4f4f3, #e0e0e1); /* the standard */ 

	/* border */
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;

	border: 1px solid #ffffff;
}

.sf-menu li:hover,
.sf-menu a:focus {
	background:		#cbcbcb;
	background-image: -moz-linear-gradient(#e0e0e1, #cbcbcb); /* FF 3.6+ */  
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0e0e1), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */  
    background-image: -webkit-linear-gradient(top, #e0e0e1, #cbcbcb); /* Safari 5.1+, Chrome 10+ */  
    background-image: -o-linear-gradient(#e0e0e1, #e0e0e1); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e1', endColorstr='#cbcbcb'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e1', endColorstr='#cbcbcb')"; /* IE8+ */  
    background-image: linear-gradient(#e0e0e1, #cbcbcb); /* the standard */
	outline: 0;
}

/*** untuk  menghilangkan tanda panah **/
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

Berikut tampilan hasil akhirnya.

Superfish CSS

Hasil Akhir

Penutup

Plugin JQuery Superfish adalah salah satu cara paling mudah untuk membuat menu drop down. Untuk bagian CSS-nya Anda dapat mengubahnya sesuai keinginan Anda.

Tag: , , , , ,

3 Comments

Leave Comment
  1. Mustofa says:

    wah lebih cepat yah pake superfish, nice post

  2. Yohan Apriyandi says:

    Nice POST mba…keep share…

  3. daffa says:

    apakah bisa tutorial itu di integrasikan di wordpress.

Write Comment

Your email will not be published. The marked label is required.