20 Great JavaScript Navigation Demos and Examples

The site's menu navigation, not only helps visitors navigate on your site easily but also it's an indispensable decoration to make the Web layout becomes more eye-catching and beautiful. This free JavaScript article presents to you the list of 20 menu navigation demos and examples that are built by some terrific and unique techniques.


Sampled by © JavaScriptBank.com

In this article you'll discover some terrific and unique JavaScript-powered navigation techniques and examples.

Tip: clicking on each image will take you directly to the demo page of the navigation menu technique if it's on a separate page. Their names will take you to their project web page.

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.

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.

View Demo Page

3. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door 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.

View Demo Page

5. Vertical Sliding jQuery Menu

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

View Demo Page

6. Perspective Tabs

You can have scrolling tabs with animation using this technique.

View Demo Page

7. Vertical Digg-like Menu

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

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.

9. Fisheye Menu

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

10. Simple JavaScript Accordions

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

View Demo Page

11. Sliding JavaScript Menu Highlight

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

12. Fading Menu - Replacing Content

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

View Demo Page

13. Simple Multi-level Drop-Down Menu

A simple JavaScript drop down menu tutorial.

14. Using jQuery for Background Image Animations

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

View Demo Page

15. Mootools Redux

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

View Demo Page

16. HoverAccordion/Sidebar Menu

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

17. UvumiTools Dropdown Menu

Another JavaScript menu based on MooTools with lots of features.

18. jQuery UI Tabs

Easily separate content using this tab example.

View Demo Page

19. Proto.Menu: Right Click Menu

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

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.

View Demo Page

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
Top 10 Best JavaScript eBooks that Beginners should Learn
50+ Beautiful Resources of HTML Form using CSS and JavaScript
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com