Click here to Skip to main content
14,698,201 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi..
i create a menu...but i dont know how to keep active it...
means
suppose my menu have ====>> Home Product About Us Contact Us
and menu color is "black" and hover effect is "gray"

==> Now My question is that
if i click on "home" then "home" link have to active(highlighted) with "maroon" or whatever color
if i click on product then product have to active with maroon color
or etc...

==>> sorry for my awkward explaination..
======================================
MY DESIGN CODING IS :=


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="temp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div2">
    <div class="div1">
        <ul>
            <li><a href="#" class="noborder leftside_radius">Home</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="http://www.facebook.com" class="rightside_radius">Contact Us</a></li>
        </ul>
    </div></div>
</body>
</html>




=====================================
MY CSS CODE IS :=


.div1
{
    margin: 0px;
    margin-left: 0px;
}
.div1 ul li
{
    float: left;
    list-style-type: none;
}

.div1 ul li a
{
    color: #FFFFFF;
    text-decoration: none;
    background-color: #333333;
    display: block;
    height: 36px;
    width: 130px;
    text-align: center;
    line-height: 36px;
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #cccccc;
}

.div1 ul li a:hover
{
    background: #666666;
}

.noborder
{
    border-left-style: none !important;
}

.leftside_radius
{
    border-radius: 8px 0px 0px 8px;
}
.rightside_radius
{
    border-radius: 0px 8px 8px 0px;
}
Posted
Comments
Mitchell J. 24-Jan-14 20:53pm
   
Do mean that if you are on a page, that page's link color in the menu bar should be different to all the other links, on that page only?

1 solution

Use CSS :active Selector[^]
So, in your case, you can try like...
.div1 ul li a:active
{ 
    background-color:yellow;
}
Comments
Manish Dalwadi 24-Jan-14 23:50pm
   
no dr. its not ...which i want
.
i want that
when we click on product then we can see that current on which link we are present..
if we click on about us and we go in about us page...then we can see that in menu that we clicked on about us link
"about us" link displayed as "yellow" color
if we clicked on home then "home" link displayed as yellow color .
.
i give a one link for demo please see that website and its menu...and clicked two three link..you got an idea that what i want
.
http://www.vaniyamatrimony.com/
.
   
Ok I understand. For that you can write codes on the page load of each page. Call some JavaScript function on page load and try to assign background color to that particular menu item related to the page.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900