Demo
Download

What is it?

Sweet Menu takes an ordinary unordered list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system. Simply include the jQuery library, the Sweet Menu plugin, and make a simple jQuery call and you are on your way to a sweet looking menu!

How to use it!

The usage of Sweet Menu is like any jQuery method. Basically, call the jQuery object and pass in your selector with our method call of sweetMenu(). The most basic call would like like this:

$(selector).sweetMenu();

Please keep in mind that this method is meant to only work on one DOM element passed in, and because of that, if you use a jQuery selector that selects multiple DOM elements, Sweet Menu will only work on the first DOM element jQuery gets. Sweet Menu does return the jQuery object based on the selector used.

When calling Sweet Menu, you want to make sure you point it at a list of unordered links, the HTML structure should look like this:

<ul id="mySweetMenu">
	<li>
		<a href="#link1">
			Link 1
		</a></li>
	<li>
		<a href="#link2">
			Link 2
		</a></li>
</ul>

Arguments

There is only one argument for Sweet Menu, and it is an optional argument. The one argument is a list of optional properties. Here are the properties, with descriptions and examples, that can be used with the Sweet Menu plugin.

Property Description
top
Type: integer Default: 80

This is the number of pixels from the top of the screen that the first menu item will appear.

$(selector).sweetMenu({top: 80});
position
Type: string Default: fixed Options: fixed or absolute

This is the CSS position of the menu as a whole. By selecting the fixed option, the menu stays fixed to the screen, meaning when you scroll down the menu scrolls too. By selecting the absolute option, the menu will stay hooked to the top of the screen, so when you scroll down the menu will eventually disappear.

$(selector).sweetMenu({position: 'fixed'});
iconSize
Type: integer Default: 0

This is a short-hand property for passing in square icons. It sets the iconSizeWidth and iconSizeHeight properties to the integer passed in to this property. Note, size is meant to be measured in pixels.

$(selector).sweetMenu({iconSize: 20});
iconSizeWidth
Type: integer Default: 0

This is the width in pixels of icons being used, if any, by the menu.

$(selector).sweetMenu({iconSizeWidth: 40});
iconSizeHeight
Type: integer Default: 0

This is the height in pixels of the icons being used, if any, by the menu.

$(selector).sweetMenu({iconSizeHeight: 20});
padding
Type: integer Default: 10

This is the padding in pixels between the text, the icons and the borders of the menu item.

Padding Illustrated

$(selector).sweetMenu({padding: 8});
verticalSpacing
Type: integer Default: 10

This is the vertical distance, in pixels, between each menu item.

$(selector).sweetMenu({verticalSpacing: 5});
duration
Type: mixed Default: 200

This is the duration of the animation when the menu pops “in” or “out”. Anything you can pass into the jQuery animate method, you can pass into this property.

$(selector).sweetMenu({duration: 'slow'});
// or
$(selector).sweetMenu({duration: 250});
easing
Type: string Default: linear

Any easing function registered to jQuery can be used here.

$(selector).sweetMenu({easing: 'easeOutBounce'});
anchorClass
Type: string Default: sweetMenuAnchor

This is the class name that is appended to the anchor of the menu item. It is only used for additional or extra styling. Note, any styling that interferes with the function of the menu will be overridden by the plugin. For instance, if you define padding in your CSS for the anchor class, the plugin will still use the padding defaulted by the plugin or what was passed in.

$(selector).sweetMenu({anchorClass: 'myClass'});
openFinished
Type: function Default: function(){ }

This function is called after the menu item is fully displayed.

$(selector).sweetMenu({openFinished: function()
{
	alert('The tab is open!');
}});
// or
var myFunction = function()
{
	alert('The tab is open!');
}
$(selector).sweetMenu({openFinished: myFunction});
closeFinished
Type: function Default: function(){ }

This function is called after the menu item is “closed” or no longer fully displayed.

$(selector).sweetMenu({closeFinished: function()
{
	alert('The tab is closed!');
}});
// or
var myFunction = function()
{
	alert('The tab is closed!');
}
$(selector).sweetMenu({closeFinished: myFunction});
icons
Type: array Default: []

This property defines image paths for any icons to be used in the menu. The icon paths should be in the form of a string and will be applied to the menu items in the order they are passed in. If there are not enough icons for all of the menu items, the menu items at the end of the menu list will not have icons. If there are too many icons, the extra icons are ignored.

$(selector).sweetMenu({icons: ['one.png', 'two.png', 'three.png']});

Versions

  • Verstion 1.0 — Initial version