New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF2+ IE7+ Opr8+

jQuery Gooey Menu

Author: Dynamic Drive

Description: jQuery Gooey Menu uses the popular "lava lamp" effect to create CSS menus with a moving gooey background effect. Whenever the mouse moves over a menu item, the desired style that indicates the selected menu item follows the mouse to that item, smoothly highlighting the currently active item. Each menu is simply a standard UL list and very easy to customize, including the gooey effect itself.

The gooey effect is simply an absolutely positioned LI element dynamically added to the end of the menu. It is styled using just CSS to create the desired gooey menu look. Groovy!

Demos:




Directions Developer's View

Step 1: This script uses the following external files. Download them below (right click, and select "Save As"):

Step 2: Add the below code to the HEAD section of your page:

Select All

Step 2: Then, add the below sample markup to your page, which contains the 4 UL menus you see above:

Select All

Basic menu setup

To set up a Gooey Menu, simply define the manu's markup on the page, then call the function gooeymenu.setup() to initialize the effect on it:

<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>

gooeymenu.setup() accepts the following options, of which the "id" option is the only required one:

option Description
id: "string"

Required

 Specifies the ID of the menu's UL container. Required. For example:

<script>
gooeymenu.setup({id:'gooeymenu1'})
</script>
selectitem: interger

defaults to undefined

 Sets the menu item that should be selected by default with the gooey effect when the page loads. This also affects which menu item the effect snaps back to when the mouse rolls out of the menu entirely. It should be an integer, where 0=1st menu item, 1=2nd menu item etc.

See "Two ways to set default selected menu item" below as well.
fx: "string"

defaults to "easeOutBack"

 Sets the easing type of the gooey effect. The default is "easeOutBack", which creates that elastic forth then back animation. The two other possible types are "swing" and "linear". For example:

<script>
gooeymenu.setup({id:'gooeymenu1', fx:'swing'})
</script>
fxtime: milliseconds

defaults to 500

 Sets the duration of the gooey effect, in milliseconds. Defaults to 500, or 1/2 second.
snapdelay: milliseconds

defaults to 300

 Sets the delay before the gooey effect snaps back to the default selected menu item (if one is specified) when the mouse moves out of the menu entirely. Defaults to 300 milliseconds.

Two ways to set default selected menu item

There are two ways to select the menu item that gets the gooey effect by default when the page loads. It also affects which menu item the effect snaps back to when the mouse rolls out of the menu entirely. The first method is just to modify the menu's HTML markup, by adding a CSS class of "selected" into the desired menu item:

<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

That's it- the "JavaScript" item will be selected automatically when the menu is initialized.

The second method is to define the "selectitem" parameter when calling gooeymenu.setup() to initialize the menu, for example:

<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:0})
</script>

This causes the very first menu item to be selected.

If both the 1st and 2nd method of selecting a default menu item is detected, the 2nd method will always override the 1st. If neither is used, then no menu item will be selected from the get go.

Customizing the look of the gooey effect

Here comes the fun (I promise!) part- customizing the gooey effect itself. As mentioned at the very top, the effect is simply created by styling an absolutely positioned LI element that's dynamically added to the end of the menu. Inside the .js file, this markup is stored in the line:

effectmarkup: '<li class="active"></li>',

Not that you have to concern yourself with that. Customizing the look of the gooey effect all takes place inside your .css file, by default gooeymenu.css. Specifically, you'll want to style the menu's "li.active" element. Peering inside gooeymenu.css, the following shows how the gooey style of the gel buttons menu is created:

Target rule for the Gooey Gel Buttons Menu:

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
background:lightblue;
background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x;
}

As you can see, nothing magical here. "position:absolute" should always be defined at a minimum. The rest is styling this "active" LI so it looks like a gel button. I'm using CSS3's multiple backgrounds capability to accomplish this, by defining a left, center, and right background image that's sliced from a button image to re-create the look. For browsers that don't support multiple background images, they will fallback to a solid blackground color of lightblue instead. The other considerations are simply to ensure the rest of the menu work well with the gel button background, such as giving the menu links sufficient padding to they are tall enough to show the gel button background without it being partially clipped.

The following show how the "frame" style of the last "Frame" menu example is created:

Target rule for the Gooey Frames Menu:

ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid orange;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}

The frame itself is rendered just with CSS's border property, while the subtle shadow beneath it using CSS3's box shadow. The other consideration in this case is to make sure the 4 padding (top/bottom, left/right) for each menu link is such that the "frame" appears centered around the link.

As you can see, styling and customizing the gooey effect for your menu is actually very straightforward. Just remember you're styling a LI with CSS class "active" that gets added to the end of the menu and is absolutely positioned. Any style you apply to this LI gets shown beneath the menu links as the former LI moves around behind the menu.

Bonus- Four gel button color variations

Here's a bonus for folks not so comfortable around a graphics editor- below are 4 sets of the gel button image used in the first menu above, each sliced up into the 3 requisite parts for your convenience:

gelbuttons.zip