|
Navigation is key to any web site or blog. Good and user friendly
navigation making it easy for your visitors to get around fast is
simply one of the most elemental elements of web design and
development. It is possible to create user-friendly horizontal or
vertical navigation menus using CSS and there are hundreds of scripts
and tutorials available online to learn this technique. By adding
Javascript it possible to create more interactive, more dynamic and
more flexible navigation but even if you find working with both CSS and
Javascript pretty simple you're facing the never ending browser
compatibility issue. It is simply too hard for most web developers to
create a dynamic navigation solution that is fit for purpose in all
relevant browsers. The obvious approach to solving this issue is to use
one of the very popular Javascript Frameworks as anyone else. jQuery, prototype (and script.aculo.us), Dojo and mootools
are all free to use, very mature and commonly used and there are tons
of brilliant scripts available for addressing your navigations needs.
This article covers a wide range of Essential navigations scripts where
most of them are supported by Javascript Frameworks.
Multi Level and (Multi Direction)
This is a very flexible and good looking menu. Can be transformed by
changing CSS class name only. Available transformations: horizontal,
vertical left-to-right, vertical right-to-left, horizontal linear,
horizontal upwards.
Main features:
- Modular, with themes. Not only HTML is separated from CSS, but even
CSS definitions are categorized into structural and thematic types.
Thus creating a new css drop-down menu means creating only a new theme
since structure is permanent. What is more, creating a new theme is
easy with available templates and takes 10-15 mins.
- Easily deployable. The code and files are well organized. Available
channels to hook up to your CMS or other tools as well as existing
websites in XHTML format.
- Easily transformable. Can be transformed by changing class name
only. Available transformations: horizontal, vertical left-to-right,
vertical right-to-left, horizontal linear, horizontal upwards.
- Cross browser. Configurations available for Windows Internet
Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later,
Apple Safari 2 or later, Google Chrome 1, etc.
- JavaScript only for IE. Minimal JavaScript code only for IE 6 or
earlier. Can be used with popular JavaScript libraries Jquery or
Scriptaculous. Everything else is pure CSS.
Demos: Flickr ultimate horizontal | Flickr horizontal linear | Flickr horizontal upward | Flickr vertical left-to-right | Flickr vertical right-to-left
Download: source code
This multi-level drop down menu script weighs in
at only 1.2 KB. It features animation, active header persistence, easy
implementation and multiple instance support. This script has been
tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.
Click here for the demo | Download source code
Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs.
MenuMatic is a MooTools 1.2 class that takes a
sematic ordered or unordered list of links and turns it into a dynamic
drop down menu system. For users without javascript, it falls back on a
CSS menu system based on Matthew Carroll's keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.
Features Include:
- - Search Engine Friendly
- - Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys
- - Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given 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 is applied during
the unveiling of the sub menus.
A multi level drop down menu.
Superfish is an enhanced Suckerfish-style menu jQuery plugin that
takes an existing pure CSS drop-down menu (so it degrades gracefully
without JavaScript).
Good looking menu but it is unclear if it is still maintained.
Tested in IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari
(PC) and Safari (iPod Touch). Testing in recent browser versions is
recommended before using it. A donation for use of this menu is
required. Visit stunicholls.com where you find more than 30 great menu scripts.
Simple drop down menu that has a vertical sliding action. Hover over
a top level link to slide down the submenu, and it does slide down, not
just appear using a vertical shutter action, and then hover over the
same top level to close or another top level to open that one and close
the previous one. You can run your mouse over the top level items to
open and close them and they will all work simultaneously.
This uses a simple javascript routine to read the mouse hovers and
slide the sub menu list either up or down depending on the current
state of the sub menu.
Tested in IE6, IE7, Firefox, Opera and Safari (PC).
This is a menu based on an unordered list (<UL><LI>). It makes the menu easy to use and friendly to search engines.
CSS Express menus should only be used in a horizontal orientation with a single drop-down level.
Chrome Menu is a CSS and JavaScript hybrid drop down menu. It's easy to configure and search engine friendly.
The first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.
Drop Line Menus
This Dropline menu uses hover instead of click to open (and keep)
open a sub menu. With the top level and the dropline centered within
the containing div. Using hovers instead of click will allow the top
levels to have links.
Just hover over a top level item to drop down 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 different top level item
to close the current sub level and open a new one. 'Home' and 'Privacy
policy' do not have sub levels.
The ability to have a selected top level open on page entry is
included, which 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 where you find more than 30 great menu scripts.
Other Nice Dropliners.
A dropline menu with the ability to set the 'current' page and have
the menu 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 ff the menu then the current
seletion will re-appear.
This script makes minimal use of jQuery to control the display of the droplines 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.
A donation for use of this menu is required.
Dropline Menu with dropsown. It will automatically be close after 2
seconds if the mouse moves off any of the menu items. This 'feature'
can be modified to collapse back to keep the dropline.
Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.
A donation for use of this menu is required.
Sliding/Gliding Menus
A jQuery nested menus, based on dynamic "AJAX" responses. The menu can also be dragged/dropped.
As you know there are a host of competing javascript libraries
around these days. Though I prefer jQuery, I've always liked the way
the menu on MooTools worked. So in this tutorial we'll recreate that
same effect.
For all of us who deal with long web pages and need to scroll to the
top for the menu, here's a nice alternative: floating menus that move
as you scroll a page. This is done using HTML, CSS and jQuery, and it's
fully W3C-compliant.
Expanding simple vertical slide menu. This one allows 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.
A donation for use of this menu is required.
In this post I'll show you how can you create fancy accordion menu
using jQuery. In this post, you'll see two examples of accordion. First
menu's visibility get's toggled on clicking on the header while the
another menu's visibility get's toogled when mouse is moved over it.
A slide menu based on an unordered list (<UL><LI>). It supports unlimited depth of items.
Info and download | Demo | Demo 2
In this DHTML menu script, the submenu slides to left or to the
right. The menu is based on an unordered list(<UL><LI>)
which makes it search engine friendly and visible to users with
Javascript disabled.
Info and download | Demo | Demo 2 | Demo 3
Tree style Menus
Just a simple four level vertical sliding menu tree. Clicking any of
the 'orange' list items 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 that are open.
Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery.
You can create a customized, fully-interactive file tree with as little
as one line of JavaScript code. Currently, server-side connector
scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso.
What i like about this menu, is its ability to style icons based on
file extension and using AJAX to fetch file information on the fly.
More over you can customize expand/collapse event and speeds.
View Demo | Download source code
Lightweight and flexible transformation of an unordered list into an
expandable and collapsable tree, great for unobtrusive navigation
enhancements.
Other Menu Types
This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.
You can also use it as an info box, login area & more.
.
Almost the same top navigation implemented on Vimeo.com is created by Janko.
Best thing about it, is the menu that drops down when you hover search
box. It offers you different search options that you can choose and
narrow your search.
The base for this tutorial is simple CSS drop down menu based on
unordered list. The structure is visually described in the image below:
Demo | Download source code
A different but really nice menu adds a sub menu level of smaller
icons in a circular pattern within the top level circle. There is also
the facility to add a simple description of each icon. Tested in IE6,
IE7, Firefox, Opera, Safari (PC) and Google Chrome. (send e-mail to
author to get zip)
This is really a tutorial showing 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. Besides this
being a great "Navigation" script I would like to mention that Woork is
a great blog that I follow myself. You will find many good posts here
explaining coding stuff in a very relaxed and easy to understand way.
The Fancy Sliding Tab Menu runs on Mootools with an
idle state listener to bring all the tabs back to their normal state
after a desired amount of time without mouse movement on the window.
View Demo | Download source code
|