Code Snippet Gallery

In {Article, Menu-Post} -21st Oct- {28 Comments}

13 Awesome Javascript Animated Flash Like Menus

So why use flash for Web Menus when javascript has enough power to achieve similar effects.

Every web designer tries to be creative when it comes to designing the main navigation of the website. Today we would like to present you 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Popular javascript libraries are used: jQuery, Scriptaculous and Mootools.

Lets take a look at recent examples of these …

1. Vertical Animated Menus

1. Nice animated menu using CSS and Mootools

This tutorial illustrates how to implement a nice animated menu using Mootoolsand some lines of CSS and HTML code ready to reuse in your project.

Download {Code}| Live Demo

2. jQuery iPod-style Drilldown Menu

A jQuery iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.

Demo can be found here.

3. MenuMatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.

Download {Code} | Demo can be found here.

4. BDC DrillDown Menu

The BDC DrillDown Menu is a compact, hierarchical drilldown menu implemented as a jQuery plugin. A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time.

Download {Code} | Demo can be found here.

2. Horizontal Animated Menus

5. Mootools animated sidebar menu

This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

Download {Code}| Live Demo

6.Simple Animated Menu for Mootools 1.2

A really nice animated menu created using Mootools, with a flash hover effect of an arrow.

Download {Code}

7.Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”.

Download {Code}

8. Fancy Sliding Menu for Mootools

The menu is developed in Mootools with a nice sliding effect on each tab.

Download {Code} | View Demo

9. UvumiTools Dropdown Menu

A simple and lightweight menu that can be easily updated by simply editing a <ul> HTML element. Created using Mootools.

Download {Code}

10. Superfish

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu and adds Suckerfish-style hover effect. Features include: Timed delay on mouseout, Animation of sub-menu reveal, Supports the hoverIntent plugin, drop shadows for capable browsers and more…

Download {Code} | Demo can be found here

11. AJAX Dropdown Tab Menu

e24TabMenu is a plugin written for Scriptaculous. It is a tab menu that expands collapse smoothly.

Download {Code} | Demo can be found here

12. Using jQuery for Background Image Animations

Snook wrote a straignforward script to produce a nice menu background image animation. The animation needs to run when the user moves their mouse over and out of the navigation. The key thing to note is that any animation is stopped before attempting to animate again. This avoids animations queuing up from repeatedly moving the mouse in and out of the element.

Download {Code}

13. A Sliding Menu

It is a very simple sliding menu using the effects provided by Interface. The defauly behavior of the menu is to hide after 1000ms (1 sec.) and to display when your mouse hovers over the “menu” label. The menu will also auto-hide after 1000ms when the mouse leaves the menu area. Most of these values, including the sliding effect, can be customized.

Download {Code} | Demo can be found here

Tags: Menu

Category: Article, Menu-Post | Leave a Comment | 28 Comments

What others said...

28 Comments, Add Comment or Ping

»An Jay

{October 21st, 2008}

Nice collection of javascript menus.
»yamaniac

{October 21st, 2008}

I like the 6th menu! Looks cartooney n cool!
»Tony Fleming

{October 21st, 2008}

Will have to pass this along. Cool designs
»volkan karakus

{October 21st, 2008}

Great list, especially i liked MenuMatic, thank you very much.
»Simon

{October 21st, 2008}

Great list, I like #12, I’ll try to design & publish some free menus based on this example.
»toastedpixel.org

{October 21st, 2008}

Just what I was looking for.

http://www.toastedpixel.org
»ivo ivan

{October 22nd, 2008}

Great list and cool effects. My problem is accesiblity with disallowed javascript.
»Colin

{October 22nd, 2008}

Nice selection - Mootools has all the coolest animations c’mon jQuery! I seem to remember having compatibility trouble with Superfish, it may have been related to the thing that is fixed by position:static in IE7, but I can’t remember.
»Designer

{October 22nd, 2008}

i was desperately looking out for some good dropdown menus…… and am really grateful to you guys to provide such a good collection… thanks
»aalmeida71

{October 22nd, 2008}

It’s a very good collection of JavaScript menus a good reference to come back to.
»Jason

{October 22nd, 2008}

ivo ivan,
Menumatic works even with javascript disabled.
»Janckos

{October 23rd, 2008}

excelente coleccion.
»Angel

{October 24th, 2008}

Excellent list. Will look forward to using and modifying some of these int he future
»Kris

{October 24th, 2008}

Cool round up.
Its nice to see some creative menu ideas.

That iPod one is very nice. I like that.
»Pattaya PG

{November 1st, 2008}

Can anyone tell me for used AJAX in this

Thanks
»zee

{November 2nd, 2008}

nice collection bro i love it
»peace life

{December 21st, 2008}

This is cool and ready to use, thanks for sharing..