CODEWITHSUNDEEP
javascriptphphtmlcss
user3024835
user3024835

Reputation: 49

How to change active menu and submenu item style

I'm trying to change the colour of active menu/submenu which is selected by user.

For example when Sub11 is clicked, Link 1 and Sub11 will both turn red. Likewise when Sub22 is clicked, Link 2 and Sub22 will be red.

ul a { cursor: pointer; }
.active { color:red;}
<ul>
 <li class="active"><a>Link 1</a>
     <ul>
         <li><a>Sub11</a></li>
         <li><a>Sub12</a></li>
     </ul>
 </li>
 <li><a>Link 2</a>
     <ul>
         <li><a>Sub21</a></li>
         <li><a>Sub22</a></li>
     </ul>
 </li>
 <li><a>Link 3</a></li>
</ul>

Upvotes: 2

Views: 3213

Answers (1)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

try using jquery this code:

$('.link > a').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
});

$('.submenu > li').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
    $(this).parent('ul').prev('a').addClass('active');

});

Explanation:

The first part: whenever you click on .link item you remove every other active item and set the clicked one to active.

The second part: whenever you click on a submenu item you remove active state from the previous item and set it to the clicked submenu item and its predecessor .link item

You gonna have to add classes link and submenu to your html like this:

<ul>
 <li class="link">
     <a class="active">Link 1</a>
     <ul class="submenu">
         <li><a>Sub11</a></li>
         <li><a>Sub12</a></li>
     </ul>
 </li>
 <li class="link">
     <a>Link 2</a>
     <ul class="submenu">
         <li><a>Sub21</a></li>
         <li><a>Sub22</a></li>
     </ul>
 </li>
 <li class="link"><a>Link 3</a></li>
</ul>

Here is a fiddle

Upvotes: 2

Related Questions