Results 1 to 7 of 7

Thread: Highlight the active link in a navigation menu

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Highlight the active link in a navigation menu

    I wonder if the script is all right. Please review my code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <style>
    ul {list-style-type:none; margin:0; padding:0;}
    li {display:inline;}
    a.active {background:red;}
    </style>
    </head>
    <body>
    <ul>
    <li><a href="http://www.example.com/home">Home</a></li>
    <li><a href="http://www.example.com/news">News</a></li>
    <li><a href="http://www.example.com/contact">Contact</a></li>
    <li><a href="http://www.example.com/about">About</a></li>
    </ul>
    <script>
    for (var i = 0; i < document.links.length; i++) {
        if (document.links[i].href == document.URL) {
            document.links[i].className = 'active';
        }
    }
    </script>
    </body>
    </html>
    It should highlight the current page link in the navigation bar.

  2. #2
    Join Date
    Aug 2010
    Posts
    86
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I think that should be a colon not a period. Try changing a.active to a:active.

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    @tonybabb: No it shouldn't. He's trying to use active as a classname for the current link that the client is on in the web page, not a cursor position.

    @OP: Javascript really isn't ideal for situations like these. Is there a reason, in particular, that you're using Javascript and not server side. Server side, I usually set a body class to the page's identifier (e.g., "home", "contact", "about"), and give each link the same class. That way you can target the links via the body:
    Code:
    body.contact ul li.contact a
    {
        // link active/current
    }
    However, if you really want to use Javascript, what you're doing should essentially be working. The issue may be that there's a trailing slash in some scenarios. Use Javascript to detect if a trailing slash is there or not, then remove it if it is there (or just use a regex to match everything but the slash). If that doesn't work, log the document url and the link url to the console, and compare it manually to debug the issue. If you need help doing that (after you've tried removing the slash via Javascript), reply back with what you've tried and I'll try to troubleshoot it for you.

  4. #4
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Nile View Post
    However, if you really want to use Javascript, what you're doing should essentially be working.
    Hi Nile and thanks for the answer!
    Yes it seems to work. However, there's one thing I don't know how to do: my site landing page and Home are the same. In other words, http://www.example.com/ and http://www.example.com/home go to the same page. Now if a visitor goes to http://www.example.com/ my scipt fails. To resolve the issue I tried this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <style>
    ul {list-style-type:none; margin:0; padding:0;}
    li {display:inline;}
    a.active {background:red;}
    </style>
    </head>
    <body>
    <ul>
    <li><a href="http://www.example.com/home">Home</a></li>
    <li><a href="http://www.example.com/news">News</a></li>
    <li><a href="http://www.example.com/contact">Contact</a></li>
    <li><a href="http://www.example.com/about">About</a></li>
    </ul>
    <script>
    for (var i = 0; i < document.links.length; i++) {
        if (document.links[i].href == document.URL) {
            document.links[i].className = 'active';
        } else {document.links[0].className = 'active';}
    }
    </script>
    </body>
    </html>
    But it doesn't work. Example:
    https://googledrive.com/host/0B5jOXz...DWm8/menu.html

    Any thoughts?
    Last edited by Rain Lover; 01-04-2014 at 03:53 AM.

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    If "home" just redirects to the index, why don't you just make the link to "home" the index? For example:
    Code:
    <li><a href="http://www.example.com/">Home</a></li>
    Anyways, to fix this issue the hard way (strictly for learning purposes... not recommended, go with what I said above), you'd do something like:
    Code:
    for (var i = 0; i < document.links.length; i++) {
        if (document.links[i].href === document.URL || (document.URL === "http://example.com/" && document.links[i].href === "http://example.com/home")) {
            document.links[i].className = 'active';
        }
    }
    Of course, apply whatever mechanism you use to deal with optional trailing slashes.

  6. The Following User Says Thank You to Nile For This Useful Post:

    Rain Lover (01-05-2014)

  7. #6
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Nile View Post
    If "home" just redirects to the index, why don't you just make the link to "home" the index? For example:
    Code:
    <li><a href="http://www.example.com/">Home</a></li>
    No, Home doesn't always redirect to a single URL: it can be seen with either http://www.example.com/ or http://www.example.com/.

    Thanks for the snippet!
    Last edited by Rain Lover; 01-04-2014 at 05:55 AM.

  8. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No problem, good luck.

Similar Threads

  1. Highlight the active thumbnail in a slideshow
    By Rain Lover in forum JavaScript
    Replies: 5
    Last Post: 06-30-2012, 08:24 AM
  2. Replies: 6
    Last Post: 09-16-2009, 02:31 AM
  3. Replies: 7
    Last Post: 02-05-2008, 08:06 PM
  4. How to mark an active link on css (Slashdot Menu)
    By Gorki in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-30-2007, 08:36 AM
  5. Top Nav Bar III - how can i highlight active page?
    By vidigru in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 04-18-2005, 05:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •