DevSnippets
Subscribe by RSS
  • DevSnippets FEED
  • |
  • User Link Feed
  • |
  • Code Snippets
  • Home
  • Contact Us
  • About DevSnippets
  • Archives
  • Subscribe
  • Follow Us
  • CSS
  • jQuery
  • Menus
  • Layouts
  • WordPress
  • javascript
  • IE Hacks
  • Mootools
  • Prototype
  • WordPress Hacks
  • more →

Results

In {Article/ Menu-Post} -21st Oct- {26 Comments} 13 Awesome Javascript Animated Flash Like Menus

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

animated menu

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

jQuery Plugins

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

jQuery Plugins

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

jQuery Plugins

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

animated 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

animated menu

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

Download {Code}

7.Sliding JavaScript Menu Highlight

animated menu

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

animated menu

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

Download {Code} | View Demo

9. UvumiTools Dropdown Menu

animated 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

animated menu

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

animated 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

jQuery Plugins

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

Animated menus

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

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

What others said...

26 Comments, Add Comment or Ping



  1. An Jay says:
    October 21, 2008 at 7:32 am

    Nice collection of javascript menus.

  2. yamaniac says:
    October 21, 2008 at 10:48 am

    I like the 6th menu! Looks cartooney n cool!

  3. Tony Fleming says:
    October 21, 2008 at 11:58 am

    Will have to pass this along. Cool designs

  4. volkan karakus says:
    October 21, 2008 at 1:55 pm

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

  5. Simon says:
    October 21, 2008 at 3:14 pm

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

  6. toastedpixel.org says:
    October 21, 2008 at 11:25 pm

    Just what I was looking for.

    http://www.toastedpixel.org

  7. ivo ivan says:
    October 22, 2008 at 1:50 am

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

  8. Colin says:
    October 22, 2008 at 5:55 am

    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.

  9. Designer says:
    October 22, 2008 at 7:26 am

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

  10. aalmeida71 says:
    October 22, 2008 at 11:20 am

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

  11. Jason says:
    October 22, 2008 at 6:28 pm

    ivo ivan,
    Menumatic works even with javascript disabled. ;)

  12. Janckos says:
    October 23, 2008 at 1:43 pm

    excelente coleccion.

  13. Angel says:
    October 24, 2008 at 1:28 am

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

  14. Kris says:
    October 24, 2008 at 4:15 am

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

    That iPod one is very nice. I like that.

  15. Pattaya PG says:
    November 1, 2008 at 2:57 am

    Can anyone tell me for used AJAX in this

    Thanks

  16. zee says:
    November 2, 2008 at 4:29 pm

    nice collection bro i love it

  17. Web Design Norwich says:
    March 11, 2009 at 1:44 pm

    Thanks for providing these, very useful and good examples of deploying open source libraries

Trackbacks/Pingbacks

  • 13 menús dinámicos gracias a Javascript | aNieto2K
  • Deliggit.com | The social sites' most interesting urls
  • 13 Awesome Javascript Animated Flash Like Menus [DevSnippets]
  • Gareth Murran
  • 21 Most Wanted And Essential Resources Specially If You Are Developer - Opensource, Free and Useful Online Resources for Designers and Developers
  • dominiek.be » links for 2008-10-23
  • 16 formularios y 13 menús dinámicos AJAX | ..: Cristian Eslava | Diseño Gráfico / Web | Maquetación | Formación :..
  • Links (Octubre 24th - 13:34 - 14:03) | Buanzolandia
  • anime girl hentai
  • Tabs (27)
  • Forms (127)
  • Menu (59)
  • Tables (9)
  • Navigation (35)
  • ToolTips (22)
  • LightBox (39)
  • Calendar (9)
  • AutoComplete (13)
  • Accordion (15)
  • Sliders (38)
  • Gallery (80)
  • Image Effects (55)
  • Date & Time (15)
  • Charts (16)
  • Carousel (12)
  • Tag Clouds (1)
  • Links (1)
  • Layouts (75)
  • IE Hacks (19)
  • Image Sprites (6)
  • Sliding Door (7)
  • Techniques (81)
  • Image Effects (14)
  • Font Styles (22)
  • Positioning (5)
  • Menus (40)
  • Rounded Corner (19)
  • Tools (1)
  • Drop Shadows (1)
  • CSSFrameworks (2)
  • Mootools (83)
  • jQuery (317)
  • Prototype (22)
  • Scriptaculous (10)
  • Javascript (123)
  • javascript Framework (1)
  • LOG IN:

    Not a member? JOIN NOW!
     Username                   Password
    Remember me Recover password

