|
|
Posted by typingcat on 11/17/55 11:28
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;
}
Navigation:
[Reply to this message]
|