html menu using css "active current"

Question

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 :=

XML

<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 :=

CSS

.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 24-Jan-14 11:21am

Manish Dalwadi

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2014-01-24T16:33:00

Solution 1

Use CSS :active Selector[^]
So, in your case, you can try like...

CSS

.div1 ul li a:active
{ 
    background-color:yellow;
}

Posted 24-Jan-14 16:33pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

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/
.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 26-Jan-14 1:52am

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.