Forum Moderators: not2easy
This is what I curerntly have:
CSS
----
a.menu:link, a.menu:visited {display:block; width:93px; height:28px; background:#FFC724;border-Right:1px solid #FFFFFF;border-Bottom:1px solid #FFFFFF; color:#FFFFFF; text-decoration:none; text-align:center; line-height:25px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; float:left;
a.menu:hover {background:#0099FF; color:#FFFFFF;}
a.menu:active {background:#2665DA; color:#FFFFFF;}
And this is my HTML
------------
<td colspan="2" align="center">
<div id="menua">
<a class="menu" href="default.asp">Home</a>
<a class="menu" href="programs.asp">Programs</a>
<a class="menu" href="lilbro.asp">Little Brothers</a>
<a class="menu" href="activities.asp">Activities</a>
<a class="menu" href="fundraising.asp">Fundraising</a>
<a class="menu" href="donate.asp">Donate</a>
<a class="menu" href="newsletter.asp">Newsletter</a>
<a class="menu" href="about.asp">About Us</a>
</div>
<div class="clr"></div>
</td>
Any help would be appreciated...thanks..
Some prefer not to use scripting alternatives. In this case, there is a pure CSS solution, but it requires a small amount of manual updating if the nav menu changes.
This last solution was dicussed in this recent thread [webmasterworld.com].
And by the way, welcome to WebmasterWorld!
cEM
<a href="?i=1" class="<?=($i=="1"? 'active' : 'menu')?>">news</a>
<a href="?i=2" class="<?=($i=="2"? 'active' : 'menu')?>">about</a>
Here you can see: when the variable passed to the 'i' is equal to 1 - the style is set to active, in other case it's just menu. If you do not pass any variables, you could probably use the referring page value from the system variables.
That worked great.
I just added:
CSS:
#page_one #one{background:#2665DA; color:#FFFFFF;}
#page_two #two{background:#2665DA; color:#FFFFFF;}
#page_three #three{background:#2665DA; color:#FFFFFF;}
#page_four #four{background:#2665DA; color:#FFFFFF;}
#page_five #five{background:#2665DA; color:#FFFFFF;}
#page_six #six{background:#2665DA; color:#FFFFFF;}
#page_seven #seven{background:#2665DA; color:#FFFFFF;}
#page_eight #eight{background:#2665DA; color:#FFFFFF;}
HTML (the header file only):
<div id="menua">
<a class="menu" id="one" href="default.asp">Home</a>
<a class="menu" id="two" href="programs.asp" id="current">Programs</a>
<a class="menu" id="three" href="lilbro.asp">Little Brothers</a>
<a class="menu" id="four" href="activities.asp">Activities</a>
<a class="menu" id="five" href="fundraising.asp">Fundraising</a>
<a class="menu" id="six" href="donate.asp">Donate</a>
<a class="menu" id="seven" href="newsletter.asp">Newsletter</a>
<a class="menu" id="eight" href="about.asp">About Us</a>
</div>
And the Body Tag of Each page:
<body id="page_eight"> or whatever page it is supposed to be! Awesom...Thanks so much!
I just added:
CSS:
#page_one #one{background:#2665DA; color:#FFFFFF;}
#page_two #two{background:#2665DA; color:#FFFFFF;}
#page_three #three{background:#2665DA; color:#FFFFFF;}
#page_four #four{background:#2665DA; color:#FFFFFF;}
#page_five #five{background:#2665DA; color:#FFFFFF;}
#page_six #six{background:#2665DA; color:#FFFFFF;}
#page_seven #seven{background:#2665DA; color:#FFFFFF;}
#page_eight #eight{background:#2665DA; color:#FFFFFF;}
If you're interested in saving code space, you can combine all these seperate rule declarations into one (since the property/value pairs are the same for all of them). It's not much, but it will cut down a little on the CSS size and, for future applications, cuts down on the amount of code you have to type...
#page_one #one,
#page_two #two,
#page_three #three,
#page_four #four,
#page_five #five,
#page_six #six,
#page_seven #seven,
#page_eight #eight {
background:#2665DA;
color:#FFF;
}
This applies the style rules to all of the selectors in the comma seperated list. The newlines are not necessary, but make it a little easier for humans to read.
cEM
