How to highlight the menu item in menu


Tags: html,css

Problem :

I am using a CSS menu in a web page and I want to know how to highlight the selected menu item of the CSS menu. I have pasted the HTML/CSS code below. Can anyone help me by posting the code snippet for highlighting the menu item?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
</head>
<body bgcolor="#ffffff">



<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 1px 1px 0px;
    background-color:#A5A5A5;
    background-repeat:repeat;
    border-color:#A6A6A6;
    border-width:0px;
    border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    display:block;
    zoom:1;
    float: left;
}
ul.pureCssMenu ul{
    width:0px;
}
ul.pureCssMenu li{
    display:block;
    margin:1px 0px 0px 1px;
    font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#FFFFFF;
    border-width:0px;
    border-color:#FCEEB0;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:5px;
    _padding-left:0;
    font:normal 11px Arial;
    color: #000000;
    text-decoration:none;
    cursor:pointer;
}
ul.pureCssMenu span{
    overflow:hidden;
}
ul.pureCssMenu li {
    float:left;
}
ul.pureCssMenu ul li {
    float:none;
}
ul.pureCssMenu ul a {
    text-align:left;
    white-space:nowrap;
}
ul.pureCssMenu li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
}
ul.pureCssMenu li.sep span{
    float:none; padding-right:0;
    width:3;
    height:100%;
    display:inline-block;
    background-color:#A6A6A6;   background-image:none;}
ul.pureCssMenu ul li.sep span{
    width:100%;
    height:3;
}
ul.pureCssMenu li:hover{
    position:relative;
}
ul.pureCssMenu li:hover>a{
    background-color:#FF1C1C;
    border-color:#4C99AB;
    border-style:solid;
    font:normal 11px Arial;
    color: #FFFFFF;
    text-decoration:none;
}
ul.pureCssMenu li a:hover{
    position:relative;
    background-color:#FF1C1C;
    border-color:#4C99AB;
    border-style:solid;
    font:normal 11px Arial;
    color: #FFFFFF;
    text-decoration:none;
}
ul.pureCssMenu li.dis a {
    color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
    display:block;
    background-image:url(./images/arrv_blue_2.gif);
    background-position:right center;
    background-repeat: no-repeat;
   padding-right:8px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{    _background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{    background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}
</style>
<!-- End PureCSSMenu.com STYLE -->



<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Home</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->



<!-- (c) 2009, PureCSSMenu.com -->


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html> 


Solution :

I guess what you want is to have class

ul.pureCssMenuSelected {
   //whatever the selection should look like
}

Then, in each html page you go to, you add that class to the option the page refers too.

<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui0"><a class="pureCssMenui0 pureCssMenuSelected" href="#">Home</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li>
</ul>

This because of course the html has no way of guessing what do you mean by selected item.

P.S.: Probably you probably don't want to use an anchor link on that option.

P.P.S.: As others mentioned, if you are using the links in the same page, you need to use javascript. In jQuery, the code could be:

$('a').click(function() { 
    $('.pureCssMenuSelected').removeClass('pureCssMenuSelected');
    $(this).addClass('pureCssMenuSelected'); 
}

Also, add the class pureCssMenuSelected to the initally selected item, directly in the HTML. Finally, if you use this last solution, call it something other than pure CSS menu :)


    CSS Howto..

    How to change Google Chrome Arabic default font in css?

    How to get same cursor(hand) on links in all browser?

    How can I force IE to keep some margin at left in it's browser window?

    how to pass jquery variable value into css property value?

    How to cut off text that is longer than the space available and show '…'?

    How to cycle through divs using left/right

    CSS: How to add icon/image after input element

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to display a list in two rows?

    How do you format php error messages? they don't respect css

    How do you make a div display two inline items that stretch the width?

    how to define minimum height for tbody in css

    Add background to first letter of a row of text. How?

    Can't show updated image

    How to correctly use text overflow in bootstrap

    How can I set a default pseudo styles in my css?

    HTML: Who takes care show/hide the scrollbar?

    CSS how to deal with a lot of sprite without having to create a new css class

    How to change background while changing visiblity?

    How can I handle XML namespaces in CSS Selectors or in jQuery?

    How do I use CSS to reposition this image?

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    How to stop Visual Studio css intellisense breaking when css is added via a custom control

    How to build a responsive padding for list menus using CSS?

    How do I differentiate between two different images in the same class in my CSS file

    How can I create this simple form example in HTML?

    How do I switch external CSS files?

    Create template page for showing jpg's from direct links [closed]

    How to define absolute positioned element's anchor point?