Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

The mother of all CSS menu lists, tutorials and generators

Below is a semi-definitive list of CSS menu lists, CSS menu tutorials, and CSS menu generator web sites. This mother-of-all CSS navigation menu bookmarks post is here in part for your consumption, but also so I have a single convenient place of reference for myself … while I put the finishing touches on my travelblog (blogJordan.com) & wiki (wiki.blogjordan.com)  … in somewhat of an order of preference:

CSS menu example lists:

Stu Nicholl’s – CSSplay – CSS only menus
A comprehensive list of cutting edge cascading style sheet menu experiments and more, all in CSS
CSS-Based Navigation Menus: Modern Solutions
This page provides a listing of navigation menus that are intuitive, precise and easy-to-use; all employing CSS.
Top 71 CSS Menus Navigation Tabs
eConsultant’s list of the top 71 CSS menus navigation tabs for web developer’s.
Top 71 CSS Menus
WebmasterTalk: Articles / Tutorials on lists, menus, navigations and tabs.
8 web menus you just can’t miss
8 CSS and Ajax web menus you just can’t miss
Free Menu Designs – e-lusion.com
CSS menus free for all
14 Free Vertical CSS Menus at ExplodingBoy
ExplodingBoy – a weblog about web design, CSS, and life.
30 Free CSS Based Navigation Menus
a list CSS based navigation menus collection, it includes 30 various styles of navigation menus, vertical menus, Javascript powered menus and tab menus.
Free CSS Navigation Menu Designs at ExplodingBoy
ExplodingBoy – a weblog about web design, CSS, and life.
More Free CSS Navigation Menu Designs at ExplodingBoy
ExplodingBoy – a weblog about web design, CSS, and life.
CSS Tabs and CSS Navigation Menus Showcase
CSS Showcase is a gallery of over 70 css-based navigation menus, tabs and css navigation techniques. Compiled and updated by Vitaly Friedman.
Collection of Web 2.0 Navigation Menus (in German)
A list of ‘modern menu navigation’ using CSS that deals efficiently with images (sliding windows?).

CSS menu how-to & tutorial pages:

Listamatic: one list, many options
Perhaps the ultimate list of examples in using CSS and a simple list to create radically different list options.
Listamatic2: nested list options
same as Listmatic … only in nested list option flavors.
CSS and round corners: Making accessible menu tabs
Find out how to lose the box layout of your CSS pages and make great menu tabs.
A List Apart: Articles: Suckerfish Dropdowns
a standards-compliant, accessible, cross-browser compatible method of coding dropdown menus
A List Apart: Articles: CSS Design: Taming Lists
CSS Design: taming (X)HTML lists, creating great-looking navigational menus and other visual effects.
CSS Menu Tutorial
A tutorial from SEOConsultants on how to do horizontal and vertical CSS menus.
Pure CSS Popups
Like the title says CSS popup menus in CSS.
Making a menu using image replacement
make a menu made of images, using a popular CSS image replacement solution.
How to center a tabbed horizontal CSS menu | Strictly CSS
This article shows and explains a different method for centering a horizontal aligned tabbed CSS menu without using any width at all on the menu. The menus demonstrated are using unordered lists and background images.
Dynamic Drive CSS Library- Horizontal CSS Menus
original, practical CSS codes and examples such as CSS menus to give your site a visual boast.
CSS Entry : CSS Step Menus
Cody Lindley, a web developer living in Boise Idaho, shows how to create step-wise menus for wizards all in CSS.
Free Menu Designs – e-lusion.com
CSS menus free for all
Rollover CSS Image Menu
Roll-over image menu with only lovely CSS.
Tabbed Navigation Using CSS
how to create low-bandwidth tab navigation on a web page using CSS.
Fast Rollovers Without Preload
css rollovers using fast image switching, with no preload.
Free CSS Navigation Menu Designs at exploding-boy.com
Free CSS Navigation Menu Designs at exploding-boy.com
Free CSS Navigation Menu Designs 2 at exploding-boy.com
Free CSS Navigation Menu Designs 2 at exploding-boy.com
Hoverbox Menu
create a large rollover image for each menu item, overlapping the neighbouring menu items and other elements on the page.
Pure Horizontal CSS Drop Down Menu
This a pure CSS solution which is keyboard and browsers friendly.
Inline Mini Tabs
Use inline boxes to create nice, simple, easy to read and navigate mini-tabs
Mini-Tab Shapes
Underscore your navigation with graphical clues, excellent for ‘you are here’ type wizard navigation
Drop-Down Marker
yet another pure CSS drop down menu. But instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label
Navigation Matrix Reloaded
Dan Rubin from SuperfluousBanter clues us in on CSS menus.
Alsacreations, examples and menus galleries in CSS and XHTML
Courses and tutorials in CSS, XHTML compliant menus – in French.

CSS menu generator pages:

List-O-Matic
From Accessify’s Developer Tools – generate CSS-styled navigation menus based on list items
CSS Menu Generator
Webmaster Toolkit’s simple but effective CSS menu generator (many based on listmatic).
CSS Creator Light Weight Multi Level Menu
CSS Creator Light Weight Multi Level Menu.
Colly’s CSS rollover generator
create two distinct styles of rollover button, using CSS and just one image.
List-u-Like CSS Generator
Create cross-browser list-based navigation bars with ease
InkNoise: The Amazing Rolloverer
Use a series of images to create nice CSS rollover menus w/out a lot of preloading and cruft
CSS Menu Generator
Like the title says, yet another CSS menu generator.

And that folks wraps-up the mother of all CSS menu lists, tutorials and generators. You’ll note I tried to steer clear of those that relied heavily on JavaScript, though there are a couple in the bunch.

Did I forget any of your favorites? Do a duplicate? Got an über favorite from the list above? If so, leave a comment so the rest of us can enjoy!