Reputation: 747

css code how to change active navigation button color

In my navigation buttons I have the following:- Home, Aboutus ,Profiles, More, Contact us What I need is suppose when I work on home its text color will change to yellow,others will remain the white color..when I click aboutus its text color will change to yellow,others will remain the white color.

so I have this:--

style.css

a.active{
    color: yellow;
} 

/* 
a:active {
  background-color: yellow;
  text-decoration: none;
  color: #fff;
} */



/* Toggled State */
input[type="checkbox"]:checked ~ .wrapper {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}



  input[type=checkbox]:checked ~ .wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .navigation.primary {
    max-width: 960px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #393b3d;
  }
  .navigation.primary ul {
    text-align: center;
    position: relative;
    z-index: 999;
  }
  .navigation.primary ul li {
    display: inline;
    margin: 0 10px;
    position: relative;
  }
  .navigation.primary ul li ul {
    position: absolute;
    left: -999em;
    text-align: left;
    background-color: #ccc;
    opacity: 0;
  }
  .navigation.primary ul li ul li {
    margin: 0;
    border-top: 1px dotted #000;
  }
  .navigation.primary ul li ul li:first-child {
    border-top: none;
  }
  .navigation.primary ul li ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary ul li ul li a:hover {
    color: #999;
  }



  .navigation.primary ul li:hover > ul {
    left: 0;
    opacity: 1;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  .navigation.primary ul li a {
    display: inline-block;
  }
  .navigation.primary ul li a:hover {
    color: #ccc;
  }

/*    .navigation.primary ul li a:active {
    color: yellow;
  } */
}
}

and html file is following:--

<body>

  <input type="checkbox" id="toggle-menu">
<div class="wrapper">
<label for="toggle-menu">&gt;</label>
<h1>realNews</h1>
<div class="navigation primary">
  <ul class="clearfix">
    <li><a href="#" >Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Profiles</a></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</div>

  <div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuriesLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
  </div>
</div>

here,When I click any button its changing to yellow color.but not staying.I need to remain yellow color until I click another button.what I am doing wrong??? I have the a:active{color:yellow} so,why it is not staying?

Upvotes: 2

Answers (6)

Vignesh Subramanian

Reputation: 7289

Using jquery its very simple to do

See the below demo

http://jsfiddle.net/pqckxw59/

Complete html code

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(".clearfix li").live("click",function(){
    $(".clearfix li").removeClass("active");
        $(this).addClass("active");
    });
</script>
<style>
    .active{
        background-color:Yellow;
    }
body {
  background-color: #f0f6ff;
  font-family: arial, georgia, sans-serif;
  font-size: 16px;
}

h1 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #fff;
}


a:active {
  color: yellow;
     } 



p {
  margin: 10px 0;
}

.wrapper {
  width: 100%;
  position: relative;
  min-height: 600px;
  background-color: #fff;
  -webkit-box-shadow: -10px 0 15px #000;
  -moz-box-shadow: -10px 0 15px #000;
  box-shadow: -10px 0 15px #000;
  -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}
.wrapper .content {
  color: #ccc;
  padding: 10px;
  clear: both;
}

input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  padding: 10px;
  clear: both;
  background-color: #fff;
  display: block;
  z-index: 999;
  float: left;
  cursor: pointer;
}

