30 Useful Tutorial for JavaScript Framework Navigation

Web site or blog is nothing without navigation. You should place good and user friendly navigation to making it easy for your visitors to get around fast on the most elemental elements of web design and development simply.

It is hard for most web developers to create a dynamic navigation solution which is fit for all browsers. The obvious approach to solving this issue is via using one of the very popular JavaScript Frameworks as anyone else.

Such as jQuery, prototype (and script.aculo.us), Dojo and mootools that free to use, very mature and commonly used and there are tons of brilliant scripts available for your navigations needs. This article cover a wide range of Essential navigations scripts where most of them supported by JavaScript Frameworks.

For those, who don’t know what is JavaScript? and what it can do? then JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.

You can also follow the link below for detailed introduction.

You may be interested in the following related articles as well.

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Sliding/Gliding Menus

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

instantShift - Javascript  Navigation Tutorials

Nowadays there are a competing host of JavaScript libraries around these days. Though I prefer jQuery, I have always liked the way the menu on MooTools worked. So in this tutorial well get that same effect.

Official Link

Floating HTML Menu Using jQuery and CSS

instantShift - Javascript  Navigation Tutorials

For all of you who want to deal with long web pages and need to scroll to the top for the menu, this is a nice alternative: floating menus which move as you scroll a page. With HTML language also CSS and jQuery, and it is fully W3C-compliant.

Official Link Demo

Accordion Menu Using jQuery

instantShift - Javascript  Navigation Tutorials

In this post, you will get how you can create a fancy accordion menu using jQuery. In this post, you will see two examples of accordion. First menu visibility get toggled on clicking on the header while the another menu visibility and get toggled when mouse is moved over this menu.

Official Link

jQuery Vertical Slide Fixed Height Menu #6

instantShift - Javascript  Navigation Tutorials

This is an Expanding simple vertical slide menu. This one allow you to have fixed, non-expanding top level links and the ability to click to open and click to close a top level sub list. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

You should make a donation for use of this menu.

Official Link

Unobtrusive Slide Out Menu

instantShift - Javascript  Navigation Tutorials

In this DHTML menu script, the submenu slides is to left or to the right. The menu is based on an unordered list (<UL><LI>) that makes it search engine friendly and visible to users with JavaScript disabled.

Official Link Demo I II III

Slide Down Menu

instantShift - Javascript  Navigation Tutorials

This is a slide menu based on an unordered list (<UL><LI>) and supports unlimited depth of items.

Official Link Demo I II

Sliding JavaScript Sidebar Menu

instantShift - Javascript  Navigation Tutorials

It uses mootools due to the smoothness of their effects, however, this could just as easily be developed in script.aculo.us or other JavaScript libraries.

Official Link

 

Drop Line Menus

Professional Dropline #5

instantShift - Javascript  Navigation Tutorials

This Dropline menu us hover instead of click to open (and keep) open submenu. With the top level and the dropline centered within the containing div. Using hovers instead, will make the click allow the top levels to have links.

Just hover over a top level item to dropdown the associated sub line. The top level will stay black to show that it has been selected. Hover the same item to close the sub list or a another top level item to close the current sub level and open a new one. “Home” and “Privacy policy” don’t have sub levels.

The ability to have a selected top level open on page entry is included, that is demonstrated in this menu where “Sales” is selected on page entry (demo).

Tested in IE6, IE7, Firefox, Opera and Safari (PC). Visit stunicholls.com to find more than 30 great menu scripts.

Other Nice Dropliners.

Official Link

jQuery Dropline With Current Selection

instantShift - Javascript  Navigation Tutorials

A dropline menu with have the ability to set the current page and the menu to open with this highlighted. If you hover over any of the other menu options then the current trail is removed and the new trail displayed. Once you move the mouse of the menu then the current selection will re-appear.

This script make the need to use jQuery to control the display of the droplines decrease and is styled using CSS.

All browsers except IE6 have an opaque background to the droplines. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

Official Link

Horizontal Dropline/Dropdown/Flyout Menu Using jQuery

