Meeting the needs of your business from a distance

Javascript Menus

by Mark Shiffer 4. May 2009 14:35

I recently found this article here. I am reprinting the menu techniques here for my later reference. It has been a while since I’ve done a good deal of new website development, but I think this information could come in handy when I get back to it.

1. MenuMatic

This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented.

menumatic

View Demo Page

2. Animated Menu using jQuery

A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.

Animated Menu using jQuery

View Demo Page

3. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.

Garagedoor Effect using jQuery

View Demo Page

4. JGlide Menu

A very unique menu that floats on the page. Users can drag it to a position they desire.

JGlide Menu

View Demo Page

5. Vertical Sliding jQuery Menu

HVDesigns presents a menu that drops down and reveals more links.

Sliding jQuery Menu

View Demo Page

6. Perspective Tabs

You can have scrolling tabs with animation using this technique.

Perspective Tabs

View Demo Page

7. Vertical Digg-like Menu

Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.

Vertical Digg-like Menu

8. LavaLamp

When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.

LavaLamp

9. Fisheye Menu

If you’re a big fan of the Mac dock you will enjoy this menu.

Fisheye Menu

10. Simple JavaScript Accordions

A great technique for integrating accordion-style menus into your site.

Simple JavaScript Accordions

View Demo Page

11. Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy technique for highlighting menu items.

Sliding JavaScript Menu Highlight

12. Fading Menu - Replacing Content

This technique allows you to fade in and fade out menu items.

Fading Menu - Replacing Content

View Demo Page

13. Simple Multi-level Drop-Down Menu

A simple JavaScript drop down menu tutorial.

Simple Multi-level Drop-Down Menu

14. Using jQuery for Background Image Animations

A technique for creating animated menus using jQuery and CSS background-position properties.

Using jQuery for Background Image Animations

View Demo Page

15. Mootools Redux

A menu using MooTools that expands the link’s font size when you mouse over the item.

Mootools Redux

View Demo Page

16. HoverAccordion/Sidebar Menu

This is an accordion plugin which can be used as a vertical sidebar menu too.

Using jQuery for Background Image Animations

17. UvumiTools Dropdown Menu

Another JavaScript menu based on MooTools with lots of features.

UvumiTools Dropdown Menu

18. jQuery UI Tabs

Easily separate content using this tab example.

jQuery UI Tabs

View Demo Page

19. Proto.Menu: Right Click Menu

A customizable right-click menu written on top of the Prototype framework.

Proto.Menu: Right Click Menu

20. Accessible Expanding and Collapsing menu

This menu example allows you have two levels of navigation. When you click on main category the subcategory expands.

Accessible Expanding and Collapsing menu

View Demo Page

Tags:

Programming | Research | Websites

Comments

Add comment


(Will show your Gravatar icon)

  Country flag


  • Comment
  • Preview
Loading



Copyright © 2001-2012 MS Consulting, Inc. All Rights Reserved.