How to dynamically change the color of the selected menu item of a web page?


Tags: html,css,background-color,menu-items,menuitem-selection

Problem :

I am new to developing web pages. I am looking to create menus similar to the ones in stackoverflow.com (like Questions, Tags, Users shown above). How do I change the color of the selected menu (for example, the background color of the Question changes to orange when 'clicked')?

I have managed to change the color while hovering (using CSS) as that was simple, but I am having trouble with this.

Can I achieve this effect of changing the color of a clicked item using only CSS?



Solution :

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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>

    CSS Howto..

    How to give reference to static resources like css,images,java script in JSP?

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    How to do grid of div elements?

    How to concat css files with images and fonts form Bower in Grunt/Gulp/Webpack

    How can I create a footer/toolbar in an iPhone web app?

    How to apply page css to a polymer component

    How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How to make custom css fonts render exactly like designs

    How do I do this CSS border-bottom

    How do I make this carousel implementation better?

    How to add separate style to google.visualization.DataTable without changing its own styles

    how to copy font-family from a webpage

    How to make a html div vertically scrollable after it's height reaches 100% height of the page?

    How to refer to third level lists in css?

    How To Select Two classes with CSS?

    How to stick footer to bottom (not fixed) even with scrolling

    How to add styling (CSS) to tags in Javascript/Jquery

    Show HTML text if window width is too small with CSS

    How to change an image on click using CSS alone?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    site only shows half screen on mobile? Rest of screen is just body background?

    How to set two background color to one element in CSS?

    How to Scale Down a Large Image Using HTML and/or CSS

    In IE6, how to implement a:hover?

    How to beautify this nested list with css?

    Show warnings screen resolution

    Background Image in WebView showing in Simulator, but not on Device

    How to use CSS to create a particular stylized, multi-lined text box?

    How to remove this head css styling with javascript?