PDA

View Full Version : Change link text style for current page.



Sman5109
Aug 29th, 2007, 02:50 AM
Hello, I dont know if this can be done in xhtml/css or PHP, but if it can then either work.

I want to change link text style for current page. For example, if you are on the page "network", the link to "network" will be a different style (color and bold for me), then the rest, so users know where they are on the site. How do I do that?

----Additional info of what im doing-------

I have this navigation list:


<div class="subtabs">
<ul>
<li><a href="contact.php"><span>Contact Us</span></a></li>
<li><a href="sitemap.php"><span>Sitemap</span></a></li>
<li><a href="legal.php"><span>Legal</span></a></li>
<li><a href="news.php"><span>News</span></a></li>
<li class="selected"><a href="network.php"><span>Our Network</span></a></li>
<li><a href="advantage.php"><span>Advantage</span></a></li>
<li><a href="about.php"><span>About Us</span></a></li>
</ul>
<div class="clear"></div>
</div>I want to put this in a php file (PHP include maybe) so I dont have to change everypage when i change something. But the "class="selected"" is holding me back because currently thats what changes the style.

Heres the css for that class:

.subtabs .selected a

}

.subtabs .selected a span
color:#fff;
font-weight:bold;
}Thank you!

abduraooft
Aug 29th, 2007, 06:37 AM
You can do it easily by the help PHP like..
1)Add a variable say $page at the top of every page in which you would like to get the result with values like $page="contact", $page="sitemap" etc.
2) Apply the common styles to the links in nav using CSS.
3)Change your code for menu like


<ul>
<li><a href="http://clients.vlexo.com/contact.php" <? if ($page=="contact") echo 'style="font-weight:bold;color:red"';?>>Contact Us</a></li>
<li><a href="sitemap.php" <? if ($page=="sitemap") echo 'style="font-weight:bold;color:red"';?>>Sitemap</a></li>
...................
</ul>


(Are you using the <span> in side <a> for any specific purpose?)

rmedek
Aug 29th, 2007, 06:49 AM
Another way to do it is a method I use all the time—add an ID or class to the body element, a la:


<body id="home"> … </body>
<body id="about"> … </body>
<body id="contact"> … </body>

Then, markup your nav something like this:


<ul id="nav">
<li id="nav_home"><a href="#">home</a></li>
<li id="nav_about"><a href="#">about</a></li>
<li id="nav_contact"><a href="#">contact</a></li>
</ul>

And finally, in your CSS, you can target the specific links using the cascade:


#nav li a { one style }

#home #nav_home a, #about #nav_about a, #contact #nav_contact a { another style }

I picked that up via A List Apart, I think. Plus, it's a really easy way to target page-specific styles as well. Hope this helps…

ahallicks
Aug 29th, 2007, 09:24 AM
BonRouge (http://bonrouge.com/~currentcss) has examples in both CSS and php... if you can use php then I'd recommend that though because it's a little easier and less markup (the link at the top of the page goes to the php example).

Sman5109
Aug 30th, 2007, 06:51 AM
Thanks everyone for your help!

I ended up using abduraooft's solution. It was simple and it worked great. Except for the example you used. The span changed the text style, so the php had to be moved from the "a" to the "span". I didnt code the site, im just recoding it to be as close to 'great' as possible.

abduraooft
Aug 30th, 2007, 08:29 AM
Thanks everyone for your help!

I ended up using abduraooft's solution. It was simple and it worked great. Except for the example you used. The span changed the text style, so the php had to be moved from the "a" to the "span". I didnt code the site, im just recoding it to be as close to 'great' as possible.
LOL, but I'd like to thank the other guy for his solution(its a new info for me).
Hi Sman5109, the first one may work, but the other solutions are much easier to maintain in long run. And this is purely on CSS, it may reduce the server task to run those php codes.

Actinia
Aug 30th, 2007, 11:19 AM
I have used a mixed CSS/Javascript solution. Like rmedek, I give an attribute to the body (I actually use title="home" ...). The various links are given ids, such as id="home". Then my onload function first picks up the value of the title attribute in body, then uses getElementByID to locate the appropriate link.

I actually use this to change the tooltip of the link to the current page to "You are here".

I do not have access to the full code at present (on a different computer, at home), but I can post it if anyone is interested.

John Rostron

ahallicks
Aug 30th, 2007, 11:37 AM
^ But what if the user has javascript disabled ;) I know it's not exactly that important that the customer knows which page they're on, but javascript is one of those things that you have to remember not everyone uses, or has turned on.

I'd like to see the code for that though, if you wouldn't mind

Actinia
Aug 30th, 2007, 12:59 PM
As I have it, the only loss from not having Javascript is that the tooltip is not modified. The tooltip for each link is the same as the page title. It is also possible that they can click and link to the page they are already on.

I will post the code when I get home tonight.

John

Actinia
Aug 31st, 2007, 03:21 PM
This is the CSS I use in the list (in a div with id #nav):


#nav ul li { list-style-type: none; width: 120px; border: solid 1px #336600; background-color:#99FF99;
margin: 0px; padding: 0.5em; font-size: smaller; position: relative; }
#nav ul li a span { display: none; }
#nav ul li a:hover span {
display: block;
font-weight: normal; color: black;
position: absolute;
top:0px; left: 150px; width: 300px;
padding: 0.5em; z-index: 100;
background: #FFC; border: 1px solid black;
}

The body is given a title:

<body title="Home">

and each list element looks like:

<li><a id="Home" href="Home.htm"><span>The Pound Wood Opening Page</span>Home</a></li>

and this is the Javascript:

function checkPage() {
// Neutralises link to the current page
var bodyID = document.getElementsByTagName("body")[0];
var pageName = bodyID.getAttribute("title");
var anchID = document.getElementById(pageName);
var spanID = anchID.getElementsByTagName("span")[0];
spanID.innerHTML = "This is the Current Page";
// Ensure there is no link to click on
anchID.removeAttribute("href");
// Prevents title tooltip appearing when hovering mouse
bodyID.removeAttribute("title");
}

function onload() {
checkPage();
}

This is from a re-write of site on the Pound Wood Nature Reserve, and is not yet on a public site.

John Rostron

lse123
Jun 4th, 2008, 10:47 AM
At:
www.AncientGreekDramaInstitute-Cyprus.org
the imgs are:
button1up.png
button1down.png, ... etc
well how I do when on eg Apply.htm Apply button be always button6down.png ?

Menu(in dw template)

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target="_self"><img src="buttons/button1up.png" alt="button homepage" name="button1" hspace="1" vspace="1" border="0" id="button1" /></a><br />
<a href="about.htm" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target="_self"><img src="buttons/button2up.png" alt="button about us" name="button2" hspace="1" vspace="1" border="0" id="button2" /></a><br />
<a href="teachers.htm" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target="_self"><img src="buttons/button3up.png" alt="button the teachers" name="button3" hspace="1" vspace="1" border="0" id="button3" /></a><br />
<a href="gallery.htm" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu(\'submenu4\')',delay);" target="_self"><img src="buttons/button4up.png" alt="button gallery" name="button4" hspace="1" vspace="1" border="0" id="button4" /></a><br />
<a href="schedule.htm" onmouseover="setOverImg('5','');overSub=true;showSubMenu('submenu7','button5');" onmouseout="setOutImg('5','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target="_self"><img src="buttons/button5up.png" alt="button schedule of meeting and professional session" name="button5" hspace="1" vspace="1" border="0" id="button5" /></a><br />
<a href="apply.htm" onmouseover="setOverImg('6','');overSub=true;showSubMenu('submenu7','button6');" onmouseout="setOutImg('6','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target="_self"><img src="buttons/button6up.png" alt="button apply to meeting and professional session" name="button6" hspace="1" vspace="1" border="0" id="button6" /></a><br />
<a href="links.htm" onmouseover="setOverImg('7','');overSub=true;showSubMenu('submenu7','button7');" onmouseout="setOutImg('7','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target="_self"><img src="buttons/button7up.png" alt="button links" name="button7" hspace="1" vspace="1" border="0" id="button7" /></a><br />
<a href="contact.htm" onmouseover="setOverImg('8','');overSub=true;showSubMenu('submenu8','button8');" onmouseout="setOutImg('8','');overSub=false;setTimeout('hideSubMenu(\'submenu8\')',delay);" target="_self"><img src="buttons/button8up.png" alt="button contact us" name="button8" hspace="1" vspace="1" border="0" id="button8" /></a><br />
<a href="guestbook.htm" onmouseover="setOverImg('9','');overSub=true;showSubMenu('submenu9','button9');" onmouseout="setOutImg('9','');overSub=false;setTimeout('hideSubMenu(\'submenu9\')',delay);" target="_self"><img src="buttons/button9up.png" alt="button guestbook" name="button9" hspace="1" vspace="1" border="0" id="button9" /></a><br /></td>
</tr>
</table>

