FireFox homepage navigation trick.

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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:
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?

<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=""
title="Shop for Mozilla products on CD and other
<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>

    #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
        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;

Re: FireFox homepage navigation trick. wrote:

Quoted text here. Click to load it

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.

David Dorward       < <
                     Home is where the ~/.bashrc is

Re: FireFox homepage navigation trick. wrote:

Quoted text here. Click to load it
<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.

Take care,

Re: FireFox homepage navigation trick.

typingcat wrote:

Quoted text here. Click to load it

Here's your culprit.

Work the rest out for yourself.

Toby A Inkster BSc (Hons) ARCS
Contact Me  ~

Site Timeline