CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user153923
user153923

Reputation:

Setting Active Menu Item with CSS and JQuery

I have a div menu on a webpage that looks great, but I want to indicate the active page by changing the coloring on an element.

What I have tried does not work.

Fiddle me this, Batman: http://jsfiddle.net/jp2code/rj39rup6/

This is the part of the CSS that works great, because I copied it from a website:

nav {
  background-color: #999999; /* silver */
  border: 1px solid red;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display:block;
  font-family: Stencil, sans-serif, monospace;
  margin: 8px 22px 8px 22px;
  overflow: hidden;
  width: 90%;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav > ul > li > a > .caret {
  border-top: 4px solid #CC0000; /* Red */
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  vertical-align: middle;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear; 
}
nav > ul > li > a {
  color: #CC0000;
  display: block;
  line-height: 45px;
  padding: 0 24px;
  text-decoration: none;
}
nav > ul > li:hover {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
}
nav > ul > li:hover > a {
  color: rgb( 255, 255, 255 ); /* white */
}
nav > ul > li:hover > a > .caret {
  border-top-color: rgb( 255, 255, 255 ); /* white */
}
nav > ul > li > div {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: none;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 165px;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav > ul > li:hover > div {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav > ul > li > div ul > li {
  display: block;
}
nav > ul > li > div ul > li > a {
  color: #fff;
  display: block;
  padding: 12px 24px;
  text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
  background-color: rgba( 255, 255, 255, 0.1);
}

The html is:

<div class="nav">
  <nav>
    <ul>
      <li id="miHome"><a href="Default.aspx">Home</a></li>
      <li id="miAbout"><a href="About.aspx">About</a></li>
      <li id="miContact"><a href="Contact.aspx">Contact</a></li>
    </ul>
  </nav>
</div>

The jQuery:

$(document).ready(function () {
  var d = document.getElementById("miHome");
  d.className = 'selected';
});

The CSS I added (that is probably done incorrectly), is:

.selected nav > ul > li > div {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected nav > ul > li > a {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected nav > ul > li:hover {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
}
.selected nav > ul > li:hover > a {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}

Did I write my CSS wrong or use jQuery incorrectly? Could someone help me get this working?

Also, can someone that is better with web design suggest a better color selection for the active menu item? The website colors are Blue, Red, Gold and Silver (USMC Dress Blues).

Upvotes: 0

Views: 1992

Answers (5)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

I think you need to change a color for li when his page href is load .. If this what you need you can use

$(document).ready(function () {
   // get path
  var pathname = window.location.pathname.split("/");
   // get file name
  var filename = pathname[pathname.length-1];
  $('a[href="'+filename+'"]').closest('li').addClass('selected');
});

let me explain that a little bit .. say your url = 'http://www.website.com/Default.aspx'; we split that url to an array .. and get the file name for example(Default.aspx) so we find the anchor which has href="Default.aspx" and use closest to get parent li for this anchor and addClass to it .. this code will make the same things with another anchors .. but be sure that your file name is a last variable in url array /Default.aspx not /Default.aspx?something=hhh hope it will help

Upvotes: 1

Stefan
Stefan

Reputation: 3041

This code will add the class to the correct nav item on page load.

$(document).ready(function () {
  id = (function() {
    f = window.location.href.split('/').pop().split('.')[0];
    return "mi"+f.substr(0, 1).toUpperCase() + f.substr(1)
  })
  $("#"+id()).addClass("selected")
});

Upvotes: 1

Neil S
Neil S

Reputation: 2304

First off, you aren't using jQuery properly. 

var d = document.getElementById("miHome");
d.className = 'selected';

can be simplified to 

$('#miHome').addClass('selected');

Also, your CSS isn't targeting the right elements. You are adding the selected class to the li element, not the parent of the nav element. So your CSS rules need to be adjusted.

Please see the fiddle here: http://jsfiddle.net/e2a30ynb/2/ (I also removed some unused CSS declarations)

Upvotes: 1

Golinmarq
Golinmarq

Reputation: 1006

Your css is wrong. The class .selected is located wrong. 

.selected > div {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected  > a {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected:hover {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
}
.selected:hover > a {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
  color: white;
}

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

You are targeting the wrong chain after your target, .selected. Remove the nav > ul > li > chain to access the elements

$(document).ready(function() {
  var d = document.getElementById("miHome");
  d.className = 'selected';
});
nav {
  background-color: #999999;
  /* silver */
  border: 1px solid red;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: block;
  font-family: Stencil, sans-serif, monospace;
  margin: 8px 22px 8px 22px;
  overflow: hidden;
  width: 90%;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav > ul > li > a > .caret {
  border-top: 4px solid #CC0000;
  /* Red */
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  vertical-align: middle;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear;
}
nav > ul > li > a {
  color: #CC0000;
  display: block;
  line-height: 45px;
  padding: 0 24px;
  text-decoration: none;
}
nav > ul > li:hover {
  background-color: rgb(40, 44, 47);
  /* blue shark */
}
nav > ul > li:hover > a {
  color: rgb(255, 255, 255);
  /* white */
}
nav > ul > li:hover > a > .caret {
  border-top-color: rgb(255, 255, 255);
  /* white */
}
nav > ul > li > div {
  background-color: rgb(40, 44, 47);
  /* blue shark */
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: none;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 165px;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav > ul > li:hover > div {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav > ul > li > div ul > li {
  display: block;
}
nav > ul > li > div ul > li > a {
  color: #fff;
  display: block;
  padding: 12px 24px;
  text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
  background-color: rgba(255, 255, 255, 0.1);
}
.selected > div {
  background-color: rgb(189, 189, 189);
  /* lighter silver */
  color: black;
}
.selected > a {
  background-color: rgb(189, 189, 189);
  /* lighter silver */
  color: black;
}
.selected:hover {
  background-color: rgb(40, 44, 47);
  /* blue shark */
}
.selected:hover > a {
  background-color: rgb(189, 189, 189);
  /* lighter silver */
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
  <nav>
    <ul>
      <li id="miHome"><a href="Default.aspx">Home</a>
      </li>
      <li id="miAbout"><a href="About.aspx">About</a>
      </li>
      <li id="miContact"><a href="Contact.aspx">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Upvotes: 1

Related Questions