comaiwat
06-15-2009, 02:06 PM
This is a piece of code I took for the main navigation that have the reference to the second block of code below. I don't understand the css for class as show below. For example class level-1 and leve-2 is define but what relevant does a space current or link and for level-2 dropdown-item define? I can take out the dropdown-item and it still works fine. But link and current I need to define to make the main heading (home) is selected.
<ul id="nav-main">
<li class="level-1 current"> <a href="../index.html" class="level-1 home">Home</a> </li>
<li class="level-1 link"> <a href="../aboutus.html" class="level-1 aboutus">About Us</a>
<ul class="dropdown" style="display: none;">
<li class="level-2 dropdown-item"><a href="#"><span>»</span> Mission / Core Values</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> History</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> National Board of Trustees</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> National Staff</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> FAQ's</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> Partners</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> Contact Us</a></li> </ul>
</li>
</ul>
Here you see that only current is define so that it can highlight or select the main item. What about link? How does css know that it's not link but a "current".
#nav-main li a.home {
width: 108px;
}
#nav-main li a.home:hover {
background-position: left -30px;
}
#nav-main li.section a.home,
#nav-main li.current a.home {
background-position: left -60px;
}
#nav-main li a.aboutus {
width: 147px;
background-position: -108px 0px;
}
#nav-main li a.aboutus:hover {
background-position: -108px -30px;
}
#nav-main li.section a.aboutus,
#nav-main li.current a.aboutus {
background-position: -108px -60px;
}
If you would like to see the work in progress check out this test site at http://www.campfireusasite.org
Thanks.
<ul id="nav-main">
<li class="level-1 current"> <a href="../index.html" class="level-1 home">Home</a> </li>
<li class="level-1 link"> <a href="../aboutus.html" class="level-1 aboutus">About Us</a>
<ul class="dropdown" style="display: none;">
<li class="level-2 dropdown-item"><a href="#"><span>»</span> Mission / Core Values</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> History</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> National Board of Trustees</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> National Staff</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> FAQ's</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> Partners</a></li>
<li class="level-2 dropdown-item"><a href="#"><span>»</span> Contact Us</a></li> </ul>
</li>
</ul>
Here you see that only current is define so that it can highlight or select the main item. What about link? How does css know that it's not link but a "current".
#nav-main li a.home {
width: 108px;
}
#nav-main li a.home:hover {
background-position: left -30px;
}
#nav-main li.section a.home,
#nav-main li.current a.home {
background-position: left -60px;
}
#nav-main li a.aboutus {
width: 147px;
background-position: -108px 0px;
}
#nav-main li a.aboutus:hover {
background-position: -108px -30px;
}
#nav-main li.section a.aboutus,
#nav-main li.current a.aboutus {
background-position: -108px -60px;
}
If you would like to see the work in progress check out this test site at http://www.campfireusasite.org
Thanks.