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.

Sliding/Gliding Menus

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

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.

Floating HTML Menu Using jQuery and CSS

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.

Accordion Menu Using jQuery

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.

jQuery Vertical Slide Fixed Height Menu #6

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.

Unobtrusive Slide Out Menu

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.

Sliding JavaScript Sidebar Menu

Drop Line Menus

Professional Dropline #5

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.

jQuery Dropline With Current Selection

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.

Tree style Menus

jQuery – Menu Tree

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.

jQuery Plugin: Treeview

Multi Level and Multi Direction Menus

CSS Drop-Down Menu Framework

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.

JavaScript Dropdown Menu with Multi Levels

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.

MenuMatic

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.

Drop Down Tabs (5 styles)

Smooth Navigational Menu

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.

Dropdownmenu Made with Scriptaculous/Prototype

Professional Slide Drop #1

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.

Professional Dropdown #2

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.

List Based Menu with Images

Unlimited Drop Menu

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

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.

Chrome CSS Drop Down Menu

Other Menu Types

Vimeo-like Top Navigation

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:

A Circular Menu with Sub-Menus

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).

Collapsable Menu

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.

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 it? Share it.

Meet the Author:

Yanuar Prisantoso

Web Designer/developers with over three years of experience working with a several agency. He is also the Editor of Denbagus.net a weblog that provides Web Technology resources , web 2.0, web apps, web technology trends, open source, free stuff , tips and trick. You can follow on Twitter or contact him through his website.

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.