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.
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.
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.
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.
This is a slide menu based on an unordered list (<UL><LI>) and supports unlimited depth of items.
Drop Line Menus
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.
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.
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.
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.
Tree style Menus
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.
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
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.
With horizontal CSS tabs menu for dropdown tabs that supports second level drop down menu for each of tabs.
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.
A pretty multi level drop down menu.
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.
Tested in IE6, IE7, Firefox, Opera and Safari (PC).
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.
This is a menu which based on an unordered list (<UL><LI>). It make the menu easy to use and search engine friendly.
Just unlimited dropdown menu.
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 menus should be used in a horizontal orientation only with single dropdown level.
Chrome CSS Drop Down Menu
Other Menu Types
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 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 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.
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.
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.