Pressplaymedia’s Blog

Make your menus pretty with CSS

Posted on: November 14, 2007

Time to replace your boring text-only site navigation with something more pleasing to the eye?
How about beautiful CSS-based tab-like navigation? With free customizable source code?

Here are a few nice resources for CSS navigation as well as my selection of cool menus and tools:

1.
A selection of ready-made CSS menus

All of these come with functioning previews and downloadable source code.
Click the preview image for a demo or the link to visit the download page.


Pure CSS Horizontal Menus with Images by WebDesignInfo – click here for preview



12+ Free CSS Menus
by Exploding-Boy – click here for preview



Inverted Tabs
@ DynamicDrive


Dolphin Menu
@ 13Styles


Style #4
@ 13Styles


Mini Tab Shapes by SimpleBits – click here for preview



Float Mini Tabs
by Alessandro – click here for preview



14 Free Vertical CSS Menus by Exploding-Boy – click here for preview



Advanced CSS Menu by WebDesignerWall – click here for preview


2 level horizontal navigation with images by Veerle – click here for preview



CSS Dock Menu (includes simple JavaScript) by NDesign-Studio – click here for preview

2.
CSS Navigation Resources

A collection of links to more CSS navigation:

Top 71 CSS Menus Navigation Tabs @ E-consultant

30 Free CSS Based Navigation Menus @ CSS Juice

Tabs and Pure CSS Menus @ Alvit.de

A Big Bunch of Various CSS Menus @ CSS Play

3.
CSS Menu Generators

You can also create nice looking CSS navigation using online/software generators. Here are a few (free!) generators I like:

CSS Tab Designer by Overzone

CSS Menu Generator @ Webmaster Toolkit

CSSMenuMaker.com @ CSS Menu Maker

List-O-Matic @ Accessify (inspired by Listamatic)

4.
TUTORIALS

These tutorials will provide you with an in-depth view of techniques used for creating CSS-based navigation and help you understand how it all functions:

Nifty Navigation Using CSS – @ SitePoint

Sliding Door Technique @ AListApart

SuckerFish Dropdowns @ AListApart

CSS Express Dropdown Menus @ PVII

If you have any suggestions, please let me know by posting comments. Enjoy 🙂

Advertisements

2 Responses to "Make your menus pretty with CSS"

[…] Make your menus pretty with CSS « Pressplaymedia’s Blog […]

Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles

http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: