XHTML Tutorial CSS Tabbed Menu

apexmedia — Tue, 28 Oct 2008 21:57:45 +0000

Tabbed menu

One hugely useful way of displaying your menu items is in the form of tabs. The following tutorial will take you through some simple steps to build your own tabbed menu, without so much as a .gif or line of JavaScript in sight…

Open up a blank XHTML document with a style statement within the tags. This is where we’ll place out CSS code.

button

Now let’s set out the XHTML markup for our menu, between the tags:

tab one

tab two

tab three

tab four

This is a straight-forward unordered list which we’ve given the class of ‘menu_tabbed’. Within it are four list items, each one of which contains a link.

That’s it for the markup, now let’s set up some CSS to give our document some basic styles. Place the following between the

Video Training - Tutorials » CSS Tabbed Menu Tutorial

XHTML Tutorial CSS Tabbed Menu

Tabbed menu