jQuery UI Image Menu
You certainly know the famous phatfusion image menu using the mootools library. Here is a port for jQuery.
example
features
- 2 optional click events - open & close
- 2 optional menu mouse events - enter & leave
- the link element containing the href passed to click and menu change events
- stays open when clicked
- closes when clicked again
- select item to pre-open
- optionally rotates through menu items autoamtically (new)
- ability to fade out the non active items (new)
usage
$(document).ready(function(){
$('#imageMenu').imagemenu({
openWidth:310,
menuenter: function(evt,el) {
console.log("opened "+el);
}
});
});
options
- clickopen
- a function to execute when an item is clicked open. The event and the <a>-element is send to the function.
- clickclose
- same as above but when clicked closed.
- menuenter
- a function to execute when the mouse enters a menu item - including the optionally default opened one. The event and the <a>-element is send to the function.
- menuleave
- same as above but when mouse leaves the menu item.
- openWidth
- width in px of the items when rolled over. default: 200
- easing
- name of the easing effect (string). If you use jquery.ui.effects, you can have all the easings there. default: swing
- duration
- the length of the transition in milliseconds. default: 400
- open
- the id or index of the item to open on start. default: null
- interval (new)
- an interval in milliseconds to switch to the next menu item automatically (auto rotation). default: null
- fadeOutCollapsed (new)
- set the amount of opacity to fade to when menu items get collapsed because mouse hovers over another menu item (e.g. 0.7). default: null
- border
- number of pixels to add to the last menu item to reduce flickering in IE. default: 0
requirements
or minified
downloads