CSS Navigation Techniques Explained

A host of CSS navigation techniques like vertical menus, JavaScript powered menus and tab menus, make navigation menus one of the most important elements for web design.

Here is a list of techniques to create CSS navigation menus:

Drop-down menus, horizontal style

The most important part of creating our menu is menu structure itself. The best way to do this is to build an unordered list, with each sub-menu appearing as a list within its parent list item.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Offices</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Internet
            <li>Marketing</a></li>
            <li><a href="#">Hosting</a></li>
            <li><a href="#">Domain Names</a></li>
            <li><a href="#">Broadband</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">United Kingdom</a></li>
            <li><a href="#">France</a></li>
            <li><a href="#">USA</a></li>
            <li><a href="#">Australia</a></li>
        </ul>
    </li>
</ul>

CSS Tabs Technique

Here are some examples to teach you at how to use CSS to build tabs. These are tabs where the user can click on to view different content within the same space. The tabs comprise simple A tags that use style classes designed particularly to make them look like little tabs found on file folders.

The CSS and HTML code is shown below. Each of the tab is basically a small box with a border on three sides.

div.tabArea {
    font-size: 80%;
    font-weight: bold;
}

a.tab {
    background-color: #f0f0f0;
    border: 1px solid #000000;
    border-bottom-width: 0px;
    padding: 2px 1em 2px 1em;
    text-decoration: none;
}

a.tab, a.tab:visited {
    color: #808080;
}
a.tab:hover {
  background-color: #d0d0d0;
  color: #606060;
}

…

<div class="tabArea">
    <a class="tab">Tab A</a>
    <a class="tab">Tab B</a>
    <a class="tab">Tab C</a>
    <a class="tab">Tab D</a>
</div>

While the outer DIV element provides a container for the tab, it is basically the “tabArea” class that sets a base font for them. The “tab” class creates a boxed look for the individual links while a :hover pseudo-class is used to highlight the tabs on mouse over.

Active tab

To make one tab stand out, we have to define a new style class names “activeTab” which can be combined with the “tab” class on any link.

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
    background-color: #c0c0c0;
    color: #000000;
}

Then the HTML code is updated to make one tab appear active by adding this class name to the link tag.

You can assign multiple style classes to an element by separating the names with spaces in its CLASS attribute.

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
    background-color: #c0c0c0;
    color: #000000;
}

Hybrid CSS Dropdowns Technique

Hybrid CSS dropdown technique is a bulletproof way to ensure browser compatibility and maintain usability even for people who have old browsers or difficulty in accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm.

Firstly, we need to attach an ID to the <ul> element and classes of “off” and “on” to the main list items.

<ul id="nav">
    <li class="off"><a href="#">Renaissance</a>
        <ul>
            <li><a href="#">Brunelleschi</a></li>
            <li><a href="#">Alberti</a></li>
            <li><a href="#">Palladio</a></li>
            <li><a href="#">Michelangelo</a></li>
            <li><a href="#">Bramante</a></li>
        </ul>
    </li>
    <li class="off"><a href="#">Art Nouveau</a>
        <ul>
            <li><a href="#">Mackintosh</a></li>
            <li><a href="#">Guimard</a></li>
            <li><a href="#">Horta</a></li>
            <li><a href="#">van de Velde</a></li>
        </ul>
    </li>
    <li class="on"><a href="#">Modern</a>
        <ul>
            <li><a href="#">Sullivan</a></li>
            <li><a href="#">Le Corbusier</a></li>
            <li><a href="#">Mies</a></li>
            <li><a href="#">Gropius</a></li>
            <li><a href="#">Yamasaki</a></li>
        </ul>
    </li>
    <li class="off"><a href="#">Postmodern</a>
        <ul>
            <li><a href="#">Venturi</a></li>
            <li><a href="#">Eisenman</a></li>
            <li><a href="#">Stern</a></li>
            <li><a href="#">Graves</a></li>
            <li><a href="#">Gehry</a></li>
        </ul>
    </li>
    <li class="off"><a href="#">Digital</a>
        <ul>
            <li><a href="#">Xenakis</a></li>
            <li><a href="#">Lynn</a></li>
            <li><a href="#">Diller+Scofidio</a></li>
            <li><a href="#">Zellner</a></li>
            <li><a href="#">Hadid</a></li>
        </ul>
    </li>
</ul>

These CSS navigation techniques are graphically rich versions that should be taken to the real world.

Popularity: 29% [?]

Categories: CSS Navigation, CSS Tips, Posted on February 4, 2008 by Choppr | Login