Highling active links without CSS

Question

I have these menu links that when clicked and active should turn to say grey and stay on the color until you leave the page or go to another menu link. I have tried to use CSS to tell the active link by having class = "active" on every page. It works however, I do not find this very efficient and scalable as you have to write on every menu link. Is there another way to tell the active link and turn to the color say grey? Advice.

.navigation-menu {
  float: center;
  clear: both;
  font-size: 12px
}
.navigation-menu > li {
  margin-right: 3px;
  margin: 100px auto;
  line-height: 20px;
  max-width: 860px;
  display: inline;
}
.navigation-menu li {
  list-style-type: none;
}
.navigation-menu li a {
  background-color: #ffffff;
  display: inline-block;
  padding: 10px 20px;
  color: #696969;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}
.navigation-menu li.active a {
  background-color: grey;
  color: #fff;
}
.navigation-menu li ul {
  display: none;
}
.navigation-menu ul li a {
  padding: 10px 20px;
}
.navigation-menu li:hover ul {
  display: inline-block;
  position: absolute;
  padding: 5px;
}
.navigation-menu li ul li a:hover {
  background-color: black;
  color: white;
  display: block;
}
.navigation-menu li a:hover {
  background-color: black;
  color: white;
}

<ul class="navigation-menu">
  <li class="active"><a href='#'> link1 </a>
  </li>
  <li><a href='#'> Link2 </a>
  </li>
  <li><a href='#'> Link3 </a>
  </li>
  <li><a href='b.php'> Link4 </a>
  </li>
</ul>

By active you mean when you click on it or the current url ? — Ismail RBOUH, Jul 16 '16 at 12:02
Use JavaScript [onmouseover](http://www.w3schools.com/jsref/event_onmouseover.asp) Event and styles you want. — Hardik Bharadava, Jul 16 '16 at 12:02
Use :active in parent css, this way you dont have to add active class everywhere — Sanjeev Kumar, Jul 16 '16 at 12:03
@IsmailRBOUH kindly run the code snippet. When the menu link is active should remain on the color until the user leaves to or moves to the next menu link — Bob Mwenda, Jul 16 '16 at 12:04
@Tympaaz I do not have any JS. I'm using CSS to highlight the active menu link — Bob Mwenda, Jul 16 '16 at 12:09
Lord Vader Hates Furry Animals. :link, :visited, :hover, :focus, :active. May you never forget these link pseudo classes. — Kilmazing, Jul 16 '16 at 12:10
_"I do not find this very efficient and scalable as you have to write on every menu link"_ - no you don't; not if you make use of your server-side technologies (you said you used PHP in a comment) properly. Then you would have the necessary data for the menu in a structure such as an array that you loop over to output the menu items, and in that loop you have to write the code that checks for whether or not to output the active class _once_. — CBroe, Jul 16 '16 at 12:24
Possible duplicate: http://stackoverflow.com/questions/4626431/highlight-the-navigation-menu-for-the-current-page — ryantdecker, Jul 16 '16 at 13:31

score 1 · Answer 1 · answered Jul 16 '16 at 12:05

1

Depending on the language you are using at the background for server you can do it easily. Like in c# you can find the url of the application and there you can match the url with the active link text. Or You can generate a custom title from the page render controller and match as string to both

or in angularjs you can use the

 ng-class="someVar==0 ?'activeclass':'notactiveclass'"

hope you find the trick or answer from here

answered Jul 16 '16 at 12:05

Rishabh Jain

97
2

Unfortunately, I am using PHP – Bob Mwenda Jul 16 '16 at 12:07
I believe this is the right answer. However, the explanation may be a bit convoluted. The way to solve this problem is to compare the current url with the url of the links, if a match is found add an active state to the list element. This will all be done server side (PHP), and you will have to determine how you know that the current page is a match. – Steve Botello Jul 16 '16 at 12:19
Sorry , I am newbie here (in replying stuff) :Improving – Rishabh Jain Jul 16 '16 at 12:22

score 1 · Accepted Answer · answered Jul 16 '16 at 13:12

You can try this trick: add tabindex="0" inside <a> tags and activate the CSS code you wish to style them, with :focus.

.navigation-menu li a:focus{
  background-color:grey;
}

<ul class="navigation-menu" >
      <li class = "active" ><a href='#' tabindex="0"> link1 </a></li>
      <li><a href='#' tabindex="0"> Link2 </a></li>
      <li><a href='#' tabindex="0"> Link3 </a></li>
      <li><a href='#' tabindex="0"> Link4 </a></li>

    </ul>

Here's a working fiddle: https://jsfiddle.net/bf5ojcpt/

Highling active links without CSS

2 Answers2