Best way to code stackoverflow style 'questions' / 'tags' rollover buttons

Question

Whats the best way to implement rollover 'buttons' like Stackoverflow has for 'Questions', 'Tags', 'Users' at the top.

It is actually implemented like this :

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

I kinda gave up trying to find the javascript for this since all the javsascript seems to be on one line.

I was just wondering what people think is the simplest / most reliable way to implement simple buttons like this.

I found it very interesting that stackoverflow is using <li> and not something like <span>. Curious as to why...

PS. I'm using ASP.NET -- currently with no other libraries such as JQuery, but willing to try something like that if it'll help.

Elixir

It's a list of links. Why wouldn't you use the "list item" tag for it? What meaning does a <span> give you? – Machine

Answer 1

There's no javascript needed for hover effects on links. Just use the :hover pseudo-class:

a:hover {
    background-color:#FF9900; 
}

Regarding the menu, it is quite common to implement navigation using unordered lists.

Mariannmarianna

Note that you will have to set the line-height of the link to the height of the button you wan't. you can also use this pseudo-class on other elements (like li's) except that that doesn't work in IE6. Also make sure when using this method to define the pseudo classes on your a as: LOve HaTe – Sprout

Yeah, LI for navigation just makes the most sense with the HTML markup available. This 2002 article on A List Apart was widely influential on the markup conventions you see in use today: "...I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such." - alistapart.com/articles/taminglists – Cockney

Answer 2

using li elements makes sense because these are lists (of links), giving the links semantics. When things are semantically marked up, the document can be understood by non-visual browsers, such as search engines and visualy-impared persons using screen-readers.

Larimore

Answer 3

Decomposing it, its css driven:

.primarynav li {
    margin-right:7px;
}
.primarynav li:hover {
   background-color:#FF9900;
}

Firebug is my friend.

However, there's no reason why it couldn't be done with javascript

jQuery(function($){ 
      $("ul#nav li").each(function(i,v){ 
           $(v).hover(function(){ 
              $(v).addClass("hovered"); 
           },function(){ 
              $(v).removeClass("hovered");
           }); 
      });
});

Derris

Answer 4

CSS only:

a.tagLink {
    background-color: red;
}

a.tagLink:hover {
    background-color: blue;
}

Aegeus

Answer 5

You don't need to use JavaScript for this; some simple CSS will suffice:

a:hover {
    background-color: /* something magical */;
}

Note the ":hover" part of the selector; that's the magic bit, and it works on non-<a> elements, too, although some older versions of IE will disregard it for anything other than a link.

Obviously, you can combine additional bits in the selector to limit this effect to your navigation links, or whatever you want to achieve.

Spaak