Scribd Logo
Upload

Welcome to Scribd!

  • 20 views

    3 Ways To Highlight Links To The Current Page With CSS - A Padded Cell

    Uploaded by

    d3mill Nepal
    The document discusses 3 ways to highlight links to the current page using CSS, JavaScript, or PHP. The CSS only solution involves adding classes to identify each page and link, then styling the current link differently. The JavaScript solution matches the URL of the current page to the URLs of links and styles matches. The PHP solution similarly identifies the current page URL and customizes the navigation display. The author chooses the JavaScript method for its ease of implementation without modifying HTML.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    3 Ways To Highlight Links To The Current Page With CSS - A Padded Cell

    Uploaded by

    d3mill Nepal
    20 views5 pages
    The document discusses 3 ways to highlight links to the current page using CSS, JavaScript, or PHP. The CSS only solution involves adding classes to identify each page and link, then styling the current link differently. The JavaScript solution matches the URL of the current page to the URLs of links and styles matches. The PHP solution similarly identifies the current page URL and customizes the navigation display. The author chooses the JavaScript method for its ease of implementation without modifying HTML.

    Original Description:

    Original Title

    3 Ways to Highlight Links to the Current Page with CSS _ A Padded Cell

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses 3 ways to highlight links to the current page using CSS, JavaScript, or PHP. The CSS only solution involves adding classes to identify each page and link, then styling the current link differently. The JavaScript solution matches the URL of the current page to the URLs of links and styles matches. The PHP solution similarly identifies the current page URL and customizes the navigation display. The author chooses the JavaScript method for its ease of implementation without modifying HTML.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    20 views5 pages

    3 Ways To Highlight Links To The Current Page With CSS - A Padded Cell

    Uploaded by

    d3mill Nepal
    The document discusses 3 ways to highlight links to the current page using CSS, JavaScript, or PHP. The CSS only solution involves adding classes to identify each page and link, then styling the current link differently. The JavaScript solution matches the URL of the current page to the URLs of links and styles matches. The PHP solution similarly identifies the current page URL and customizes the navigation display. The author chooses the JavaScript method for its ease of implementation without modifying HTML.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    3 

    Ways to Highlight Links to the Current Page with CSS

    by Megan McDermott, 15 June 2008 ­ 3:44pm

    Good usability suggests that you should always indicate links to the page the user is currently on. In fact, in an ideal case you wouldn’t link to the
    current page at all. On the other hand, in order to build a site that’s consistent and easy to maintain, navigation menus need to be either included with
    a separate html file or generated with a scripting language. This makes it difficult to identify the link to the current page and treat it differently.

    Fortunately, with the help of CSS, JavaScript, and PHP, there are several possible solutions to this problem.

    Why is this a problem?

    Including a link to the current page is a usability problem for several reasons:
    It causes confusion about where they are on your site I thought I was on the home page. So why is there a link to "home" there?
    It causes confusion about where they can go on your site Oh, that page might have what I want. Wait, I was just here..
    It forces an unnecessary page load, wasting the user's time.

    Solution #1: HTML/CSS only

    With this solution, all you have to do is add in some extra classes to your HTML and use CSS to style them. Each page has a class on the body tag
    that identifies it:

    <body class=”home”>

    Each navigation item also includes a class identifying that particular link:

    <ul>

    <li><a href=”home” class=”home”>Home</a>

    <li><a href=”articles.html” class=”articles”>Articles</a>
    <li><a href=”blog.html” class=”blog”>Blog</a>

    … etc…

    </ul>

    Then you target those classes in your CSS, defining a different state for the current page:

    body.home a.home, body.articles a.articles, body.blog a.blog {

    background­color: green;

    When you are on the home page, the link with the class “home” will have a green background. You can even add a cursor:default rule to make it
    appear that the link is no longer active.

    Pros:

    This solution does not require JavaScript or server­side programming. It’s easy to implement on a small, static site and works for users who have
    JavaScript turned off.

    Cons:

    The main problem with this is that you need to add a lot of extra classes into your HTML. This may be fine with for a simple site or when you only
    want the effect to appear on one small navigation menu. In addition, on dynamically generated sites it’s difficult if not impossible to add a unique class
    identifier to the body tag for each page.

    References:

    Auto­Selecting Navigation, by Drew McLellan for 24ways (2005)

    CSS Mastery: Advanced Web Standards Solutions, by Andy Budd (2006), p. 90

    Solution #2: JavaScript
    This solution uses JavaScript to match the URL of the current page to the URL of the link. The JavaScript simply gets the URL of the current page,
    then it looks through all the links in the navigation menu you target. If the link href matches the url of the page, it adds an extra CSS class to that link.

    Detailed instructions are available in the reference links below.

    Pros:

    This solution is easy to implement on any type of site, including dynamically generated sites. It does not require any modification of existing navigation
    menus or unique identifiers for pages or navigation items.

    Cons:

    This will not work if users have JavaScript turned off. This is relatively rare, but there are many emerging devices such as mobile phones, as well as
    some assistive technologies, that do not support JavaScript.

    It will also not work if the page is referenced by different URLs. For example, if the link points to http://yoursite.com/ but the page is referenced from
    http://yoursite.com/index.html. It's good practice to ensure that pages are only accessed by one URL anyway so I wasn't too worried about this.

    Solution #3: PHP

    There are a few ways to highlight links using PHP (or other server­side languages).

    The first is to use PHP to add an identifier to every page. Then build conditionals into your navigation menu to add an id to links that point to the
    current page. This option shares many of the same problems as the pure CSS solution above. (You could also use Dreamweaver template
    conditionals to do this without PHP).

    A second option is similar to the JavaScript method described above. Once again, you can get the URL of the current page and compare it with the
    links in your navigation menu. Then you build your navigation based on whether the navigation item matches the current page. In this case you can
    even modify the HTML code to remove the link anchor altogether or replace it with another tag (<strong> would be appropriate).

    See the references below for detailed instructions.

    Pros:

    Easy to implement if you have a customizable system and PHP is available.
    Cons:

    Requires PHP and a level of customization that may not be possible in with some systems. Most solutions require a unique identifying variable to be
    inserted on every page.

    References:

    Keeping Navigation Current With PHP, by Jason Pearce for A List Apart (2003)

    EasyNav ­ Keeping navigation clean and current (designed for complex nested navigation trees).

    Faux Active Link (instructions in PHP and ASP; there are some other interesting solutions in the comments)

    My Choice

    After looking through all the options I decided to try Solution #2, using JavaScript. The PHP solution seemed needlessly complex, and I really didn’t
    want to have to add any conditionals or classes to the HTML code or rebuild my navigation menu. It had to be something that would automatically
    parse the url’s and decide if the user was on the current page.

    The code developed by Jonathan Snook was the best for my needs, and removing the a tag entirely was an added bonus. I was even able to modify
    the code to add a <strong> tag where the <a> tag was. This enabled me to easily add some CSS to my previously designed menu.

    However, if I was developing a site from scratch I would consider creating the menu through PHP instead of using the Javascript solution here.

    This is the code I am using:

    /*
    CLCP v2.1 Clear Links to Current Page
    Jonathan Snook
    This code is offered unto the public domain
    http://www.snook.ca/jonathan/
    */
    window.onload = clearCurrentLink;

    function clearCurrentLink(){
        var a = document.getElementsByTagName("A");
        for(var i=0;i

    See it in action here.

    You might also like