CODEWITHSUNDEEP
javascripthtmlcssdjangomenu
John Eipe
John Eipe

Reputation: 11226

highlight currently selected link in css menu bar

I have a page with this URL: http://localhost:8000/progress/c/?l=1&c=1

And the below content to work as a simple css menu bar.

<div class="menu_div">
    <ul>
        <li><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
    </ul>
</div>

CSS styling is 

.menu_div ul
{
    padding:6px;
    margin:0px;
    font-size:12px;
    list-style:none;
    text-indent:15px;

}
.menu_div ul li
{
    line-height:28px;
    border-bottom:1px solid #000;
}
.menu_div ul li a
{
    text-decoration:none;
    font-color:#3A332D;
    display:block;
}
.menu_div ul li a:hover
{
    background:blue;
}
.menu_div ul li#active
{
    background:blue;
}

When I hover over the links the background color changes but the currently selected menu link is not highlighted in blue.

I'm using django framework.

Upvotes: 1

Views: 22601

Answers (5)

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

Try this jQuery code, it will add the class automatically

$(function(){

    var url = window.location.href; 

    $("#menu a").each(function() {

        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });

});

Upvotes: 5

catherine
catherine

Reputation: 22808

Just

css

.menu_div ul li.active{background:blue}

html

<div class="menu_div">
    <ul>
        <li id="page1"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
        <li id="page2"><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
        <li id="page3"><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
        <li id="page4"><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
    </ul>
</div>

script

#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>

Upvotes: 0

sg3s
sg3s

Reputation: 9567

In your CSS you have a class with the id 'active', this should probably be a class like this:

.menu_div ul li.active
{
    background:blue;
}

Further, I wouldn't recommend trying to match the 'active' or better formulated 'current' page using javascript client side.

Instead your script on the server should recognize the current page and add a class to the related menu item so it would look like this: 

<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>

Upvotes: 2

epascarello
epascarello

Reputation: 207527

.menu_div ul li#active

It says the active link needs an id of active. I see no id, hence why it is not blue.

If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.

Upvotes: 0

Skay
Skay

Reputation: 9493

Replace your id #active to class .active - that is more right way:

.menu_div ul li.active
{
    background:blue;
}

and add this class to active element in your list:

<div class="menu_div">
    <ul>
        <li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
    </ul>
</div>

Upvotes: 0

Related Questions