CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Broodje
Broodje

Reputation: 75

highlight current menu item

I am trying to get the current menu item highlighted, I searched various sited for a solution but I just can't seem to make it work. I hope you can help me! I have this now:

   <div class="menu">
    <ul class="highlight">

            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="contact.html">Contact</a></li>

    </ul>
</div>


.menu a{
  background-color:  #F2F2F2;   
  color: black;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px;

  }

 .active {
color: black;
}

.menu  li {
display: inline;
opacity: 0.5;

}
.menu li:hover {
opacity: 1;
}

I know I have to add the class .active to the menu only whatever I try .menu li keeps overriding it. I really don't know what to do now.

Upvotes: 0

Views: 6510

Answers (4)

Popa Felician
Popa Felician

Reputation: 46

you could add an active class via jQuery if you have a menu that changes tabs without redirecting to a new page

jQuery:

$('.menu a').click(function(event){
    event.preventDefault();
    $('.menu a').removeClass('active')
    $(this).addClass('active');
});

CSS:

.menu a.active {
    color: red;
}

Or you could simply add .active class to the new page link that should be active.

http://jsfiddle.net/1ruy1t2h/3/

Upvotes: 1

Ferrakkem Bhuiyan
Ferrakkem Bhuiyan

Reputation: 2783

in jquery 

<script type="text/javascript">
        jQuery(document).ready(function($){
            // Get current url
            // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
            var url = window.location.href;
            $('.menu a[href="'+url+'"]').addClass('current_page_item');
        });
    </script>

Upvotes: 1

malteriechmann
malteriechmann

Reputation: 226

The HTML could look like this:

  <div class="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li class="active"><a href="about.html">About</a></li>
      <li><a href="work.html">Work</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

And the CSS could look like this:

.menu li a {   
  color: black;
  font-size: 15px;
  font-weight: bold;
}

.menu li.active a {
  color: red;
}

.menu li a:hover {
  color: blue;
}

This is a fiddle to demonstrate the code: http://jsfiddle.net/e01mvmgz/

Upvotes: 0

Prasad Paranjape
Prasad Paranjape

Reputation: 151

You can try 2 things: 1. put css for .active after .mennu li. 2. use !important in .active class. eg. .active {color:black !important;}

This should fix your issue.

If problem persists, create a jsfiddle of the issue and send back link.

Upvotes: 0

Related Questions