How would you code this: The SO Menu

Question

I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)

What are some straight forward or creative ways you could code the SO Menu...

Stackoverflow logo | Questions | Tags | Users | Badges | Unanswered | SPACE | Ask Question

• Would you use a simple table (I know people harp on them as being bad, but remember I'm a noob)?
• Would it be wise to use CSS relative positioning? Or is that bad considering different browsers implement this differently?
• Could you use JQuery to implement this easily? Or GWT?

• The code under the hood (and shown under this question) shows this menu as an unordered list, but I thought unordered lists are typically vertical and look like more like this list of questions I'm posting. How is the <ul> element being used as a menu in this case?

      <div id="hmenus">
          <div class="nav">
              <ul>
                  <li class="youarehere"><a href="/questions">Questions</a></li>
                  <li><a href="/tags">Tags</a></li>
                  <li><a href="/users">Users</a></li>
                  <li><a href="/badges">Badges</a></li>
  

Thanks in advance for all your help! You were more than helpful in the last, similarly structured question I asked. I really understood the concepts I've been reading about much much better after reading your responses :)

Answer 1

I would write it something like this (assuming Questions is the current page):

<div class="nav">
    <ul> 
        <li class="youarehere"><a href="/questions">Questions</a></li> 
        <li><a href="/tags">Tags</a></li> 
        <li><a href="/users">Users</a></li> 
        <li><a href="/badges">Badges</a></li> 
        <li><a href="/unanswered">Unanswered</a></li> 
    </ul> 
</div>

Then I would use CSS somewhat like this:

Note the float: left; on the .nav li style. That is what makes the list horizontal.

.nav
{
    float: left;
    font-size: 125%;
}
.nav ul
{
    margin: 0;
}
.nav li
{
    background: #777;
    display: block;
    float: left;
    margin-right: 7px;
}
.nav .youarehere
{
    background: #f90;
}
.youarehere a
{
    color: #fff;
}
.nav li:hover
{
    background-color: #f90;
}
.nav a
{
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 6px 12px 6px 12px;
    text-decoration: none;
}

Okay, to be honest I wouldn't do it exactly like this... I would probably prefer to skip the <div> element and put id="nav" on the <ul> element... Feels more semantic that way.

Answer 2

http://css.maxdesign.com.au/listamatic/

This should help you out, it has a number of examples and guides on various css menus!

Answer 3

It is common nowadays to use unordered lists to create navigation buttons.

You don't need jQuery nor GWT for something like this, use the :hover pseudoclass

a:hover {
  color: red;
}

Answer 4

This is all you need. It's very simple and because of that, its no surprise that it works in anything that matters (IE 5.5-8, Opera, FF, Safari, and Chrome).

.nav ul, .nav li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 float: left;
}
.nav a {
 display: block;
 background-color: #777777;
 color: #fff;
 padding: 7px;
 margin-right: 5px;
 font: normal bold 16px Arial,Helvetica,sans-serif;
 text-decoration: none;
}
.nav a:hover,
.nav .youarehere a {
 background-color: #FF9900;
}

• No tables. Since this is one row of variable width columns, there's no need.
• Relative positioning isn't necessary, just get your float: left; on.
• No need to implement any client-side scripting for this. It's best to set the class="youarehere" in whatever logic is controlling the view so that it is ready to go on page load (doesn't need to wait for DOM and JS to load and then figure out the current top-level).
• UL's are semantically correct for all sorts of lists, which is really what navigation is (regardless of whether its vertical or horizontal)

Answer 5

I would use an unordered list for the navigation. The li elements would be floated left. The anchors within the li's would be styled to give the needed look.

Rather than using a youarehere class on the active link, I'd apply a class to the body and show the active links somewhat like this: body.questions ul.nav li.questions-link:link, body.questions ul.nav li.questions-link:visited {...}. (Probably not using this much of a selector). The body class allows you to do further customisation without much hassle (i.e. different background images or colour schemes and so on).

The SO logo would be a h1 using image replacement with CSS to show the image instead.

Any IE browser issues would be handled with conditional comments.