instantShift - Javascript  Navigation Tutorials

Dropline Menu with dropsown. It will close automatically after 2 seconds if the mouse moves out off any of the menu items. This feature can be modified to collapse back and keep the dropline.

This JavaScript has been tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

You should make a donation for use of this menu.

Official Link

 

Tree style Menus

jQuery – Menu Tree

instantShift - Javascript  Navigation Tutorials

A simple four level vertical sliding menu tree. Clicking any of the orange color list items and it will expand that sub level and contract any other open level. Re-clicking the same list item will close that level and any sub levels which are open. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

Official Link

jQuery Plugin: Treeview

instantShift - Javascript  Navigation Tutorials

This is a Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

Official Link

 

Multi Level and Multi Direction Menus

CSS Drop-Down Menu Framework

instantShift - Javascript  Navigation Tutorials

This is a very flexible and good looking navigation menu. Can be transformed just by changing CSS class name. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.

Official Link Demo

JavaScript Dropdown Menu with Multi Levels

instantShift - Javascript  Navigation Tutorials

Just 1.2 KB in weight includes features animation, active header persistence, easy implementation and multiple instance support. This JavaScript dropdown menu will make your web site prettier because this script has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

Official Link Demo

MenuMatic

instantShift - Javascript  Navigation Tutorials

MenuMatic is a MooTools 1.2 class which take a sematic ordered or unordered list of links and turns it into a dynamic drop down menu. For user who not use JavaScript, it will fall back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Official Link

Drop Down Tabs (5 styles)

instantShift - Javascript  Navigation Tutorials

With horizontal CSS tabs menu for dropdown tabs that supports second level drop down menu for each of tabs.

Official Link

Smooth Navigational Menu

instantShift - Javascript  Navigation Tutorials

It is a multi level navigation menu, CSS list based on menu powered by jQuery which make smooth affair website navigation. And that’s is good thing to give the important role of this element in any site.

The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek slide plus fade in transition which applied during the unveiling of the sub menus.

Official Link

Superfish

instantShift - Javascript  Navigation Tutorials

It is an enhanced Suckerfish-style menu jQuery plugin which take an existing pure CSS dropdown menu (without JavaScript, it will degrades gracefully).

Official Link

Dropdownmenu Made with Scriptaculous/Prototype

instantShift - Javascript  Navigation Tutorials

A pretty multi level drop down menu.

Official Link

Professional Slide Drop #1

instantShift - Javascript  Navigation Tutorials

A simple dropdown menu which has a vertical sliding action. With a Hover over a top level link to slide down the submenu and it does slide down, not just appear in a vertical shutter action, and then hover over the same top level to close another top level to open that one and close the previous one. You can take your mouse over the top level items to open and close them and they’ll work simultaneously.

This uses simple JavaScript routine to read the mouse hover and slide the submenu list either up or down depending on the current state of the submenu.

Tested in IE6, IE7, Firefox, Opera and Safari (PC).

Official Link

Professional Dropdown #2

instantShift - Javascript  Navigation Tutorials

Good looking menu although it is unclear if it is still maintained. Tested in IE5.5, IE6, IE7, Firefox, Netscape, Opera, Mozilla, Safari (PC) and Safari (iPod Touch). Testing in recent browser versions is recommended before using this. You have to make a donation to use this menu. Visit stunicholls.com where you will find more than 30 great menu scripts.

Official Link

List Based Menu with Images

instantShift - Javascript  Navigation Tutorials

This is a menu which based on an unordered list (<UL><LI>). It make the menu easy to use and search engine friendly.

Official Link

Unlimited Drop Menu

instantShift - Javascript  Navigation Tutorials

Just unlimited dropdown menu.

Official Link

Create a Multilevel Dropdown Menu with CSS and Improve it via jQuery

instantShift - Javascript  Navigation Tutorials

The first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also well known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.

Official Link

CSS Express Drop-Down Menus

instantShift - Javascript  Navigation Tutorials

CSS Express menus should be used in a horizontal orientation only with single dropdown level.

Official Link

Chrome CSS Drop Down Menu

instantShift - Javascript  Navigation Tutorials

Chrome Menu is a CSS and JavaScript hybrid dropdown menu. It’s configurable and search engine friendly.

Official Link

 

Other Menu Types

Vimeo-like Top Navigation

instantShift - Javascript  Navigation Tutorials

Like a Janko creatures on Almost of the same top navigation implemented on Vimeo.com. That drops down when you hover over search box. And give you different search options which you can choose and narrow your search.

With simple base CSS drop down menu based on unordered list tutorial. The structure is described visually in the image below:

instantShift - Javascript  Navigation Tutorials

Official Link Demo Download Source Code

Sliding Top Menu With jQuery

instantShift - Javascript  Navigation Tutorials

sliding top menu is script with built of jQuery that can be fired through the open & close button or with any tag with the related class name.

You can use it as an info box, login area & more.

Official Link Demo

A Circular Menu with Sub-Menus

instantShift - Javascript  Navigation Tutorials

A really nice menu adds a sub menu level of smaller icons in a circular pattern within the top level circle. There’s also the facility to add a simple description for each icon. This menu has been tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome. (Send e-mail to author to get zip).

Official Link

Fancy Sliding Menu for Mootools

instantShift - Javascript  Navigation Tutorials

The Fancy Sliding Tab Menu is run on Mootools with an idle state listener to bring all of the tabs back to their normal state after a desired amount of time without mouse movement on the window.

Official Link Demo Download Source Code

Collapsable Menu

instantShift - Javascript  Navigation Tutorials

This tutorial will show to you how to use Mootools to create menus. The result of one of the menus is interesting and gives you a collapsable box with an animated effect on mouse over.. You will get many good posts here which explaining coding stuff in a very relaxed and easy to understand way.

Official Link Demo Download Source Code

Find Something Missing?

While compiling this list, it’s always a possibility that we missed some other great JavaScript framework navigation sources. Feel free to share it with us.

Like the article? Share it.

LinkedIn Pinterest

21 Comments

  1. Those are prety need samples thanks for sharing

  2. …. a great collection of “very useful” tutorials for website navigation…. thanks very much for showcasing them all here at “instantShift” !!

  3. nice collect some to http://ajax.wespai.com

  4. I would say only a few of that list offer “good and user friendly navigation” – the rest are just a confusing mass of links, that look like a rollover-fest.

    Why hide your links? Why hide options in awkward flop out lists? If your navigation needs a 3 deep list appearing all at once there is something wrong.

  5. i must say you guys are doing.. very good job.. all in one place..
    today i fwd this links to my friends..

  6. Thanks for this useful collections

  7. Great list of useful navigation.

  8. Great list , :)

  9. nice navigation…thanks for share

  10. You may also check dhtmlx library for JavaScript navigation components such as menu, accordion, tree, and tabbar at http://dhtmlx.com

  11. Thanks for this useful collections

  12. Thanks for the list, I’m sure that all of these tutorials hold something useful for your readers.

  13. The treeview is what I like most, I actually I need this tutorial for my current project. Thank you.

  14. I like list. I know this is not only useful me to but to everyone else here.

  15. Thanks for navigation menu collection………………

  16. Based on this post, jQuery is one of the best to use for effects that look like flash. I use mootools to achieve the same effect, and now i’m reconsidering jQuery for my next project. Anyways, thank you for the share, I hope I’ll be able to use one of those in my 2nd project.

  17. I use mootools to achieve the same effect, and now i’m reconsidering jQuery for my next project!!

  18. great resource list, I’m contemplating actually learning JavaScript. Any ideas where to begin?

  19. I’m not ealsyi impressed. . . but that’s impressing me! :)

  20. Good tutorials. Very impressive. Thanks for sharing these resources. Learned a lot.
    http://www.hermeshandbagoutlet.com

  21. hi a pleasant day to you, i like your nav menu floating on top, can please post a tutorial for this. thanks.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *