homepage Welcome to WebmasterWorld Guest from 54.166.65.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Active Link or On Page identification, highlight menu
jamsy




msg:3546141
 8:55 pm on Jan 11, 2008 (gmt 0)

In my menu i would like to have the link of the current page to be a different colour than the other links but am having difficulty doing this. I thought the active puesdo class would sort this but on reading up it doesn't.

Can anyone help me please. Here is part of my stlyesheet.

Thanks in advance.

.leftcats {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #555555;
line-height: 22px;
padding-top: 5px;
}

.leftcats a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #555555;
line-height: 22px;
padding-top: 5px;
text-decoration: none;
}

.leftcats a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #555555;
line-height: 22px;
padding-top: 5px;
text-decoration: none;
}

.leftcats a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ff0099;
line-height: 22px;
padding-top: 5px;
text-decoration: underline;
}

.leftcats a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ff0099;
line-height: 22px;
padding-top: 5px;
text-decoration: none;
}

 

your_store




msg:3546203
 10:20 pm on Jan 11, 2008 (gmt 0)

:active means the link is currently being clicked. You're going to have to put a class somewhere to identify the link.

I'd suggest turning it into text instead, since it's probably a bit confusing to users to have a link to the current page.

Robo




msg:3635669
 9:46 am on Apr 26, 2008 (gmt 0)

I ran into this topic, to bad it was not followed up.

Quote:
I'd suggest turning it into text instead, since it's probably a bit confusing to users to have a link to the current page....

It would be nice to change the link into highlighted text "You are now on this page". How would you achieve that, change that using CSS?

Receptional Andy




msg:3635675
 9:52 am on Apr 26, 2008 (gmt 0)

There's no way of knowing the current URL within CSS itself, so you need to work this out either with client side (e.g. javascript) or server-side scripting (e.g. PHP or ASP). Typically this is by changing the markup of the current link, and adding a class so that you can manipulate the display with CSS, e.g.


<ul>
<li><a href="/page">Page</a></li>
<li class="current_page">Current page</li>
<li><a href="/page2">Page 2</a></li>
</ul.

pageoneresults




msg:3635725
 1:42 pm on Apr 26, 2008 (gmt 0)

In your CSS...

#bhome a#home{
color:#f00;
}

On the home page...

<body id="bhome">

On the link for the home page (only one time, this is an ID and can only be used once)

<li><a href="" id="home"></a></li>

Works like a charm! I learned that here at WebmasterWorld years ago in the CSS Forum and have been using it ever since. Since we are using CSS, you can do just about anything you want with the "On Page State" of the link. I've created buttons that slide to the right, slide down, etc. I've assigned background images for more umph. I make fonts bold, italic, a different family, etc.

Just as an example, a small brochureware sites on page link states might look like this in the CSS...

#bhome a#home,
#babout a#about,
#bcontact a#contact,
#bfaqs a#faqs,
#bproducts a#products,
#bservices a#services,
#bsitemap a#sitemap
{
color:#f00;
background:#eee;
font-weight:bold;
}

And my menu might look like this...

<ul>
<li><a href="" id="home"></a></li>
<li><a href="" id="about"></a></li>
<li><a href="" id="contact"></a></li>
<li><a href="" id="faqs"></a></li>
<li><a href="" id="products"></a></li>
<li><a href="" id="services"></a></li>
<li><a href="" id="sitemap"></a></li>
</ul>

And my <body> elements would look like this...

<body id="bhome">
<body id="babout">
<body id="bcontact">
<body id="bfaqs">
<body id="bproducts">
<body id="bservices">
<body id="bsitemap">

Enjoy!

It would be nice to change the link into highlighted text "You are now on this page". How would you achieve that, change that using CSS?

Yes! You can do anything via CSS. That one would be a bit on the complex side for me and I'd probably create a background image that would appear while on the page. I mean, let your imagination and creativity run wild.

Using the above method, I can also highlight multiple links on a page.

#bhome a#home,
#bhome a#home2,
#bhome a#home3,
#bhome a#home4,
#babout a#about,
#bcontact a#contact,
#bfaqs a#faqs,
#bproducts a#products,
#bservices a#services,
#bsitemap a#sitemap
{
color:#f00;
background:#eee;
font-weight:bold;
}

If someone has a better way to skin this cat, please do come forward and let us in on the secret sauce. :)

coopster




