DHTML site navigation menus
- See also: Tree Menus
- See also: DOM Collapse
- See also: CSS Menus
- See also: PHP Menus
- See also: Current / active navigation highlight
- menu tutorials
-
HTML Dog - Sons of Suckerfish
Creating a flexible, easily expandable drop down menu with CSS and a little bit of JavaScript.
-
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.
- accordian menus
-
Stickmanlabs.com - Accorian menu
A lightweight accordion that is built with prototype and works properly in every browser.
-
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).
-
Dezinerfolio.com - Simple accorian menu
A small accordion script which is extremely simple and easy to integrate. Doesn't require any framework and fully cross-browser compatible.
-
Dynamicdrive.com - Slashdot accorian 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.
-
Jquery.bassistance.de - Jquery accorian menus
Jquery accorian 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.
-
Artviper.eu - Mootools menu
Bars that move out on hover and span submenus on click. Nice design. Uses mootools.
-
Chrisesler.com - Hacked mootool accordion
Another mootools accordion menu with some handy variable options and nice styling.
- Solutoire.com - Accordion with color transition
- Dev.portalzine.de - Horizontal accordion
-
Nyokiglitter.com - Tabbed accorian interface
A tabbed box of set height with content that 'wipes' ala an accordion to the next tab's content.
-
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.
-
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.
- 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.



