FireFox homepage navigation trick.

[typingcat]

http://www.mozilla.org/products/firefox/

At the top of the page there are several tabs (products, support, store
and so on). I viewed the source and those was only a simple list like:
<ul>
<li>Products</li>
<li>Support</li>
......
</ul>
The tab for current page turn white. But I don't know how this is
implemented. First, it isn't Javascript. I disabled Javascript and it
still worked. Second, no source difference. The tabs' sources for
products and support page were the same. Does anyone know about this?

=============HTML==============================
<ul>
<li id="menu_aboutus"><a href="../../about/" title="Getting the most
out of your online experience">About</a></li>
<li id="menu_developers"><a href="../../developer/" title="Using
Mozilla's products for your own applications">Developers</a></li>
<li id="menu_store"><a href="http://store.mozilla.org/?r=mozorg1"
title="Shop for Mozilla products on CD and other
merchandise">Store</a></li>
<li id="menu_support"><a href="../../support/" title="Installation,
trouble-shooting, and the knowledge base">Support</a></li>

<li id="menu_products"><a href="../../products/" title="All software
Mozilla currently offers">Products</a></li>
</ul>

=============CSS=============================
#header ul {
width: auto;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0 15px 0 0;
list-style: none;
background: url("../../images/header_br.gif") no-repeat bottom right;
z-index: 90; /* below the H1 */
}
#header li {
float: right;
background: transparent url("../../images/header_tab.gif") 100%
-600px no-repeat;
padding: 0 6px 0 0;
margin: 0 1px 0 0;
border-bottom: 1px solid #515358;
}
#header ul a {
float: left;
display: block;
padding: 4px 4px 4px 10px;
background: transparent url("../../images/header_tab.gif") 0% -600px
no-repeat;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#header ul li:hover a { background-position: 0% -400px; }
#header ul li:hover { background-position: 100% -400px; }

body.sectionAbout li#menu_aboutus a,
body.sectionProducts li#menu_products a,
body.sectionSupport li#menu_support a,
body.sectionDevelopers li#menu_developers a,
body.sectionStore li#menu_store a {
background-position: 0% -200px;
color: #039;
}

body.sectionAbout li#menu_aboutus,
body.sectionProducts li#menu_products,
body.sectionSupport li#menu_support,
body.sectionDevelopers li#menu_developers,
body.sectionStore li#menu_store {
background-position: 100% -200px;
border-bottom: 1px solid #fff;
}

body.sectionAbout li#menu_aboutus:hover,
body.sectionProducts li#menu_products:hover,
body.sectionSupport li#menu_support:hover,
body.sectionDevelopers li#menu_developers:hover,
body.sectionStore li#menu_store:hover {
background-position: 100% 0%;
}

body.sectionAbout li#menu_aboutus:hover a,
body.sectionProducts li#menu_products:hover a,
body.sectionSupport li#menu_support:hover a,
body.sectionDevelopers li#menu_developers:hover a,
body.sectionStore li#menu_store:hover a {
background-position: 0% 0%;
color: #333;
}

 

[David Dorward]

The tab for current page turn white. But I don't know how this is
implemented. First, it isn't Javascript.

body.sectionAbout li#menu_aboutus,

A class on the body that matches an id on the link.

Its not a very good technique as the link is still a link and a big file of
CSS has to be sent. It would be better to change the HTML on a page by page
basis so that the current page isn't linked at all.

 

[Jonathan N. Little]

http://www.mozilla.org/products/firefox/

At the top of the page there are several tabs (products, support, store
and so on). I viewed the source and those was only a simple list like:
<ul>
<li>Products</li>
<li>Support</li>
.....
</ul>
The tab for current page turn white. But I don't know how this is
implemented. First, it isn't Javascript. I disabled Javascript and it
still worked. Second, no source difference. The tabs' sources for
products and support page were the same. Does anyone know about this?

<snip code>

Yes, it CSS not JavaScript. Uses a background image with the highlight
and non-highlighted tabs depicted and with pseudo class :hover just
shifts the background image to show the highlight part. You can you two
images but with the image position method you don't have a delay on the
first hover as 'hover' image is downloaded.

 

[Toby Inkster]

body.sectionAbout li#menu_aboutus a,
body.sectionProducts li#menu_products a,
body.sectionSupport li#menu_support a,
body.sectionDevelopers li#menu_developers a,
body.sectionStore li#menu_store a {
background-position: 0% -200px;
color: #039;
}

Here's your culprit.

Work the rest out for yourself.