BeautyMenu: A simple jQuery drop down menu plugin
Hey Folks, this is a very simple one level drop down menu plugin for you. Usage of this plugin is very simple. This is version 1. In next version I will make it for multi-level menu items.
You can check demo before jump into the code.
Now, it’s time to dive into the codes.
In section, write the following code:
Here, the css is for styling the menu. I also used two plugins – hoverIntent and easing.
In section –
Now, the css part is:
*{margin:0; padding:0;} ul{list-style-type:none;} a{text-decoration:none;} body{font-family:arial; font-size:12px;} #wrapper{width:600px; margin:0 auto;} #menu{height:25px; background:#fff} #menu > ul > li{float:left; } #menu ul li{position:relative;} #menu > ul > li > a{color:#333; line-height:30px; display:block; background:#FFFFFF; position:relative; z-index:30;} #menu > ul > li > a.active{background:url(../images/arrow.png) bottom center no-repeat #fff;} #menu ul li a{color:#333333; font-weight:bold; text-transform:uppercase;} #menu > ul > li > a > span{border-top:30px solid #fff; display:block; margin:0 15px; border-bottom:4px solid #3399CC; padding:0 10px; } #menu > ul > li > ul > li{line-height:30px;} ul.submenu{margin-left:15px; background:#f5f5f5; border-radius:0 0 5px 5px;} #menu ul li ul.submenu li a{display:block; padding-left:10px; color:#666; text-transform:capitalize} ul.submenu li a:hover{color:#333; background:#eee} #menu ul li:last-child ul{right:15px;}
The beautyMenu plugin code is:
// Utility
if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
function F() {};
F.prototype = obj;
return new F();
};
}
//Plugin
(function($, window, document, undefined) {
var dropDownMenu = {
init: function(options, elem) {
var self = this;
self.elem = elem;
self.$elem = $(elem);
self.options = $.extend( {}, $.fn.beautyMenu.options, options );
self.hideChild();
},
hideChild: function() {
var self = this;
self.$elem.find('ul > li > a').each(function() {
var $this = $(this);
$this.html('' + $this.text() + '');
});
self.$elem.find('ul li ul').each(function() {
var $this = $(this);
$this.css({
position: 'absolute',
top: '-' + $this.height() + 'px',
width: self.options.childWidth
}).addClass('submenu');
});
self.display();
},
display: function() {
var self = this;
var menuItem = $(self.$elem.find('ul > li'));
menuItem.hoverIntent(function() {
$this = $(this);
$this
.children('a').addClass(self.options.hoverClass)
.end().find('ul')
.animate({
top: $this.outerHeight()
}, self.options.subMenuShowSpeed, self.options.subMenuShowEffect);
}, function() {
$this = $(this);
$this
.children('a').removeClass(self.options.hoverClass)
.end().find('ul')
.animate({
top: -$this.find('ul').height()
});
});
}
};
$.fn.beautyMenu = function( options ) {
return this.each(function() {
var __dropDownMenu = Object.create( dropDownMenu );
__dropDownMenu.init( options, this );
});
};
$.fn.beautyMenu.options = {
childWidth: 150,
hoverClass: 'active',
subMenuShowSpeed: 1000,
subMenuShowEffect: 'easeOutBounce'
};
})(jQuery, window, document);
Now, it’s time to call the plugin. You have four parameter to set, if you want you can leave these alone – then it will get its default values.
Put the following code into head section:
$(function() { $("#menu").beautyMenu({ childWidth: 160, hoverClass: 'active' subMenuShowSpeed: 1000, subMenuShowEffect: 'easeOutBounce' }); });
or just simply
$(function() { $("#menu").beautyMenu(); });
You can download the source code here.
This plugin is free to use and modify, just keep the author info at the top