msg:3635756
 3:21 pm on Apr 26, 2008 (gmt 0)

You can really cut back the CSS code bloat by not having an id on every <body> element. What I mean is, if the only reason you have an id on the body element is to "match it up" with the navigational anchors to change link status you can remove the id on the <body> element and use a little server-side magic to modify your anchor(s). The concept is started here using PHP [webmasterworld.com], but can easily be adapted to any server-side language.

In a nutshell what it is doing is comparing the current page URI with linked anchor elements within the page and removing the link and adding an "active link" class to the element in order to let the CSS modify behavior for that element.

I have since modified the original PHP function shown in that thread to handle multiple classes and locate href anywhere within the anchor. It works slick. Cut our CSS and CSS maintenance back huge.

SuzyUK




msg:3635814
 5:58 pm on Apr 26, 2008 (gmt 0)

In still use that method too Edward :)

You can really cut back the CSS code bloat by not having an id on every <body> element.

yes you can coop, but with an id on the body element (which your PHP script can put there for you if you like ;)) you can control templates in more ways that just highlighting the active link. so yes if that's all you want to do a php snippet is likely best as far as code bloat is concerned

I tend to use a similar PHP script that places a body ID on every page as I'm more comfortable with the CSS parts, but then once that body ID is in place I can get on with the functionality and do the styling later. For example I did a site a few years back which wanted different background images depending on which "section" you were in as well as the highlighted link, now that's not something that most scripters would think about when building a template.. but if they did the designers would gain control if the body ID was there at the start. changing an image is a design aesthetic after all isn't it?

I'm building another drupal template/theme for a client just now (which if you saw you would cringe). I just know that I need to get it working so the client/staff can use it, but I'm also their designer ;) and I do know that drop down/highlighted menus are one of their requirements later ... so I've built in the body ID as I don't know how many levels of drops are there nor what the urls will be yet.

I also know that each section of the site looks different either 2 cols or 3 depending on which bit you happen to be reading, I can do that with CSS using the body class, I also know that they are likely going to want a different header image per section, I can also do that of that using the body ID. Now I'm pretty sure that all this can be done via PHP too but when I get to tweaking the design elements of the site should I be tweaking PHP or CSS?

this so conflicts with what I've said for years, not so much for active link highlighting perhaps, but to my mind as soon as you have to go back to a site programmer to add a design functionality element it wasn't done properly in the first place.. so add in the basic CSS ID hook at the beginning :)

-Suzy

pageoneresults




msg:3635831
 6:11 pm on Apr 26, 2008 (gmt 0)

So add in the basic CSS ID hook at the beginning.

Specificity? Add the ID hook at the top of the "food chain" and then have total control on a page by page basis? Ah, I've been doing a little bit of that. I've taken this new SSL concept of changing the address bar to green and changing the page background color to green. I also change other things on the page using CSS by referencing the <body id"">.

Specificity? I don't know about you, but that word for some reason just presents problems rolling off the tongue. You? Try saying that three times quickly.

coopster




msg:3635864
 7:28 pm on Apr 26, 2008 (gmt 0)

yes you can coop, but with an id on the body element

Oh, trust me, I do indeed understand what you are saying here! That is why I clarified my statement by including the comment ...

What I mean is, if the only reason you have an id on the body element is to "match it up" with the navigational anchors to change link status you can remove the id on the <body> element

My emphasis added

Also, I know exactly what you are referring to when you say ...

that's not something that most scripters would think about when building a template.

But, but, but ... I'm not "most scripters" ;)
I won't try to kid you and tell you I didn't make a few mistakes on my first go round with my PHP markup class. You know me, I'm not a designer. I can make do in a pinch but I have always been the first to admit it just isn't my forte. Realizing this, quite a few years ago I developed a very dynamic markup class in PHP which today extends full control to the designer. Zero limitations. The designer develops the template and is in complete control of the HTML and CSS (and client-side scripting), including the header (DOCTYPE, language, charset, title, metas, style, scripting, etc.) navigation, body and footer. Yet behind the scenes the repetitive code is fully automated by server-side technology and the designer is relieved of the extra effort that was often required.

so add in the basic CSS ID hook at the beginning

That, my friend, is completely controlled by the designer :)
No PHP required. Slick. Now we just work on automating more tasks, like rotating entire CSS files or adding markup based on date/time or other agents of change.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved