Home arrow Web Standards arrow Page 8 - Get Down With Markup
WEB STANDARDS

Get Down With Markup


Lists may seem to be mundane items, but many pages on the Web include at least one. The way you choose to mark up these lists can make a big difference. This article explores several the advantages and disadvantages of several common markup methods. It is taken from chapter one of Dan Cederholm's book Web Standards Solutions: The Markup and Style Handbook (Apress, 2004; ISBN: 1590593812).

Author Info:
By: Apress Publishing
Rating: 3 stars3 stars3 stars3 stars3 stars / 11
February 15, 2005
TABLE OF CONTENTS:
  1. · Get Down With Markup
  2. · Quiz time
  3. · Method B: The bullet that bites
  4. · Method C: Getting closer
  5. · Method D: Wrapper’s delight
  6. · Extra credit
  7. · Getting fancier with custom bullets
  8. · Lists that navigate
  9. · Mini-tab shapes

print this article
SEARCH DEVARTICLES

Get Down With Markup - Lists that navigate
(Page 8 of 9 )

I’ve shared a few methods of turning unordered lists into horizontal navigation on my personal site (www.simplebits.com), creating tab-like effects using ordinary, structured XHTML—just like the example grocery list.

For instance, here we’ll take the grocery list and turn it into a navigation bar for an online supermarket (that happens to only sell a handful of items)

We’d like the navigation in this case to be horizontal and also have some way of highlighting an item when it’s hovered over or selected, creating a tab-like effect.

First, we’ll add an id to our list so that we can apply specific CSS styles to it. We’ll also make each grocery item a link.

  <ul id="minitabs">
    <li><a href="/apples/">Apples</a></li>
    <li><a href="/spaghetti/">Spaghetti</a></li>
    <li><a href="/greenbeans/">Green Beans</a></li>
    <li><a href="/milk/">Milk</a></li>
  </ul>

Now, start to add the accompanying CSS:

  #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #696;
    }
  #minitabs li {
    margin: 0;
  padding: 0;
  display: inline;
    list-style: none;
  }

What we’ve done here is essentially turn off bullets and default indenting. We’ve also taken the first step in making the list horizontal, rather than vertical, by setting the display to inline. A bottom border has been added as well to help define the group of links.

The second step in making the navigation bar horizontal is to float our links to the left. We’ll also style the hyperlinks a little and adjust some padding and margins:

  #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #696;
    }
  #minitabs li {
    margin: 0;
    padding: 0;
  display: inline;
  list-style-type: none;
 }
  #minitabs a {
    float: left;
 line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
  text-decoration: none;
  color: #9c9;
    }

Here we’ve told all a elements within our list to float: left, essentially forcing them all to line up horizontally in a row. We’ve also added some color, made the links bold, and turned off underlines.

Next, create a tab-like border below the links that is activated when hovered or selected:

  #minitabs {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #696;
    }
  #minitabs li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
  #minitabs a {
    float: left;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #9c9;
    }
  #minitabs a.active, #minitabs a:hover {
    border-bottom: 4px solid #696;
    padding-bottom: 2px;
    color: #363;
    }
  #minitabs a:hover {
    color: #696;
    }

For highlighting and hovering, we’ve added a 4-pixel-tall bottom border to the selected or hovered <li> elements to create a tab-like effect. Highlighted tabs can also be "kept lit" by adding class="active" to the href of our choice:

<li><a href="/spaghetti/" class="active">spaghetti</a></li>

This active class shares identical CSS rules with a:hover.

Figure 1-7 shows the resulting navigation bar.

 

Figure 1-7.  The resulting mini-tab navigation bar

I’ve used this method of navigation for my own personal site (www.simplebits.com) as well as on an Inc.com (www.inc.com) redesign in July 2003. Feel free to check the source of these sites for more code examples.

With some padding and border width adjustments, a variety of different tab-like effects can be achieved, and we’ve done all of this so far using zero images or JavaScript and our basic XHTML-structured grocery list. Hooray for us!

This chapter is from Web Standards Solutions: The Markup and Style Handbook by Dan Cederhold (Apress, 2004, ISBN:  1590593812). Check it out at your favorite bookstore today. Buy this book now.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials