Various amazing JavaScript navigation technologies

Because javascript can process interaction with users, using JavaScript provides a better user experience. In this article, you can see some horrible and unique navigation bars produced by JavaScript. (Related reading: Best practices for perfect HTML navigation bar)

1. menumatic

This example shows a vertical or horizontal drop-down menu navigation bar.

Demo address: http://greengeckodesign.com/menumatic

2. Animation button menu created by jquery

When the mouse passes, the button will feel down.

Demo address: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

3. jquery shutter door special effect navigation bar

Gaya Kessler designed such a shutter door navigation bar, which is quite cool.

Demo address: http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/

4. jglide menu

A unique flat menu, the entire menu can be dragged at will.

Demo address: http://sonicradish.com/labs/jGlideMenu/current? Src = asl_lab

5. jquery Vertical Slide menu

Hvdesigns design this drop-down slide menu.

Demo address: http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/

 

6. Perspective tabs

This technology is cool, a little like the iPhone. you can scroll the navigation bar with the mouse.

Demo address: http://www.mattweltman.com/sliding_tabs.html

7. digg.com drop-down menu

The digg.com drop-down menu only uses very small JavaScript code.

Demo address: http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

8. lavalamp

When the mouse is over, a small shadow tail is on the menu. Previously, such technology was basically completed through flash.

Demo address: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

9. Fish Eye menu

When the mouse goes by, the icon becomes larger. This technology is quite good.

Demo address: http://marcgrabanski.com/articles/fisheye-javascript-menu

10. Simple JavaScript folding menu

A very good folding menu.

Demo address: http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

 

11. Highlighted slide menu

This special effect is similar to 8th.

Demo address: http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

12. Highlighted menu

When the mouse goes over, the menu item is highlighted. When there is no mouse, it is dimmed.

Demo address: http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

13. Simple multi-level drop-down menu

This is a tutorial to teach you how to make this menu.

Demo address: http://javascript-array.com/scripts/simple_drop_down_menu/

14. Background Image animation menu created by jquery

Demo address: http://snook.ca/archives/javascript/jquery-bg-image-animations/

15. mootools Redux

A fish-eye navigation bar created using mootools.

Demo address: http://www.chromasynthetic.com/blog/

 

16. Folding sidebar menu

Demo address: http://berndmatzner.de/jquery/hoveraccordion/

17. uvumitools drop-down menu

Another drop-down menu based on mootools.

Demo address: http://uvumitools.com/dropdown.html

18. jquery UI tabs

The tab page created using jquery.

Demo address: http://stilbuero.de/jquery/tabs_3/

19. Right-click Proto. Menu

Right-click the menu created using the prototype framework.

Demo address: http://kangax.github.com/proto.menu/

20. Expand/collapse menu

A menu that supports two layers is similar to a tree.

Demo address: http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/

Address: http://www.ziyue.info/20%E4%B8%AA%E4%BC%98%E7%A7%80%E7%9A%84javascript%E5%AF%BC%E8%88%AA%E6%8A%80%E6%9C%AF/