- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
i have a php include that has 4 links, home, products, about us, contact us. Fine, i am loading the php include file into each page. The include file has all the respective hyperlink, however i would like when each page is loaded, for example the “About us” page that the css changes the type to “Bold” and a different color and also the hyperlink goes away so the user cannot click it. I would like this on all 4 pages. Can you help me?
I’ve always done this by creating a separate style for the link of the “live” page and applying it to that li. For a site with only four pages, that’s not a heck of a lot of work. That said, if there’s a simpler way of doing it (and there probably is), I’d be glad to know it.
I usually just give the <body> a class on each page, which is matched on the links. You then have this for example:
HTML
... ...
PHP
CSS
body.home li.home a,
body.contact-us li.contact-us a,
body.about-us li.about-us a {
color: grey;
cursor: default;
font-weight: bold;
}
So this is the most basic way to do it. The only problem is that the hyperlink does not go away (that could be done in JavaScript, but it would be too much work for such a trivial thing), but the cursor pretends there isn’t one there, which’ll dissuade the user from clicking it hopefully. And if they do, well they only reload the page.
Or just put this line of jQuery in that Chris just tweeted:
$("a[href='" + document.location.pathname + "']").addClass("current");
Then just add styles for .current in your CSS.
Forgot to mention that in the method I describe above I generally eliminate the hyperlink, keeping only the menu item: