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.

You may also read:  How to add login logout link in wordpress menu

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 ;)

You may also like

Leave a Reply