instinctfmine
Jan 5th, 2009, 01:00 PM
You can do it easily by the help PHP like..
1)Add a variable say $page at the top of every page in which you would like to get the result with values like $page="contact", $page="sitemap" etc.
2) Apply the common styles to the links in nav using CSS.
3)Change your code for menu like


<ul>
<li><a href="http://clients.vlexo.com/contact.php" <? if ($page=="contact") echo 'style="font-weight:bold;color:red"';?>>Contact Us</a></li>
<li><a href="sitemap.php" <? if ($page=="sitemap") echo 'style="font-weight:bold;color:red"';?>>Sitemap</a></li>
...................
</ul>


(Are you using the <span> in side <a> for any specific purpose?)


Does this can be done to html pages as well. I'm not using php, just css and java script.

instinctfmine
Jan 5th, 2009, 01:01 PM
Does this can be done to html pages as well. I'm not using php, just css and java script. I have tried but not working..

Thanks in advance for your help...

abduraooft
Jan 5th, 2009, 01:05 PM
Does this can be done to html pages as well. I'm not using php, just css and java script. I have tried but not working..

Thanks in advance for your help...
Yes, that's what rmedek posted, http://www.codingforums.com/showpost.php?p=605564&postcount=3

wallacept
Sep 14th, 2009, 10:16 AM
i have a code but no apply. when i click in "Motas" not active menu. why?
view store (http://ccampea.com/lojacc)


/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_1.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */



.preload1 {background: url(../img/blank_over.gif);}
.preload2 {background: url(../img/blank_overa.gif);}


#nav {padding:0 0 6px 0; margin:0; list-style:none; height:36px; z-index:500; font-family:arial, verdana, sans-serif; width: 966px; float: left }
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;background: url(../img/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 12px 0 6px; height:36px;background:url(../img/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 12px 0 6px; height:36px; background:url(../img/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(../img/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(../img/blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(../img/blank_overa.gif) no-repeat right top;}
#nav li a.top_link:hover span.blank {background:url(../img/blank.gif) no-repeat right top;}
#nav li a.top_link:active {color:#fff; background: url(../img/blank_over.gif) no-repeat;}
#nav li a.top_link:active span {background:url(../img/blank_over.gif) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(../img/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(../img/blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(../img/blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_blank {color:#fff; background: url(../img/blank.gif) no-repeat;}
#nav li:active > a.top_blank {color:#fff; background: url(../img/blank_over.gif) no-repeat;}


/* Wiznav */
#nav li.top_blank {display:block; float:right;}
#nav li.top_blank a.top_blank {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:14px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;background: url(../img/blankbg.gif);}
#nav li.top_blank a.top_blank span {float:left; display:block; padding:0 6px 0 0px; height:36px; background:url(../img/blankbg.gif) right top;}
#nav li.top_blank a.top_blank:hover {color:#fff; background: url(../img/blankbg.gif) no-repeat;}
#nav li.top_blank a.top_blank span em {padding-top: 5px; float: left;}
#nav li.top_blank a.top_blank span em.mag {padding-top: 4px; float: left; margin-left: -10px }

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:13px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(../img/arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(../img/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(../img/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

.buttonStyle {
border: 0px none;
border: hidden;
float: left;
}