JavaScript Framework Navigation Tutorials

- - Home, Tutorials

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 tutorials for 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 navigation needs. This article cover a wide range of Essential navigation 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.

Slide Down Menu

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

Sliding JavaScript Sidebar Menu

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.

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.

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

Other Nice Dropliners.

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.

Horizontal Dropline/Dropdown/Flyout Menu Using jQuery

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.

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

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

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)

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

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.

Superfish

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

Dropdown Menu Made with Scriptaculous/Prototype

A pretty multi level drop down menu.

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.

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

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

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

Unlimited Drop Menu

Just unlimited dropdown 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.

CSS Express Drop-Down Menus

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

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

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:

Sliding Top Menu With jQuery

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.

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.

Fancy Sliding Menu for Mootools

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.

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.

Waqas E. is an online media newbie based in Germany. Experimenting his way to success, Waqas loves to write about anything and everything, and has all the intentions to rule the world one day.

6 Comments to JavaScript Framework Navigation Tutorials