Grow your CSS skills. Land your dream job.

On load change css/hyperlink

  • # August 25, 2012 at 1:22 pm

    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?

    GMB
    # August 25, 2012 at 1:27 pm

    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.

    # August 25, 2012 at 6:27 pm

    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 include('nav.php'); ?> ... 

    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.

    # August 26, 2012 at 3:00 am

    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.

    GMB
    # August 26, 2012 at 1:38 pm

    Forgot to mention that in the method I describe above I generally eliminate the hyperlink, keeping only the menu item:

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".