Tutorial: How to create a simple drop-down menu jQuery plugin
I’ve been using jQuery for quite a long time and simply love the power of it. It helps to speed up my development time like what they say: ‘write less, do more’. And I also used many jQuery plugins depending on my development’s needs. There are many great plugins which will make your life much easier.
In this tutorial, I will share how to write a simple plugin for your drop-down navigation menu.
Basic Structure
Lets take a look at the basic structure of jQuery plugin. (If you wish, you can read the official article for writing a plugin)
(function($) {
$.fn.yourplugin = function() {
this.each(function() {
//your code comes here
});
return this;
};
})(jQuery);
Options
You might want to include some options to let the users to change easily without touching your plugin’s code.
(function($) {
$.fn.yourplugin = function() {
//set default values of your options
var config = {
‘option1′: value’,
‘option2′: ‘value’
};
var settings = $.extend(config, settings);
this.each(function() {
//default options. you can call your settings like ‘s.option1′ or ‘s.option2′
var s = settings;
//your code comes here
});
return this;
};
})(jQuery);
Now we know what basic plugin structure looks like. Lets create our very simple drop-down menu plugin. First of all, we need to create a navigation menu before we move on to the plugin. Here’s how it looks like:
<div id=”navwrap”>
<ul id=”nav”>
<li><a href=”#”>Menu Item 1</a>
<ul>
<li><a href=”#”>Menu Item 1.1</a>
<ul>
<li><a href=”#”>Menu Item 1.1.1</a>
<ul>
<li><a href=”#”>Menu Item 1.1.1.1</a></li>
</ul>
</li>
<li><a href=”#”>Menu Item 1.1.2</a></li>
</ul>
</li>
<li><a href=”#”>Menu Item 1.2</a></li>
<li><a href=”#”>Menu Item 1.3</a></li>
</ul>
</li>
<li><a href=”#”>Menu Item 2 Is Long</a>
<ul>
<li><a href=”#”>Menu Item 2.1</a></li>
</ul>
</li>
<li><a href=”#”>Menu Item 3</a></li>
<li><a href=”#”>Menu Item 4</a></li>
</ul>
</div>
CSS
Then, we need to set some css rules for our menu.
ul#nav{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul#nav li{
float:left;
background-color: #0088AA;
position:relative;
display:block;
margin-right:1px;
font-size:14px;
}
ul#nav li a{
color:#FFF;
text-decoration: none;
padding:5px;
display:block;
position:relative;
width:100%;
}
ul#nav ul{
margin:0;
padding:0;
position:absolute;
width:100%;
}
ul#nav li li{
position:relative;
background-color:#0077AA;
display:block;
margin:0;
border-top:solid 1px #FFF;
width:100%;
font-size:11px;
}
ul#nav ul ul{
position:absolute;
left:100%;
top:0;
margin:0 0 0 1px;
width:100%;
}
Now, we will create the plugin which will use jQuery slideDown/Up effect for drop-down animation and giving one option for users to change the animation speed.
(function($) {
$.fn.jDropDown = function(settings) {
//option for speed with default value of 500 milliseconds
var config = {
‘speed’: ’500′
};
var settings = $.extend(config, settings);
this.each(function() {
var s = settings;
var mainNav = this;
//set css to all second ul to display none
$(mainNav).find(‘ul’).css({‘display’:'none’});
//hover event for each main li
$(mainNav).find(‘li’).hover(
function(){
$(this).find(‘ul:first’).slideDown(s.speed);
},
function(){
$(this).find(‘ul:first’).slideUp(s.speed);
}
);
});
return this;
};
})(jQuery);
This is all we have to do. Now, you can use this plugin by putting the following code in your html page between <head> and </head>
<script>
$(document).ready(function(){
$(‘ul#nav’).jDropDown({
‘speed’: 300
});
});
</script>
It is not too difficult to create your own jQuery plugin. I hope this tutorial will help you to write some cool plugins. If you have any doubt, feel free to write in the comment section below.
