Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS On load change css/hyperlink

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #39511
    joebodego
    Member

    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?

    #108454
    GMB
    Participant

    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.

    #108464
    Billy
    Participant

    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.

    #108473
    Billy
    Participant

    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.

    #108484
    GMB
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.