/* Toggled State */
input[type="checkbox"]:checked ~ .wrapper {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation.mobile {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.navigation.mobile ul {
  width: 250px;
}
.navigation.mobile ul li ul {
  display: none;
}
.navigation.mobile ul li a {
  display: block;
  padding: 10px;
  color: #333;
}
.navigation.mobile ul li a:hover {
  background-color: #82b965;
  color: #333;
}

.navigation.primary {
  display: none;
}

@media only screen and (min-width: 35em) {
  .wrapper {
    max-width: 960px;
    margin: 0 auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  label {
    display: none;
  }

  .navigation.mobile {
    display: none;
  }

  input[type=checkbox]:checked ~ .wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .navigation.primary {
    max-width: 960px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #393b3d;
  }
  .navigation.primary ul {
    text-align: center;
    position: relative;
    z-index: 999;
  }
  .navigation.primary ul li {
    display: inline;
    margin: 0 10px;
    position: relative;
  }
  .navigation.primary ul li ul {
    position: absolute;
    left: -999em;
    text-align: left;
    background-color: #ccc;
    opacity: 0;
  }
  .navigation.primary ul li ul li {
    margin: 0;
    border-top: 1px dotted #000;
  }
  .navigation.primary ul li ul li:first-child {
    border-top: none;
  }
  .navigation.primary ul li ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }

  .navigation.primary ul li ul li a:hover {
    color: #999;
  }



  .navigation.primary ul li:hover > ul {
    left: 0;
    opacity: 1;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  .navigation.primary ul li a {
    display: inline-block;
  }
  .navigation.primary ul li a:hover {
    color: #ccc;
  }
}
</style>
</head>
<body>
    <label for="toggle-menu">&gt;</label>
    <h1>rainBow</h1>
    <div class="navigation primary">
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Profiles</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </div>
</body>
</html>

If you need a pure css solution check the below link

http://codepen.io/anon/pen/yNxpqb

Upvotes: 1

user3896501

Reputation: 3037

use class

html

<li><a href="#" class="active">About us</a></li>

var navItems = document.querySelectorAll('.navigation ul li a');
for(var i = 0; i < navItems.length; i++){
    navItems[i].addEventListener('click', function(e){
        for(var j = 0; j < navItems.length; j++)
            navItems[j].className = '';
        this.className = 'active';
    });

}

css

a.active{color:#ff0}

Upvotes: 0

Alex M

Reputation: 1

What Ghost rider is asking about is not to just change the color while the link is being clicked, or for visited links (that won't reset when clicking another link).

I don't think there is any selector to accomplish what you're looking for on the fly with CSS. However, you could do something like this in jQuery/JS:

In your script:

/*
 This will work specifically with your primary menu links,
 and won't alter any other div links. You also won't need
 to make changes to your CSS, but you could otherwise do
 the same with classes if you wish to toggle a CSS class.
 */
$('.navigation.primary > ul > li > a').click(function() {
  //reset all menu links to default color
  $('.navigation.primary > ul > li > a').css('color', '#fff');
  //set currently pressed to active color which will remain until next link pressed
  $(this).css('color', 'yellow');
});

body {
  background-color: #f0f6ff;
  font-family: arial, georgia, sans-serif;
  font-size: 16px;
}

h1 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #fff;
}


a:active {
  color: yellow;
     } 



p {
  margin: 10px 0;
}

.wrapper {
  width: 100%;
  position: relative;
  min-height: 600px;
  background-color: #fff;
  -webkit-box-shadow: -10px 0 15px #000;
  -moz-box-shadow: -10px 0 15px #000;
  box-shadow: -10px 0 15px #000;
  -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}
.wrapper .content {
  color: #ccc;
  padding: 10px;
  clear: both;
}

input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  padding: 10px;
  clear: both;
  background-color: #fff;
  display: block;
  z-index: 999;
  float: left;
  cursor: pointer;
}

/* Toggled State */
input[type="checkbox"]:checked ~ .wrapper {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation.mobile {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.navigation.mobile ul {
  width: 250px;
}
.navigation.mobile ul li ul {
  display: none;
}
.navigation.mobile ul li a {
  display: block;
  padding: 10px;
  color: #333;
}
.navigation.mobile ul li a:hover {
  background-color: #82b965;
  color: #333;
}

.navigation.primary {
  display: none;
}

@media only screen and (min-width: 35em) {
  .wrapper {
    max-width: 960px;
    margin: 0 auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  label {
    display: none;
  }

  .navigation.mobile {
    display: none;
  }

  input[type=checkbox]:checked ~ .wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .navigation.primary {
    max-width: 960px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #393b3d;
  }
  .navigation.primary ul {
    text-align: center;
    position: relative;
    z-index: 999;
  }
  .navigation.primary ul li {
    display: inline;
    margin: 0 10px;
    position: relative;
  }
  .navigation.primary ul li ul {
    position: absolute;
    left: -999em;
    text-align: left;
    background-color: #ccc;
    opacity: 0;
  }
  .navigation.primary ul li ul li {
    margin: 0;
    border-top: 1px dotted #000;
  }
  .navigation.primary ul li ul li:first-child {
    border-top: none;
  }
  .navigation.primary ul li ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }

  .navigation.primary ul li ul li a:hover {
    color: #999;
  }



  .navigation.primary ul li:hover > ul {
    left: 0;
    opacity: 1;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  .navigation.primary ul li a {
    display: inline-block;
  }
  .navigation.primary ul li a:hover {
    color: #ccc;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="toggle-menu">&gt;</label>
<h1>rainBow</h1>
<div class="navigation primary">
  <ul class="clearfix">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About us</a>
    </li>
    <li><a href="#">Profiles</a>
    </li>
    <li><a href="#">More</a>
    </li>
    <li><a href="#">Contact us</a>
    </li>
  </ul>
</div>

Edit: Just in case please keep in mind this will only work while the user is on the same page and clicking anchor links, it will reset once they leave to another page/reload.

Upvotes: 0

Himesh Aadeshara

Reputation: 2121

you can does like this

.navigation ul a.active{
    // write your color code here.
}

or

.navigation ul a:active{
    // write your color code here.
}

Upvotes: 0

Light

Reputation: 1097

Try to remove active class and add class for current selection:

$("a").click(function(){
  $('.clearfix a').removeClass("active");
   $(this).addClass("active");
});

Upvotes: 0

Bhavin Solanki

Reputation: 4818

You need to use a:active for active link and for visited you can use a:visisted

For iE

a:active{
 color:Yellow;  
}

<label for="toggle-menu">&gt;</label>
<h1>rainBow</h1>
<div class="navigation primary">
  <ul class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Profiles</a></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</div>

Upvotes: 0

css code how to change active navigation button color

Answers (6)

Related Questions