How to change color of the menu item when selected?

Question

3.20/5 (2 votes)

See more:

Hi guys! I want to change the color of the text and it background from being selected. But I do not know WHAT and WHERE to change it.
Here is my menu Item:

XML

<table style="width:100%" align="center">
        <tr>
            <td align="center">

    <div class="container">
            <section class="color-4">
                <nav class="cl-effect-17" align="center">

                    <a href="adminCS.aspx" data-hover="MyWorkplace">MyWorkplace</a>
                    <a href="admincontractInfo.aspx" data-hover="Contract Info">Contract Info</a>
                    <a href="adminwOutContract.aspx" data-hover="W/ out Contract">W/ out Contract</a>
                    <a href="adminbatchProcess.aspx" data-hover="Batch Process">Batch Process</a>
                    <a href="Admin.aspx" data-hover="Administrator">Administrator</a>

                </nav>
            </section>
        </div><!-- /container -->
                <br />
            </td>
        </tr>
    </table>

here is my CSS for Class color 4:

CSS

.color-4 {
    background: #ff6a00;
}

Here is my CSS for nav class="cl-effect-17:

C#

nav a {
    border-radius: 8px;
    position: relative;
    display: inline-block;
    margin: 15px 25px;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.34em;
}

nav a:hover,
nav a:focus {
    outline: none;
}


/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
    color: #10649b;
    text-shadow: none;
    border-radius: 8px;
}

.cl-effect-17 a::before {
    color: #fff;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}

.cl-effect-17 a::after {

    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background-color:violet;
    opacity: 0;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;

}

.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {

    opacity: 0;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    transform: translateY(-2px);
}

I need it now. Please Help me :(

Posted 13-Aug-14 16:59pm

DarkDreamer08

Updated 13-Aug-14 20:09pm

v4

Add a Solution

Comments

VishwaKL 14-Aug-14 0:32am

write a java script/ Jquery with on houver method there you can change color or text or what you want

DarkDreamer08 14-Aug-14 0:35am

How to do that? I am not that familiar with scripts and JQUERY. Please help me....

Emad Al Hawary 14-Aug-14 2:19am

save your time espicially with menus :

take this link and see the example

http://cssmenumaker.com/sites/default/files/menu_source/135/source.zip

DarkDreamer08 14-Aug-14 2:24am

I am sorry to say that the example that you gave to me does not answer my question. Can you help me out?

Emad Al Hawary 14-Aug-14 2:26am

try this
http://www.w3schools.com/website/tryit.asp?filename=tryweb_demo_home_nav

DarkDreamer08 14-Aug-14 2:42am

I check it but it looks like the same of all the articles I've read at the internet. it is also like my codes above that whenever I hover my mouse to the menu item, It change its color. What I am asking is that whenever I SELECT an item, it will change its text and border color

2 solutions

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)

ClimerChinna · Accepted Answer · 2014-08-13T21:14:00

add below css styles to your code in the page where you are having menu items:

XML

<style type="text/css">
        .item{background-image:url(../images/sprite.png) !important; background-repeat:no-repeat !important;}
        .item:hover{background-image:url(../images/sprite-hover.png) !important; background-repeat:no-repeat !important;}
        .item:visited{background-image:url(../images/sprite-hover.png) !important; background-repeat:no-repeat !important;}
        .shift{ background-position:2px -112px !important; }
</style>

replace menu code like below

XML

<table style="width: 100%" align="center">
                    <tr>
                        <td align="center">

                            <div class="container">
                                <section class="color-4">
                                    <nav class="cl-effect-17" align="center">

                                        <a href="adminCS.aspx" data-hover="MyWorkplace" class="item shift adminCSactive">MyWorkplace</a>
                                        <a href="admincontractInfo.aspx" data-hover="Contract Info" class="item shift contractinfoasctive">Contract Info</a>
                                        <a href="adminwOutContract.aspx" data-hover="W/ out Contract" class="item shift woutcontractactive">W/ out Contract</a>
                                        <a href="adminbatchProcess.aspx" data-hover="Batch Process" class="item shift adminbatchprocessactive">Batch Process</a>
                                        <a href="Admin.aspx" data-hover="Administrator" class="item shift adminactive">Administrator</a>

                                    </nav>
                                </section>
                            </div>
                            <!-- /container -->
                            <br />
                        </td>
                    </tr>
                </table>

add below css style in every page which you are redirecting:

like for adminCS.aspx page add below style:

XML

<style type="text/css">
        .<pre>adminCSactive {
            color: #fff;
            background-color: #7ac144;
            background-image: url(images/sprite-hover.png) !important;
            background-repeat: no-repeat !important;
        }
    &lt;/style&gt;</pre>

for admincontractInfo.aspx page:

<style type="text/css">
        .<pre>contractinfoasctive {
            color: #fff;
            background-color: #7ac144;
            background-image: url(images/sprite-hover.png) !important;
            background-repeat: no-repeat !important;
        }
    &lt;/style&gt;</pre>

for adminwOutContract.aspx page:

<style type="text/css">
        .<pre>woutcontractactive{
            color: #fff;
            background-color: #7ac144;
            background-image: url(images/sprite-hover.png) !important;
            background-repeat: no-repeat !important;
        }
    &lt;/style&gt;</pre>

for adminbatchProcess.aspx page:

<style type="text/css">
        .adminbatchprocessactive{
            color: #fff;
            background-color: #7ac144;
            background-image: url(images/sprite-hover.png) !important;
            background-repeat: no-repeat !important;
        }
    </style>

for Admin.aspx page:

<style type="text/css">
        .adminactive{
            color: #fff;
            background-color: #7ac144;
            background-image: url(images/sprite-hover.png) !important;
            background-repeat: no-repeat !important;
        }
    </style>

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-08-13T22:09:00

Solution 2

See the demo - [Demo] Change Background Color of Tab on Tab Click[^]. It might help you.

Posted 13-Aug-14 22:09pm

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

Comments

DarkDreamer08 14-Aug-14 21:33pm

Thank you!!!

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 17-Aug-14 1:29am

Welcome.:)

DarkDreamer08 17-Aug-14 21:18pm

Hey, I need help here http://www.codeproject.com/Questions/808464/How-to-make-scrollable-Grid-View-with-fixed-header.. Help me please :) Thank you