35 Free Ajax/Javascript Navigation Solutions

The article is split into the following categories: General Nav, Tabbed Menu, Tree-Style Menu and Dock Menus.

Apologies about the original title (I was trying to keep the title small).

Ajax/Javascript Navigation Menus

Ajax Menu SolutionsURL & Demo: Flickr like horizontal menu.
Description: This explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu.

Ajax Menu SolutionsURL & Demo: Digg-like nav bar using CSS.
Description: Navigation bar with rounded corners an sliding doors technique for background images, Digg inspired.

Ajax Menu SolutionsURL & Demo: Vertical Menu.
Description: A simple and lightweight prototype-based solution for vertical menu.

Ajax Menu SolutionsURL & Demo: Outlook Navigation Bar.
Description: Create an Outlook Navigation Bar using the ListView and Accordion Controls.

Ajax Menu SolutionsURL & Demo: jQuery suckerFish.
Description: Replicate Suckerfish Menus with jQuery.

Ajax Menu SolutionsURL & Demo: Sliding Menu.
Description: It is a very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype).

Ajax Menu SolutionsURL & Demo: LavaLamp.
Description: As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I LavaLamp is a step in that direction.

Ajax Menu SolutionsURL & Demo: Simple Javascript Accordions.
Description: The smallest accordion script is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible..

Ajax Menu SolutionsURL & Demo: onMenuOpen onMenuCollapse Events.
Description: This is a one-time effect that shows off the menu opening up and firing an event, and then finishing with another event. Just click begin to get the effect and refresh to see it again.

Ajax/Javascript Tree Style Menus

Ajax Menu SolutionsURL & Demo: treeView.
Description: Create a nice expanding and collapsing tree view control using jQuery.

Ajax Menu SolutionsURL & Demo: Reorder TreePanel.
Description: The Reorder TreePanel has basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files).

Ajax Menu SolutionsURL & Demo: Tree with Checkbox Nodes.
Description: An extension for Ext.tree.TreeNodeUI to allow nodes to be ‘checked’. Based on forum discussion and samples. Includes basic (read: crude) serialization to retrieve all of the checked nodes. It also extends Ext.tree.MultiSelectionModel to allow multiple nodes to be selected and then checked by pressing the space bar. Checks cascade, so checking a child will check parents up the tree, and clearing a parent checkbox will clear all of it’s children.

Ajax Tabbed Menu

Ajax Menu SolutionsURL & Demo: Tabbed Search Bar.
Description: e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.

Ajax Menu SolutionsURL & Demo: Yetii – Yet (E)Another JavaScript Tab Interface Implementation.
Description: Yetii – is a simple, yet functional tab interface implementation..

Ajax Menu SolutionsURL & Demo: Sliding Tabs.
Description: Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

URL & Demo: Ajax Tabs Reloaded.
Description: Ajax Tabs Reloaded has taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.

Ajax Menu SolutionsURL & Demo: MooTabs.
Description: MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.

Ajax Menu SolutionsURL & Demo: Floating window with tabs.
Description: The script is easy to set implement. The content of the windows is plain HTML and the window is created by calling one single javascript function.

Ajax Menu SolutionsURL & Demo: dhtmlxTabbar.
Description: dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.

Ajax Menu SolutionsURL & Demo: Tab Styled Accordion.
Description: A mootools Tab styled accordian.

Ajax Menu SolutionsURL & Demo: TabbedPane.js .
Description: TabbedPane.js is a short (20-line) JavaScript class that allows the creation of a dynamic AJAX tab interface. The controls and viewport are arbitrary, so it can be used to implement other interfaces, too.

Ajax Menu SolutionsURL & Demo: Tabs.
Description: Tabs – jQuery plugin for accessible, unobtrusive tabs.

Ajax Menu SolutionsURL & Demo: Tab Module – Draggable Implementation.
Description: The Draggable Tab widget allows tabs to be dragged (and dropped) between one or more modules.

Ajax/Javascript Navigation Menus – Docks

Ajax Menu SolutionsURL & Demo: URL & Demo: Fisheye Demo..
Description: A demo of the DojoX FisheyeList widget with Dojo.

Ajax Menu SolutionsURL & Demo: Corner Dock Navigation.
Description: Move your mouse over one of the smaller icons around the central one to move the docker. Placing your mouse on the icons to the left will move them all around clockwise and placing your mouse on the icons to the bottom will move them around anti clockwise. Each icon is a link and can link to anything in the normal way.

URL & Demo: Javascript Fisheye Menu.
Description: Javascript Fisheye Menu for Mootools version 1.

Ajax Menu SolutionsURL & Demo: CSS Dock Menu.
Description: It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom.

Ajax Menu SolutionsURL & Demo: A Mac OS X-style Dock In JavaScript.
Description: Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily.

Ajax Menu SolutionsURL & Demo: euDock in Javascript.
Description: euDock is an OPEN SOURCE (LGPL) javascript Emulation of Dock style MAC OS X bar.

Ajax/Javascript Menu Accordian Style

URL & Demo: Accordian Content Menu.
Description: A jQuery powered accordion content script. Group contents together and reveal them on demand when the user clicks on headers. Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and enable persistence so the state of the contents is preserved within a browser session.

Ajax Menu SolutionsURL & Demo: Accordion.
Description: This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

Ajax Menu SolutionsURL & Demo: Haccordion.
Description: It is very simple, with a few parameters: speed set the velocity of the animation, headerclass set another classname for header divs (by default “header”), contentclass set another classname for content divs (by default “content”), contentwidth is the final with of each content panel.

Ajax Menu SolutionsURL & Demo: HoverAccordion.
Description: This is yet another accordion script, except you don’t have to click to open one item, you just move your mouse over it.

Ajax Menu SolutionsURL & Demo: Accordion with color transition.
Description: A very smooth and stylish accordion with color transition example.

Author: (489 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.