CODEWITHSUNDEEP
csslistmenuhighlight
MJ3111
MJ3111

Reputation: 43

Highlight sub menu item when being viewed

I have a menu that is basically nothing but a bunch of unordered lists inside of each other. Here is an example:

<div id="horiz-menu" class="moomenu"><div class="wrapper">
  <ul class="menutop">
    <li><a href="something.html"><span>Home Page (top menu item)</span></a>
      <ul>
        <li><a href="something2.html"><span>Second page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
    <li class="parent active"><a href="something3.html"><span>Resources (top menu item)</span></a>
      <ul>
        <li id="current" class="active"><a href="something4.html"><span>Third Page (sub menu item)</span></a>
        </li>
        <li><a href="something5.html"><span>Fourth Page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div></div>

It is styled to look like the top menu items are the horiz nav menu and the sub menu items are a vertical drop down list (no scrolling) when the top menu item is hovered over; hidden other wise. That all works. My question is what would be the proper way to code css so the sub menu items get highlighted (the background color should change) when the visitor is on that page (not simply hovering over that menu item)?

I have tried this:

#horiz-menu ul li.active {background-color:#000;}
#horiz-menu ul li#current {background-color:#000;}

I don't know if this is the way to do this or not. Can some one help? If your confused I want to be able to use css to color the second ul with an li class="active" or an id="current". The "active" and "current" id and class get applied dynamically to what ever list item the page being viewed is.

Thanks!

Upvotes: 3

Views: 2642

Answers (2)

Glen
Glen

Reputation: 11

Try the addClass Method in the JQuery

$("a.classname").click(function(){

    $("li#idname").addClass("active");

});

Upvotes: 1

Josh Allen
Josh Allen

Reputation: 997

Using the .active class with background color SHOULD work, however, it depends on what other CSS you have. You have to make sure the specificity of the .active or #current is greater than the default styling (#horiz-menu ul li). Also, be sure to double check that it is the li that has the default background css rather than the anchor inside of it.

Upvotes: 0

Related Questions