The mother of all CSS menu lists, tutorials and generators

September 27th, 2007 Posted in Code-Snippets, How-To, Resource Filled

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!

%DIGG%

Heal Your Church WebSite