Submit your widget
HomeMenu & NavigationjQuery BubbleUp for Spice Up Your Menu

jQuery BubbleUp for Spice Up Your Menu

Created 14 years ago   Views 26637   downloads 5905    Author n/a
jQuery BubbleUp for Spice Up Your Menu
View DemoDownload
332
Share |

BubbleUp is a jQuery plugin released from a jQuery tutorial Learning jQuery: Your First jQuery Plugin,which helps you to create your first jQuery plugin. It's not just for demonstration, it's useable. With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect, although this plugin's effect is not awesome like that, it's light weight for such a similar zooming effect.

 

Features:

  • Your menu will be scaled in any size via the option.
  • You decide to enable the tooltip or not.
  • The tooltip would be customizable by font, size and color.
  • The speed of the transition (in/out) can be controlled.

 

Usage

 

Make sure you already implement jQuery library. I recommend to use jQuery hosted from Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

 

 

Now you need to link the javascript file that you created above into your web page. For this, we’ll use this code:

<script type="text/javascript" src="js/bubbleup.jquery.js"></script>

 

 

To make the plugin work, we need to use this code below. You can insert it anywhere you want as long as it’s inside the <head> or <body> tags:

<script type="text/javascript">
$(function(){
    $("ul#menu li img").bubbleup();
});
</script>

 

 

Another example with option enable:

<script type="text/javascript">
$(function(){
    $("div#demo ul#menu li img").bubbleup({tooltip: true, scale:64});
});
</script>

 

You might also like