1. CSS Fancy Menu

This article gos through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

2. cssMenus

This navigation menu works both vertically and horizontally, being fully compatible with all browsers.

3. Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level – code an advanced (un-typical) list menu utilizing the CSS position property.

4. Taming CSS Lists

In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page. Specific attention is paid to using a list as a vertical CSS menu.

5. Mini Tabs

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images.

6. Inverted Sliding Doors Tabs

This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se.

7. A collection of free CSS menus

8. A simple gradient CSS menu

9. A walk-through of different CSS navigation techniques

10. Mini sliding navigation

1. Decide on the Navigational Elements and Colours

It is initially important to decide on which tabs you will want to place on your site, and what the colour scheme will be. You need to have an idea of how many tabs there will be, and what the default background and rollover background colour will be. Make a note of these!

2. How It Works

The tab area is set as a layer, to hover over a specific part of the page – you set this manually, based on where you would like it to be located.

Simply take the CSS code (see below), and change the commented values to fit in with the colour scheme of your website. You can go deeper and change elements such as the height, width and position of the menu bar if you want.

3. Download the CSS Code

Download a copy of the CSS code, then link to it as explained below.

4. Insert the CSS file into your HTML Code

Upload the tabsample.css file to your server, then place the following line in your area to link to the stylesheet.

1

<link rel="stylesheet" type="text/css" href="tabsample.css" />

5. Place the Tabs in your HTML Code

OK, so you’ve got all the formatting done for tabs in the CSS file, now you just need to place the correct HTML code in your index.php page.

For each tab you want to display, enter:

1
2
3
4
5
6

<ul id="supernav">
<li<?php if ($page=="home") { echo " id="selected""; } else {} ?>>
   <a href="/index.php" title="The Weblog">Blog</a>
</li>
-- Repeat as necessary for other tabs --
</ul>

For each different tab, change the following:

"home" – this is a one word description of the page (for the reason why, see below)
"/index.php" – this is the link to that particular page
"The Weblog" – a description of the page you’re linking to
Blog – the word you want to appear in your navigation bar as a link

Note: It doesn’t really matter where you place this source code, as the position they appear in is set in the CSS file. I would recommend somewhere near the header area.

6. What’s the PHP for?

The PHP code in the above line allows you to have an alternative look and feel for the tab on the current page (see the ‘Blog’ tab above?) Simply place this line underneath the