13Styles CSS Menus

Pro

David Appleyard — Tue, 04 Aug 2009 18:17:34 +0000

A clean, professional, horizontal CSS menu in both brown and blue.

This sleek, professional menu comes in both brown and blue (or you can buy the PSD to easily customize it). It can blend into any corporate or portfolio site to give an impressive and stylish menu.

FAQ

Entire menu system is small and compact
4 image files, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see in the source code, the “Home” tab has the ON state by adding the “current” class to the a tag. Very straight forward!

Matte

David Appleyard — Wed, 18 Mar 2009 18:45:59 +0000

A flat menu with rounded corners and a slight shadow, available in several colours.

This CSS menu comes in five different colours, and also includes a CSS3 version to ensure you’re well future-proofed. It’s plain, simple, and very easy to integrate into your existing design. If you’d like to customize the colours further, consider purchasing the PSD pack.

FAQ

Entire menu system is small and compact
1 image file, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see in the source code, the “Home” tab has the ON state by adding the “active” class to the li tag. Very straight forward!

Simple Hover

David Appleyard — Sat, 14 Mar 2009 16:52:32 +0000

A simple menu with a description on roll over – easily customized, with no images.

This CSS menu comes in a couple of different colours, and shows additional information about a link when hovered over. It’s plain, simple, and very easy to integrate into your existing design.

FAQ

Entire menu system is small and compact
No images requried, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see in the source code, the “Home” tab has the ON state by adding the “current” class to the li tag. Very straight forward!

Jungle

David Appleyard — Sat, 14 Mar 2009 16:50:27 +0000

A gradient based menu, with jungle, blue or greyscale colours.

Named jungle after the default colours, this menu is also available and blue and grey. It contains a simple gradient, an attractive rollover, and room for a little extra information about each link. If you’d like to customize the colours, feel free to purchase the original PSD file.

FAQ

Entire menu system is small and compact
2 image files, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see in the source code, the div is tagged with the “menu” ID. The “Home” tab has the ON state by adding the “current” class to the li tag.

Rounded

David Appleyard — Sat, 14 Mar 2009 16:48:15 +0000

A professional yet simple take on a vertical rounded corner menu.

Rounded is only the second vertical menu to be added to 13 Styles, and can fit in well with any professional site. It’s easy to customize yourself, and even easier if you purchase the PSD pack.

FAQ

Entire menu system is small and compact
4 image files, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see, the UL is tagged with the “menu” ID. The “Home” tab has the ON state by adding the “current_page_item” class to the A tag.

Gloss

David Appleyard — Sat, 14 Mar 2009 16:45:57 +0000

It’s glossy and beautiful, in a few different colours.

It looks good enough to eat – in a sense. This menu takes on a fairly relaxed and cartoon-y feel, but when displayed in grey can still convey a professional image. Take a look at the demo to see for yourself.

FAQ

Entire menu system is small and compact
6 image files, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see in the source code, the UL is tagged with the “rhm1” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

Time 4 Bed

David Appleyard — Sat, 14 Mar 2009 16:43:30 +0000

Get it? the names comes from the fact that I should be sleeping right now…

A stylish and classic menu, this design combines a serif font with a subtle gradient to create a really classy effect. Easily customized if you’d like to purchase the PSD pack – or looks great as it is.

FAQ

Entire menu system is less than 6KB
3 image files, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

Simple Menu

David Appleyard — Sat, 14 Mar 2009 16:41:52 +0000

A great starting point for people who are building their first few CSS menu’s.

The CSS/XHTML is very clean and easy to understand. There aren’t any images for the menu, so you won’t need to open up Photoshop to customize the menu – just a case of playing around with the CSS!

FAQ

You can customize this menu to be any color you wish
Entire menu system is less than 1KB
1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

Vert-One

David Appleyard — Sat, 14 Mar 2009 16:40:12 +0000

The first vertical menu to be added to the site.

What I like about this one is that it can serve as a good foundation for someone trying to build something with a little more style. The CSS/XHTML is very clean and easy to understand. There is only 1 image for this menu too, so you won’t need to open up Photoshop to customize the menu.

FAQ

You can customize this menu to be any color you wish
Entire menu system is less than 3KB
1 image file, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

Saturday

David Appleyard — Sat, 14 Mar 2009 16:38:31 +0000

This menu is called “Saturday”, well, because I made it on a Saturday.

A minty styled menu, with green and brown tones. It’s a classic tab design, uses a couple of gradients to good effect, and can be easily customized through the PSD file package. If you like the default colour, you’re good to go!

FAQ

Entire menu system is less than 5KB
4 image files, 1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Other Notes

As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

Dolphin

David Appleyard — Sat, 14 Mar 2009 16:36:18 +0000

This menu is called “Dolphin” because it’s blue… not very creative, I know.

By far the most popular menu on the site to date, readers seem to really like the simple blue colour and stylish gradient which makes the design jump off the screen. Not unlike a leaping dolphin… Too cheesy?

FAQ

Entire menu system is less than 6KB.
5 image files, 1 css file, 1 html file.
Has been tested and works in over 150 broswer/operating system combos.
It’s FREE for you to use.

Other Notes

The “About Us” tab has the ON state by adding the “current” class to the A tag.

Fox

David Appleyard — Sat, 14 Mar 2009 16:34:10 +0000

This menu is called “Fox” it’s crafty, bold and colorful.

A great menu for use on dark sites, as it grabs the reader’s attention and gives them a clear path through the site. If you’d prefer a different colour, the PSD package will allow you to easily customize the design.

FAQ

Entire menu system is less than 3KB.
2 image files, 1 css file, 1 html file.
Has been tested and works in over 150 broswer/operating system combos.
It’s FREE for you to use.

Other Notes

The “Services” tab has the ON state by adding the “current” class to the A tag.