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

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

How to change color of the menu item when selected?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How to change color of the menu item when selected?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us