PDA

View Full Version : need help in tabbed menu script



gurmeet
03-04-2010, 08:05 AM
hi..
i am working on a web site.... its navigation bar is kept in a separate file which i added in everypage...

i click on the tabs to navigate pages,

but how i can make the tabs to current to make its different look on corrent page?


i.e. when i visit home.php, HOME tab must b current ( special look)
when i click on aboutme.php page ABOUT tab must b current



thaks in advanced... plz suggest me

davelf
03-04-2010, 09:17 AM
is there any code or link that we can see?

gurmeet
03-07-2010, 11:03 AM
navigation bar code :


<ul class="tab">
<li class="active"><a href="home.html"><span>Home </span></a></li>
<li><a href="community.html"><span>Community </span></a></li>
<li><a href="blog.html"><span>Blog </span></a></li>
<li><a href="messages.html"><span>Messages </span></a></li>
<li><a href="contact.html"><span>Contact </span></a></li>
</ul>


---------------------------------------------------------------------

css code :

ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{
border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;
}
li{float:left; margin-right:2px;}

.tab a:link, .tab a:visited{
background:url(img/tab-round.png) right 60px;
color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}
.tab a span{
background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}
.tab a:hover{
background:url(img/tab-round.png) right 30px;
display:block;
}
.tab a:hover span{
background:url(img/tab-round.png) left 30px;
display:block;
}

/* -------------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{
background:url(img/tab-round.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
background:url(img/tab-round.png) left 0 no-repeat;
}



----------------------------------------------------------



now i want to change active class to every active page.......

cz m navigation bar is saved in a separate file