Active Menu With Navbar

April 21, 2024 Post a Comment

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.

the idiomatic placement of javascript code is usually at the lower section of the body tag

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

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

https://jsfiddle.net/skwn50dj/

Solution 2:

Here is a vanilla JS example.

functiondetectLocation() {
  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;
}

.navbara {
  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;
}

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

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

.active {
  background-color: #10CCCC;
  color: white;
}

<divclass="navbar"id="Menu"><ahref="/"class="active">Home</a><ahref="/about">About</a><ahref="/research">Research</a><ahref="/js"class="test">Test</a><ahref="/blog"class="right">Blog</a></div>

Solution 3:

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

The script gets the tags elements, then iterates them through a function using .each().
We then define the val of the current iterated element using var bodyId = and $(this).text().
Then we define the body tags id value using $('#' + val).attr('id');
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;
}

.navbara {
  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;
}

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

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

.active {
  background-color: #10CCCC;
  color: white;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><bodyid="CV"><divclass="navbar"id="Menu"><ahref="#">Home</a><ahref="#">About</a><ahref="#">Research</a><ahref="#"class="right">CV</a><ahref="#"class="right">Blog</a></div><!-- Menu--></body>

javascript dox

Active Menu With Navbar

Solution 2:

Solution 3:

Post a Comment for "Active Menu With Navbar"