...

View Full Version : Selected Tab Highlight



nikko50
01-21-2008, 11:40 PM
Hi all.
I have a UL TAB menu where I would like to apply a different style to the selected or current tab. How would I do this?? My code so far is below.

<style>
ul#tabnav {
font: NORMAL 10px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 2px solid #AAAAAA;
margin: 10px 0px 1px 0px;
}
ul#tabnav li {
float: left;
height: 20px;
background-color: #C8C8C8;
margin: 2px 0px 0 1px;
border: 1px solid #AAAAAA;
}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #fff;
margin: 0px 0px 0 2px;
}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: #FFFFFF;
}
#tabnav a {
float: left;
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 4px;
}
#tabnav a:hover {
background: #808080;
}
</style>


<ul id="tabnav">
<li class="tab4"><a href="#"><</a></li>
<li class="tab4"><a href="#">S</a></li>
<li class="tab4"><a href="#">></a></li>
</ul>

twodayslate
01-22-2008, 12:31 AM
You would need some PHP
basically when you are at the page it inserts class="current"
for example


#tabnav li { background: white;}
.current { background: green; }

<ul id="tabnav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">page2</a></li>
<li><a href="#">not current</a></li>
</ul>
http://www.alistapart.com/articles/keepingcurrent/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum