13 Styles is all about CSS menus

The menus are list based, very light-weight, easy to implement, and cross-browser compliant. All the menus are free, though you can purchase the original PSD images to customize certain menus for $24.99.

14 Free CSS Vertical Menu Designs

Inline Mini Tabs

One of the most underestimated part of CSS are inline boxes. Probably most of you know the CSS specifications on the subject, but if you haven’t read it, I suggest to look at the article on inline formatting model, by Eric Meyer, one of the most in-depth articles on CSS I’ve ever read for its level of detail.

dTree is a free JavaScript tree menu

There are a lot of tree generating scripts just like this one, and many of them are great. So why use dTree?
dTree is very simple to set up and use. You don’t have to worry about adding pages to the tree in a specific order, which makes it ideal for generating a tree from a database.

Multi level centered sliding doors CSS ONLY menu

Tabtastic

This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.
Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.

Tab Styled Accordion

Suckerfish

You have found an example page for Suckerfish Dropdowns. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that’s just 12 lines of it). It’s lightweight, it’s accessible, it’s cross-compatible.

Accessible Image-Tab Rollovers

*Example-specific CSS is coded locally, in the head of the page, for convenience. You’ll probably want to use your favorite @import method to hide from old-school browsers.

CSS Mini Tabs (the UN-tab, tab)

Relative font-size Version

Tabs and text will scale when the user adjusts the text size.

Simplified CSS Tabs

Updated Simple CSS Tabs

* The secondary menu is now a nested list, so it is more semantically meaningful.
* The tabs scale with font sizes much better by using EMs more frequently for sizing.
* Things are a little more compact, so there’s more room for the tabs.
* It’s easy to control the width of the whole box (using EMs if you’re clever).

Navigation Matrix Reloaded

CSS Dropdowns and Flyouts

In case you haven’t done so yet, go ahead and hover those blue links, okay? Pretty cool, eh? The same tricks employed for the CSS Flyouts demo are used here, but with a lot of obvious modifications. The same Jscript makes IE obey hover on any element, and the “sticky hovering” method is applied here as well.

Hybrid CSS Dropdowns

This technique is a bulletproof way to ensure browser compatibility and to maintain usability even for people who have old browsers or difficulty accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm. It also does a much better job than standard dropdown menus of orienting the user within the site.

Free Menu Designs

Need a block menu fast! Below are simple CSS menu designs for you to download and use any way you see fit. You can download the complete set, or an individual menu by clicking the Download Menu button located on each menu. Please feel free to download for commercial or private use, and modify to suit your needs.

CSS Tabbed Arrows

CSS Tab Designer

CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
With the CSS Tab Designer, you can :
* Quickly design your list visually
* Choose from a variety of styles/colors (60+ different designs/colors supported). [ Styles Authors / Credits ]
* Generate strict xhtml compliant code

cssMenus

The following dynamic menu examples are driven completely by CSS and work in all modern browsers*.
CSS Menus v2 Features
* Up to 3 sub menus
* Hover Persistence
* Uses jQuery for IE fixes

CSS Menu Generator

CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links.

Tabs

In this example, we’ll look at using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space. It will require a few lines of JavaScript to dynamically update the individual tabs but we’ll cover that code later. For now, we’ll look at building the display.

Taming Lists

Sliding Doors of CSS

A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2’s current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.

Drop-Down Menus, Horizontal Style

Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.)

Share this article!

Share it your friends & colleagues and help us spread it to the World.