What is it ?
jQuery Live Menu is a jQuery plugin that allows you to create easily nice and animated menus.
Menu is opened on left or right click on the defined target. You can customize layout, effects and the tooltip design by jQuery parameters .
Just right click on this panel to test me
- Very easy to use : $('#target').liveMenu()
- Customize effects, speeds and delays
- Tooltips are positioned intelligently and they are fully customizable
- Smart browsers compatibility : more or less effects, but still functional !
Important : The icons are not sold with the plugin, they are only there for the example.
Icons examples credits : Pixeden - WebAppers.com
Demonstrations :
Left click :
View source codeHTML Code :
<a id="demo1" href="javascript:">Left click Demo</a>
JS Code :
$('#demo1').liveMenu({
items:[{
title: 'Share this by email',
image: 'Email.png',
click: function(){
$('#demo1').html('Clicked : Email !');
}
},{
title: 'Stats',
image: 'Chart.png',
click: function(){
$('#demo1').html('Clicked : Stats !');
}
},{
title: 'Share this',
image: 'Comment.png',
click: function(){
$('#demo1').html('Clicked : Share !');
}
},{
title: 'More informations',
image: 'Info.png',
click: function(){
$('#demo1').html('Clicked : Informations !');
}
},{
title: 'Download this',
image: 'Save.png',
click: function(){
$('#demo1').html('Clicked : Download !');
}
},{
title: 'View portfolio',
image: 'Picture.png',
click: function(){
$('#demo1').html('Clicked : Portfolio !');
}
},{
title: 'Modify this',
image: 'Modify.png',
click: function(){
$('#demo1').html('Clicked : Modify !');
}
},{
title: 'Search',
image: 'Search.png',
click: function(){
$('#demo1').html('Clicked : Search !');
}
}]
});
Slide to the top
Right click and rect layout :
View source codeHTML Code :
<div id="demo2" ></div>
JS Code :
$('#demo2').liveMenu({
button: 'right',
position: 'mouse',
menuSize: 80,
tooltip:{
gradient: '#2e2e2e 0%,#424242 100%',
arrowColor: '#333333',
color: '#DDD',
radius: 5
},
items:[{
title: 'Twitter',
image: 'twitter02_dark.png'
},{
title: 'Facebook',
image: 'facebook_dark.png'
},{
title: 'Google +',
image: 'google_dark.png'
},{
title: 'Picasa',
image: 'picasa_dark.png'
},{
title: 'R.S.S',
image: 'rss_dark.png'
},{
title: 'Deviant Art',
image: 'deviantart_dark.png'
}]
});
Slide to the top
Right Click and circle layout :
View source codeJS Code :
HTML Code :
<div id="demo3" ></div>
$('#demo3').liveMenu({
button: 'right',
position: 'mouse',
menuSize: 70,
tooltip:{
gradient: '#bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%',
arrowColor: '#72aa00',
color: '#0e2901',
radius: 5
},
items:[{
title: 'Twitter',
image: 'twitter02_dark.png'
},{
title: 'Facebook',
image: 'facebook_dark.png'
},{
title: 'Google +',
image: 'google_dark.png'
},{
title: 'Picasa',
image: 'picasa_dark.png'
},{
title: 'R.S.S',
image: 'rss_dark.png'
},{
title: 'Deviant Art',
image: 'deviantart_dark.png'
}]
});
Slide to the top
Initialization
To import jQuery Live Menu, just include the css and the js file after jquery, in the head :
<head>
...
<script src="js/jquery-1.6.4.min.js"></script>
<link href="css/jquery.liveMenu.css" rel="stylesheet" />
<script src="js/jquery.liveMenu.js"></script>
...
</head>
Then use it like any jQuery plugin :
<script>
$(document).ready(function(){
$(body).liveMenu({ ... });
});
</script>
Slide to the top
Parameters :
This is the plugin parameters list :
// target must be a container (div,body,p,a ...)$('#target').liveMenu( { // String | path to the images imagesPath: 'icons/', // "left" or "right" | mouse button to open the menu button 'right', // "fixed" or "mouse" | menu position position: 'mouse', // Array | list of the menu items items:[ /* Examples of items */ { // String | The item title title: 'Twitter', // String | Image file name image: 'twitter02_dark.png', // String URL | Link, can be let empty href: 'http://www.twitter.com', // "_self" or "_blank" | the link target target '_blank', // Method | Executed on the item click click: function(){} },{ title: 'Facebook', image: 'facebook_dark.png', click: function() { alert('FB clicked !');} } /* end of items */ ], // "rect" or "circle" | sets the menu layout layout: 'circle', // Int | rect width or circle radius (depends of layout) menuSize: 100, // Float between 0 and 1 | default opacity of the items opacity: 1, // Float between 0 and 1 | default scale of the items scale: 0.7, behind:{ // Float between 0 and 1 | opacity of the items while they are behind opacity: 0.8, // Float between 0 and 1 | scale of the items while they are behind scale: 0.6 }, hide: { // Int | hide speed of the items while the menu is closing speed: 300, // Int | delay between each items fade while the menu is closing delay: 50 }, hover: { // Int | speed of the item hover effect speed: 170, // Int | opacity of the item hover effect opacity: 1 }, show: { // Int | hide speed of the items while the menu is showing speed: 150, // Int | delay between each items fade while the menu is showing delay: 50 }, tooltip: { // Hex color | tooltip arrow background color arrowColor: '#666', // Hex color | tooltip text color color: '#333', // Gradient | tooltip background gradient gradient: '#FFFFFF 0%, #666666 100%', // Int | tooltip radius radius: 3, // Int | delay before showing tooltip delay: 800, // Int | tooltip show and hide speed speed: 200 }, // Method | executed while menu is showed onShow: function(){}, // Method | executed while menu is closed onClose: function(){} });
You can change them after initialisation like this :
// sets the items opacity $('#target').data('liveMenu').settings.opacity = 0.5; // refresh the menu $('#target').data('liveMenu').update();
Slide to the top
Methods :
You can interact with the plugin :
// open the menu $('#target').data('liveMenu').showMenu(); // close the menu $('#target').data('liveMenu').hideMenu();