CODEWITHSUNDEEP
htmlcss
user982124
user982124

Reputation: 4622

Highlight Current Navigation Link

I have a simple web page navigation bar which is working well. Now I want to style it so that the current page navigation link is a different colour. In this case I want to make the current page navigation link use this colour:

color: #00A1DB;

I've setup a simplified jsFiddle which shows what I currently have:

http://jsfiddle.net/fmdataweb/BEmXZ/

I've added a class of "current" to the Contacts link to represent that this is the current page. Now I need to modify the CSS so that it changes the colour of the "Contacts" link in the navigation bar to the specified colour.

I've hacked the CSS for the past few hours but can't quite work out the necessary changes to make to get this working. Really appreciate it if someone can show me how to make this happen - learning CSS as I go at the moment.

Thanks!

Upvotes: 1

Views: 4459

Answers (4)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28588

Set the styles for class active and hover:

Than you need to make the li active, on the server side. So when you are drawing the menu, you should know which page is loaded and set it to:

 <li class="active">Question</li>
 <li>Tags</li>
 <li>Users</li>

But if you are changing the content without reloading, you cannot change set the active li element on the server, you need to use javascript:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
  .menu{width: 300px; height: 25; font-size: 18px;}
  .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
  .menu li:hover, .menu li.active {
        background-color: #f90;
    }
</style>
</head>
<body>

<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

<script type="text/javascript">

var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());

  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )


  //Add the clicked button class
  $(this).addClass('active');
}

//Attach events to menu
$(document).ready(
  function()
  {
    $(".menu li").click(make_button_active);
  }  
)

</script>
</body>

</html>

Here is JSFiddle

Upvotes: 2

Priyank Patel
Priyank Patel

Reputation: 7006

See Demo

You can use the jquery .addClass() method to add your current class to the clicked li element and then remove the current class using .removeClass method for all the other li elements.

$('#nav ul li').on("click",function(){

  $(this).addClass('current');
var siblings =($(this).siblings());


  siblings.each(function (index)
    {
      $(this).removeClass('current');
    });


    });​

Upvotes: 1

cassi.lup
cassi.lup

Reputation: 1261

You can easily achieve this by assigning a class to your 'current' button when it is clicked.

You can style the class through CSS like this:

.current {
     background-color: #eee;
}

Upvotes: 0

Passerby
Passerby

Reputation: 10090

Is this what you want? http://jsfiddle.net/BEmXZ/2/

Essential part:

change

.sf-menu li.current {
    color: #00A1DB;
}

to

.sf-menu li.current a {
    color: #00A1DB ! important;
}

Upvotes: 0

Related Questions