CSS3 Menu is a free application for creating navigations using the CSS3 properties and no JavaScript.
The application has both Windows + Mac versions and it is possible to set the styles of the outputs easily.
Menus are generated in a HTML list structure, can be vertical or horizontal and have multiple sub-menus.
Also, it can display the previews of the navigations on every step which is a nice feature that speeds up the development.
Requirements: Windows or Mac
Compatibility: All Major Browsers (except IE6)
We know that using CSS sprites has a very positive effect on website speed by decreasing the amount of HTTP requests.
Nav-o-Matic is a free online service which makes generating navigation sprites easier.
It simply asks you to upload the image of the navigation which has 2 rows (for normal and hover states, like this one), add your guides, define the CSS/image folders and you're done.
Compatibility: All Major Browsers (except IE)
jStackMenu is a jQuery UI widget which transforms the children of any element into a beautiful stack menu.
The menu opens with a smooth animation and it is possible to control:
- when it opens and closes
- the direction it opens
- the size of the arc
- the time it takes to open
In order customize it more, it also has support for events.
The widget uses CSS transforms for creating the arcing and for browsers that doesn't support the feature, it displays the menu as a straight line.
Requirements: jQuery and jQuery UI
Compatibility: All Major Browsers (browsers without CSS transitions can not apply the arcing)
Jeegoocontext is a jQuery plugin for creating highly customizable context menus.
It transforms unordered lists into multi-level, smartly positioned navigations.
Multiple context menus can be created on the same page & they can be customized via CSS.
It has customizable time-delays for submenus' disappear values which makes browsing them easier.
The plugin also has a workaround for Opera not allowing right-click overrides & works with it as well.
Requirements: jQuery
Compatibility: All Major Browsers
SlickMap CSS is a stylesheet for transforming HTML unordered lists into attractive sitemaps.
The stylesheet can easily fit into most of the websites as it supports up to 3-level navigations.
It also provides a functional visual output by displaying the URLs besides the titles. For a demo of SlickMap CSS, click here.
ProtoFish is an advanced dropdown menu script which supports multilevel navigations & built with Prototype.
The script is lightweight (1.3kb minimized), unobtrusive & cross-browser.
The hover class used & delay effect of the menus can be customized with ease.
It is accessible via keyboard using the TAB key & multiple instances of ProtoFish menus can be used on the same webpage.
For demos with various number of of levels & delay effects, click here.
Requirements: Prototype 1.6+
Compatibility: All Major Browsers
jsTree is a cross-browser, free & flexible JavaScript tree component with various features.
It can create the tree from the following data sources:
Different types of nodes (open, close, rename, create, delete) can be created & supports various callbacks (onchange, oncreate, ondelete, onload, etc …).
A great feature is async loading for creating dynamic trees by simply mentioning an URL for requesting data when needed.
Other features of jsTree:
- drag & drop of nodes
- multiple node selection
- multilingual – same tree in as many languages as you like
- ability to customize the look & feel
- animated open/close of nodes
- optional keyboard navigation
- ability to move nodes between multiple trees
The component can also work as a jQuery plugin.
Requirements: No Requirements
Compatibility: All Major Browsers
jQuery Menu is a solid menu system that helps creating dropdown, iPod drilldown and flyout styled navigations easily.
It is the updated & much improved version of the iPod-like menu mentioned here (WRD post).
The menu system uses a hierarchical unordered list for creating the menus & sub-menus.
It is ready with ThemeRoller which makes it very easy to customize the look and has ARIA (Accessible Rich Internet Applications Suite) support.
With various configuration options & ease of use, jQuery Menu is definitely a very helpful solution for creating menus.
Requirements: jQuery, jQuery UI
Compatibility: All Major Browsers
Leigeber is presenting a standalone accordion script that has multi-level support.
The script is lightweight (1.4kb) & it is an updated version of an accordion script by the same author (see WRD post).
The accordion is called with a single line JavaScript function & if wanted, the levels can be toggled from outside links besides the title of each level.
The script is compatible with all major browsers.
Requirements: No Requirements
Compatibility: All Major Browsers
jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way.
As the length of a breadcrumb menu may be very long & the common method used for this problem is limiting th eamount of menus used, jBreadCrumb follows another route.
It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.
This is a better navigation in means of usability & SEO.
Usage is not complicated & it only requires the jQuery Easing plugin.
Requirements: jQuery, jQuery Easing Plugin
Compatibility: All Major Browsers
