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 –

	

		

			
Home
			
About
				

					
First Submenu
					
Second Submenu
					
Third Submenu
					
Fourth Submenu
					
Fifth Submenu
				
			
			
Services
				

					
First Submenu
					
Second Submenu
					
Third Submenu
				
			
			
Portfolio
				

					
First Submenu
					
Second Submenu
					
Third Submenu
				
			
			
Contact
				

					
First Submenu
					
Second Submenu
					
Third Submenu
				
			
		
	

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