Add a Snippet / Design News

Feb/09/2010

40 Examples of Cool Javascript

jenny
ToolTipsjQuery
JavaScript has blossomed so rightly. Since then, there are jquery, Mootools , Scriptallicious, Prototype etc..which ...
Feb/08/2010

Expandable Drop Down Ticker

ddrive
SlidersjQuery
A jQuery ticker script that can be viewed both sequentially and simultaneously, via drop down ...
Feb/08/2010

30 The Best jQuery plugins inspired...

psdeluxe
jQuery
The plugins in this article will allow you to insert in to your website very ...
Feb/08/2010

Drop-In Modals with CSS3

gardasee
Layouts
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help ...
Feb/08/2010

Dynamic headings for the blog title

Delicia
WordPress
An article presenting a little snippet which allows to dynamically asign h1/h2 tags to ...
Feb/08/2010

10 Amazing Jquery Navigation Menus

GraphicDesignBay
NavigationWordPress Layouts
If you want to create a navigation menu, that really stands out of the crowd, ...
Feb/08/2010

10 wordpress hacks & tricks that I...

Fatma
WordPressWordPress Hacks
There are many wordpress tweaks , hacks and tricks that we see everyday here are ...
Feb/08/2010

Awesome CSS3 & jQuery Slide Out...

Mary Lou
Rounded Corner
Here is an awesome little slide out button. The inspiration for that button came from ...
Feb/08/2010

Free Wordpress Theme Brick Wall

DynamicWP
WordPressWordPress Layouts
Today we released our new free wordpress theme "Brick Wall". A customized theme based Black ...
Feb/08/2010

How to add an option to Hybrid News...

Elio
WordPressWordPress Hacks
Tutorial covering the process of adding an option to the Hybrid News theme settings page.
More Code Snippets →

Design Community News

  • 30 Very Catchy Typography Design Concepts in Print Ads

    30 Very Catchy Typography Design Concepts in Print Ads
  • 9 Funniest JavaScript Effects

    9 Funniest JavaScript Effects
  • Quick photo editing – Online and FREE

    Quick photo editing – Online and FREE
  • Bring your websites alive: From Boring to Exciting!

    Bring your websites alive: From Boring to Exciting!
  • 20 Fonts Ideal For The iPhone And Other Mobile Screens

    20 Fonts Ideal For The iPhone And Other Mobile Screens
  • 9 Best iPhone Apps For iPhotographers

    9 Best iPhone Apps For iPhotographers
  • 34 Ways to bring Traffic to your Website or Blog

    34 Ways to bring Traffic to your Website or Blog
  • Photoshop tutorial. Chinese cookie

    Photoshop tutorial. Chinese cookie
  • History of 20 EPL Club Logos of 2010

    History of 20 EPL Club Logos of 2010
  • 30 Free and Fresh iPad Wallpapers

    30 Free and Fresh iPad Wallpapers
  • 100 Most Funny and Creative Advertisement Designs

    100 Most Funny and Creative Advertisement Designs
  • 50 Fantastic Examples Of Origami Art Work

    50 Fantastic Examples Of Origami Art Work
  • 3d Glossy Green Orbs Icons – Arrows

    3d Glossy Green Orbs Icons – Arrows
  • Learn How To Create A Clean Layout In Photoshop

    Learn How To Create A Clean Layout In Photoshop
More News →

Top ↑

Add a Snippet / Design News

Top Submitters

    • dnamic (135)
    • chosen (113)
    • Martin Ivanov (85)
    • ravindra (61)
    • tutorialfeed (54)
    • Noura Yehia (41)
    • Spider8411 (41)
    • dicky83 (39)
    • psdeluxe (32)
    • woork (31)
    • ddrive (27)
    • Oxp (24)
    • kailoon (23)
    • tech (23)
    • Mert TOL (22)
    • satbir (21)
    • vladocar (18)
    • impresslab (17)
    • spicywebdesign (17)
    • prlamnguyen (17)
    • Shazza (16)
  • © 2008-2009 DEVSNIPPETS | Made by Noura Yehia | Add Snippet | About| Subscribe
    In partnership with (mt) Media Temple