highlighting the current page in a list of links using css / html

Question

Edited to include HTML as requested - I have removed the full urls as there is no point posting them anyway as they are on a protected staging server

I am trying to amend a friend's website which has been built so that there is a sub menu which appears on every page but is coded only once.

I want to be able to add a highlight to the link for the page you are currently viewing, but I have to do this all in one html snippet - so the code below preceeds the html list which is used for navigation.

The list renders fine, except that I can't get the current page to highlight (the 'active' tag only highlighting as you click the page).

I have read some other posts about adding 'current link' formatting in a separate file but, unfortunately, I have to include all the code in this snippet.

Given that, is what I am trying to achieve possible?

Thanks

CSS:

<style>
    #navigation {
        color: #ffffff;
        font-family: Sans-Serif;
        height: 34px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #navigation li a {
        color: #000000;
        display: block;
        font-size: 12px;
        font-weight: bold;
        padding: 10px 18px;
        text-decoration: none;
    }
    #navigation li a:hover {
        background-color: #b36521;
        color: #ffffff;
    }
    #navigation li a:active {
        background: #f1d74c;
        color: #ffffff;
    }
</style>

HTML:

<div id="submenu">
    <h3>Menu</h3>
    <ul id="navigation">

        <li><a href="http://URL/SOAP-BARS">Soap bars</a></li>

        <li><a href="http://URL/LIQUID-SOAP">Liquid soap</a></li>

        <li><a href="http://URL/BATH-BODY">Bath and body</a></li>

        <li><a href="http://URL/SKINCARE">Skincare</a></li>

        <li><a href="http://URL/4573204014/CANDLES">Candles</a></li>

        <li><a href="http://URL/GIFTS">Gifts</a></li>

        <li><a href="http://URL/FAVOURS">Favours</a></li>

        <li><a href="http://URL/BROWSE-BY-SCENT">Browse by scent</a></li>

    </ul>
</div>

This is what `:active` does. If you want to highlight the "current" menu entry, you have to make it discernible to CSS by making it special in the HTML code - for example by adding a class "active" or "current". — CBroe, Jun 26 '13 at 11:00
Liam - I saw this but it seems to just talk about the active tag, which isn't what I am looking for. Or using a solution which requires me to have a file outside the html snippet, which isn't possible here. But if I am missing something, let me know! — Glayva, Jun 26 '13 at 11:06
Are you stuck with just CSS and HTML or can you use Javascript/jQuery? — Tim, Jun 26 '13 at 11:06
Thanks CBroe - but that sounds to me like I would need to define the active link on each page within the
Tim - I am not 100% sure (I am at about the limit of my knowledge tbh). All I know is that it has to be within the html snippet. If you have a suggestion that I can paste in and try I'm happy to do that, but it has to be all in a oner unfortunately. — Glayva, Jun 26 '13 at 11:09
Possibly a duplicate of http://stackoverflow.com/q/4626431/218597 also. — icabod, Jun 26 '13 at 11:16
Have you tried searching for this at all? I put the terms "highlight current page css" into Google and got a plethora of tutorials. Notably, this question would require a tutorial to answer - it's not a narrow problem to solve. — Paul Turner, Jun 26 '13 at 15:04

arifnpm · Answer 1 · 2013-06-26T11:19:59.527

12

http://www.w3schools.com/cssref/sel_active.asp

Definition and Usage The :active selector is used to select and style the active link.

A link becomes active when you click on it.

To highlight current page in the navigation you need to add extra class to mark the element as the active page (current page). for example you will have

#navigation li a.current{
   color: #ffffff;
   background:#f1d74c;
}

and the html

<div id="navigation">
    <li>
        <a ...> other page</a>
    </li>
    <li>
        <a class="current" ...>current page</a>
    </li>
</div>

Tim have a great way to add current to the current page link, you only need to add one javascript line:

$("a[href*='" + location.pathname + "']").addClass("current");

edited Jun 26 '13 at 11:19

answered Jun 26 '13 at 11:04

arifnpm

357
1
7

At the risk of sounding totally stupid (having never used javascript before) whereabouts in the code would I place the line of javascript? – Glayva Jun 26 '13 at 11:30
1

the javascript is usually located at the head tag, before this line you need to include jquery first. if you are using php you can automatically include this at every page head. – arifnpm Jun 26 '13 at 11:32
Ah ok - I can't edit the tag for the page unfortunately. – Glayva Jun 26 '13 at 11:50
Usually, but not must, you can also include it in the body section. – arifnpm Jun 26 '13 at 11:52
Depending on where you put the script, it'll vary when it executes. In the head it'll execute during page load. If you put it right before the
tag, it'll execute after everything has loaded.
– Tim Jun 26 '13 at 12:09
If you use aterixs in `a[href*=]` it will add class to all the links similar to it, so for example if you are on main page, and your `location.pathname == '/'` it will highlight ALL the links – tronerta Jul 25 '20 at 10:25

highlighting the current page in a list of links using css / html

1 Answers1

Linked