35 Easy to use 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
URL & 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.
URL & Demo: Digg-like nav bar using CSS.
Description: Navigation bar with rounded corners an sliding doors technique for background images, Digg inspired.
URL & Demo: Vertical Menu.
Description: A simple and lightweight prototype-based solution for vertical menu.
URL & Demo: Outlook Navigation Bar.
Description: Create an Outlook Navigation Bar using the ListView and Accordion Controls.
URL & Demo: jQuery suckerFish.
Description: Replicate Suckerfish Menus with jQuery.
URL & Demo: Sliding Menu.
Description: It is a very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype).
URL & 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.
URL & 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..
URL & 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
URL & Demo: treeView.
Description: Create a nice expanding and collapsing tree view control using jQuery.
URL & 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).
URL & 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
URL & Demo: Tabbed Search Bar.
Description: e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.
URL & Demo: Yetii – Yet (E)Another JavaScript Tab Interface Implementation.
Description: Yetii – is a simple, yet functional tab interface implementation..
URL & 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.
URL & 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.
URL & 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.
URL & 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.
URL & Demo: Tab Styled Accordion.
Description: A mootools Tab styled accordian.
URL & 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.
URL & Demo: Tabs.
Description: Tabs – jQuery plugin for accessible, unobtrusive tabs.
URL & 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
URL & Demo: URL & Demo: Fisheye Demo..
Description: A demo of the DojoX FisheyeList widget with Dojo.
URL & 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.
URL & 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.
URL & 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.
URL & 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.
URL & 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.
URL & 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.
URL & 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.
URL & Demo: Accordion with color transition.
Description: A very smooth and stylish accordion with color transition example.
0 yorum:
Yorum Gönder