- menu tutorials
-
j_birch - Superfish
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes (and degrades to) an existing pure CSS drop-down menu. Suckerfish-style hover support for IE6. Timed delay on mouseout. Animation of sub-menu reveal. Keyboard accessibility. Supports the hoverIntent plugin. Drop shadows for capable browsers. Optional callback functions.
-
HTML Dog - Sons of Suckerfish
Creating a flexible, easily expandable drop down menu with CSS and a little bit of JavaScript. Twixt.us - suckerFish has a simple jQuery script to replicate Suckerfish menus.
-
A List Apart - Hybrid CSS drop-downs
Another tutorial on creating a flexible tabbed menu system, but with visible secondary options for ease of orientation.
- DHTML drop-down & fly-out menus
-
P.I.E - Deluxe drop-down menu
A DHTML drop-down menu system for web site navigation using CSS.
-
P.I.E - flyout menu
Floated CSS flyouts. Scripting is only used to make IE/win obey :hover when applied to non-links. The navs are floated opposite, sometimes touching the clearing element below.
-
UDM4 - Accessible dropdown menu
DHTML drop-down menu with a combination of accessibility, usability and feature-rich design.
-
SEOConsultants.com - drop-down menu
DHTML drop-down menu with a nice design. This horizontal dropdown and popout CSS menu uses the "whatever:hover" behavior file.
-
Tjkdesign.com - Keyboard friendly dropdown
CSS drop-down, fly-out menu built on semantic nested lists. In Internet Explorer Win (versions 5 and 6), sub-menus become horizontal and are fully accessible. It's script-free with modern browsers, uses unobtrusive Javascript, hack-free, keyboard-friendly, pointing device-friendly, and degrades nicely.
-
Icant.co.uk - Flexible css menu
A tabbed navigation system using three images which works well with increased font sizes.
-
Sgclark.com - Mini slide
Using sme JavaScript - instead of having the bottom indicators "appear" when you hover over the navigation link, the indicator slides between the navigation choices.
-
Mojavelinux.com - Liquid dropdown menu
DHTML drop-down menu for a liquid layout. DOM Menu uses 'hash' structure to build the menu and its submens on demand.
-
Onlinetools.org - YADM menu
YADM is an accessible DHTML dropdown/flyout/explorer solution with complete separation of CSS and JavaScript.
-
Devthought.com - Fancy menu
A horizontal navigation property for the rounded box in the background that follows your mouseIt uses a new LI item that will act as the moving background - setting position: relative to the unordered list, and position: absolute to the moving item. There's some Javascript side calculations to positionate it correctly. Ganesh's 700 bytes JQuery version: Lavalamp menu.
-
Kriesi.at - kwicks menu
Apple-flavored Leopard-text-indent style menubuilt with jQuery. A List Apart's 'CSS Sprites 2' has a nice tutorial for applying jQuery with CSS sprite technique for producing menu state effects.
- accordion menus
-
Jquery.bassistance.de - Jquery accorion menus
Jquery accorion menus. Arrow icon displaying menu state. Location-based state-saving. Container can be a definition list, with header dt, content dd for styling. More details in the tutorial: Learningjquery.com - More showing more hiding.
Jquery
Accordion
Navigation
-
Evaria.com - Jquery accorion menu
Jquery accorion menu based mainly on the jQuery plugin: Accordion, with open/close up & down arrows displayed and nested sub menus.
Jquery
Accordion
Navigation
-
Dezinerfolio.com - Simple accorion menu
A small accordion script which is extremely simple and easy to integrate. Doesn't require any framework and fully cross-browser compatible.
Accordion
Navigation
-
Dynamicdrive.com - Slashdot accorion menu
Configure the menu in a multitude of ways, such as which sub menus to expand by default, whether to persist menu states using cookies, to the speed in which menu items expand/ collapse.
Accordion
Navigation
-
Stickmanlabs.com - accorion menu
A lightweight accordion that is built with prototype and works properly in every browser.
Prototype
Accordion
Navigation
-
Onlinetools.org - YUI dom collapse
YUIDomCollapse is a script built upon the Yahoo User Interface library. It scans the document for elements with a CSS class name of trigger and if it's not a link it will alternately show and hide the next element when you activate the element (either by clicking with a mouse, or hitting enter on the keyboard after tabbing to it).
YUI
Accordion
Navigation
-
Artviper.eu - Mootools menu
Bars that move out on hover and span submenus on click. Nice design. Uses mootools.
MooTools
Accordion
Navigation
-
Chrisesler.com - Hacked mootool accordion
Another mootools accordion menu with some handy variable options and nice styling.
MooTools
Accordion
Navigation
-
Solutoire.com - Accordion with color transition
Accordion with color transition using mootools library.
MooTools
Accordion
Navigation
-
Dev.portalzine.de - Horizontal accordion
Horizontal accordion menu.
Jquery
Accordion
Navigation
-
Nyokiglitter.com - Tabbed accorion interface
A tabbed box of set height with content that 'wipes' ala an accordion to the next tab's content.
MooTools
Accordion
Navigation
-
Phatfusion.net - Image menu
Horizontal menu, reveals more of the image as you rollover it. 2 optional onClick events - open & close. Href passed to onClick events. Select item to pre-open.
MooTools
Accordion
Navigation
-
Aariadne.com - Advanced Ext JS accorion menu
Accordian menu using the Ext JS library. Has drag drop accordian bars. Very nicely styled with inline icons and buttons. Nice button options for menu states.
Ext.JS
Drag-drop
Accordion
Navigation
- dynamic menus
-
A List Apart - Dynamically Conjuring Drop-Down Navigation
A tutorial on creating a drop down menu for site navigation. Outlines how to use JavaScript or PHP on the HTML link element to create the contents dynamically.