Current Page Link Not Selected

Nana2010

10-29-2010, 03:45 AM

Hello,

I'm not sure if this is the correct place to post this question. If it isn't, please let me know where I should post it.

I created a simple content slider with each link directed to a section on the same page. The menu I'm using is straightforward:

<div id="menu">
<ul>
<li><a href="#home" class=".current">Home</a></li>
<li><a href="#about_me">About Me</a></li>
<li><a href="#IT_consult">IT Consultant</a></li>
<li><a href="#edu">Education</a></li>
<li><a href="#leadership">Leadership</a></li>
<li><a href="#community">Community Involvement</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

In CSS, I have
#menu {
width: 200px;
margin: 100px 0px 0px 5px;
float:none;
}
#menu ul {
margin: 0;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu li {
background:url(images/button.png) no-repeat;
}

#menu a {
display: block;
width: 180px;
margin: 0px;
padding: 5px;
text-decoration: none;
text-align: left;
text-transform: capitalize;
font:Calibri;
font-size: 14px;
font-weight: normal;
color: #000000;
}

#menu a:hover {
text-decoration: none;
color:#999999;
}

#menu a:active {
text-transform: uppercase;
}

As you can see in the website here: http://it.gettingtoknowlucy.co.cc/test/index.html, when you click on the menu, the menu text is capitalized, but it doesn't stay capitalized. What I want to do is while on the selected page, I want the menu text to stay capitalized.

I'm getting quite frustrated with this. Any help is appreciated!

Tivie

10-29-2010, 04:32 AM

it does not stay capitalized because a:active only "works" while you click on it. I mean, only when the mouse button stays down.

For instance, if you press Home in your page and keep the button mouse down while you move the mouse around, its stays capitalized.

If you move your mouse out of the window (ie to the status bar ou tool bar) it will actually stay capitalized. ^^

Tivie

10-29-2010, 04:40 AM

But answering to your question. I don't its possible doing it only with CSS. There isn't a rule for the "last button pressed" or something.

You can do that with code, though. Java script or PhP.

If you want, i can write you the code (its actually very simple!)

Tivie

10-29-2010, 09:01 AM

As promised (although you didn't ask) here's the jscript to enable this kind of effect. Might help others with the same problem.

JSCRIPT:

<script type="text/javascript" language="javascript">

</script>

Place it inside <head>.

I've made some changes to the HTML to run the script.
Added an id to each link so that it can be accessed via jscript.

<div id="menu">
<ul>
<li><a id="l_home" href="#home" class=".current" onclick="upperme(this);">Home</a></li>
<li><a id="l_about" href="#about_me" onclick="upperme(this);">About Me</a></li>
<li><a id="l_consult" href="#IT_consult" onclick="upperme(this);">IT Consultant</a></li>
<li><a id="l_edu" href="#edu" onclick="upperme(this);">Education</a></li>
<li><a id="l_leader" href="#leadership" onclick="upperme(this);">Leadership</a></li>
<li><a id="l_com" href="#community" onclick="upperme(this);">Community Involvement</a></li>
<li><a id="l_contact" href="#contact" onclick="upperme(this);">Contact</a></li>
</ul>
</div>

I've also deleted the a:active part in css (was messing with the effect).

How it works:

It's easy. every time you click in the link, the event onclick is risen which, in turn calls the function upperme. the (this) part is the reference to the id of the object ence the need of "id-ing" each link.

First, the script iterates through every child node of the div "menu" which has the tag <a>, changing its style.textTransform to lowercase and capitalize. This is done so that any previous chnages done to the menu text is undone. Then it actually "uppercases" the corresponding menu item.

The desired effect is achieved.

I can't think of any simpler way of doing this. Hope it helps and good luck

SB65

10-29-2010, 11:19 AM

Since you've already got jQuery on this page the following is shorter and far less obtrusive:

<style type="text/css" media="screen">
.active{text-transform:uppercase}
</style>

<script type="text/javascript">
$(function() {
$("#menu a").click(function(){$("#menu a").removeClass('active');$(this).addClass('active')});
});
</script>

Nana2010

10-29-2010, 01:27 PM

Tivie, SB65,

Thank you very much!! I finally got it working! :thumbsup:

Tivie

10-31-2010, 06:31 AM

SB65

10-31-2010, 09:05 AM

yes, indeed. But it doesn't work in IE6, does it?

It does work in IE6, yes.