default menu option

Question

how can I make this menu here have the default be the "about" tab?

http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

so when your mouse isnt hovering over any of them, its on the about tab?

Answer 1

I'd give the about <li> a class for this, maybe class="default", making it easy to change later. Then, just change the hover function to account for this:

$("ul#topnav li").unbind().hover(function() {
  $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'})
         .find("span").show();
  $(this).siblings('li').css({ 'background' : 'none'}).find("span").hide();
} , function() {
  if($(this).hasClass('default')) return;
  $(this).css({ 'background' : 'none'})
         .find("span").hide();
  $(this).siblings('.default').mouseenter();
});

You can view a demo of it here, if you want it shown when the page initially loads as well, you can do this:

$("ul#topnav li.default").mouseenter();

I'm not sure how you're using this in your site, but I'd put the hover styles into a .hover class, and then you can do:

• .addClass('hover') instead of .css({ 'background' : '#1376c9 ...})
• .removeClass('hover') instead of .css({ 'background' : 'none'}) ​

Answer 2

Something like

$("ul#topnav li:nth-child(2)").find("span").show();

Will get the 2nd li from the <ul id="nav"> and display the span block below it.