CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ari.stat
Ari.stat

Reputation: 472

Active menu with navbar

Please can someone tell what exactly what should I add to this code to highlight the menu of the activated page? I saw lot of things online but they didn't work. 

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* CSS */
* {box-sizing: border-box}
body {
    margin-left: 15%;
    margin-right: 15%;
}

.navbar {
  overflow: hidden;
  background-color: #104e8B;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ccc;
  border-right: none;
}

.navbar a {
  float: left;
  padding: 6px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 20%; /* Five links of equal widths */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}


.navbar a:hover:not(.active) {
    background-color:  #AA0000;
    color: white;
}

.navbar a:hover {
   background-color: #AA0000;
   color: white;
}

.active {
  background-color: #10CCCC;
  color: white;
}   
</style>
</head>
<body>
<div class="navbar" id="Menu">
  <a href="/" class="active">Home</a>
  <a href="/about">About</a>
  <a href="/research">Research</a>
  <a href="/cv" class="right">CV</a>
  <a href="/blog" class="right">Blog</a>
</div><!-- Menu-->
</body>
</html>

It seems that I should add a script. Can I add add the script to this code or It should be in other file?

This is for example something I add to the style content but it does not work.

<script>
$(document).ready(function() {
    $('#Menu .navbar a[href="' + this.location.pathname + '"]').parent().addClass('active');
});  
</script>

Upvotes: 0

Views: 742

Answers (3)

dale landry
dale landry

Reputation: 8600

Here is a dynamic way to do this using the body ID tag to set the class in your active page.

  1. The script gets the tags elements, then iterates them through a function using .each().
  2. We then define the val of the current iterated element using var bodyId = and $(this).text().
  3. Then we define the body tags id value using $('#' + val).attr('id');
  4. Run a conditional to see if the current iterated ID's value is the same as the body tags ID's set value, if it is, addClass('active').

NOTE: In order for this to work, each pages body tag must have an ID tag set to the value of the NAVS corresponding A tags value. This must be exactly the same for this to work. The cool part is it all does this dynamically, you won't need code on each page if you place this in a linked JQuery script file.

You will need to add these ID's to your pages body tags:

<body id="Home">
<body id="About">
<body id="Home">
<body id="CV">
<body id="Blog">


$(document).ready(function() {  
  $(".navbar a").each(function(value) {
  var bodyId = $(this).text();
  var homeId= $('#' + bodyId).attr('id');
    if (bodyId === homeId) {
      console.log('To test this, Change --> '+ $(this).text() + ' --> Change this in the HTML <body id="' + $(this).text() + '">');
      $(this).addClass('active');
    }
  });
});
* {
  box-sizing: border-box
}

body {
  margin-left: 15%;
  margin-right: 15%;
}

.navbar {
  overflow: hidden;
  background-color: #104e8B;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ccc;
  border-right: none;
}

.navbar a {
  float: left;
  padding: 6px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 20%;
  /* Five links of equal widths */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

.navbar a:hover:not(.active) {
  background-color: #AA0000;
  color: white;
}

.navbar a:hover {
  background-color: #AA0000;
  color: white;
}

.active {
  background-color: #10CCCC;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body id="CV">
  <div class="navbar" id="Menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Research</a>
    <a href="#" class="right">CV</a>
    <a href="#" class="right">Blog</a>
  </div>
  <!-- Menu-->
</body>

Upvotes: 1

Twisty
Twisty

Reputation: 30883

Here is a vanilla JS example.

function detectLocation() {
  var path = window.location.pathname;
  console.log(path);
  var a = document.querySelector("#Menu .active");
  a.className = a.className.replace(/\active\b/g, "");
  var n = document.getElementById('Menu').getElementsByTagName("a");
  var i = 0;
  for (i; i < n.length; i++) {
    console.log(n[i]);
    if (n[i].getAttribute("href") == path) {
      console.log("Hit " + i);
      n[i].className = n[i].className + " active";
    }
  }
}

detectLocation();
* {
  box-sizing: border-box
}

body {
  margin-left: 15%;
  margin-right: 15%;
}

.navbar {
  overflow: hidden;
  background-color: #104e8B;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ccc;
  border-right: none;
}

.navbar a {
  float: left;
  padding: 6px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 20%;
  /* Five links of equal widths */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

.navbar a:hover:not(.active) {
  background-color: #AA0000;
  color: white;
}

.navbar a:hover {
  background-color: #AA0000;
  color: white;
}

.active {
  background-color: #10CCCC;
  color: white;
}
<div class="navbar" id="Menu">
  <a href="/" class="active">Home</a>
  <a href="/about">About</a>
  <a href="/research">Research</a>
  <a href="/js" class="test">Test</a>
  <a href="/blog" class="right">Blog</a>
</div>

Upvotes: 1

Teeed.Com
Teeed.Com

Reputation: 70

  1. you'll need to import JQuery before using its function, by linking its CDN.
  2. the idiomatic placement of javascript code is usually at the lower section of the body tag

  3. having an id to each of the buttons is better than this.location.pathname, eg, it will not work on jsfiddle since the path generated in jsfiddle is different than the one on the HTML tag

    <div class="navbar" id="Menu">
  <a id='home' href="/">Home</a>
  <a id='about' href="/about">About</a>
  <a id='research' href="/research">Research</a>
  <a id='cv' href="/cv" class="right">CV</a>
  <a id='blog' href="/blog" class="right">Blog</a>
</div><!-- Menu-->
</body>
<script>
$(document).ready(function() {
    $('#research').addClass('active');
});  
</script>

https://jsfiddle.net/skwn50dj/

Upvotes: 1

Related Questions