Question 416304 in Html Question posted in
Some basic documentation can be found here.

Html – Highlight Main Menu button when on an active page of the menu or submenu

How can I highlight the main menu button on the nav bar when I am on a page in either the menu or on the sub-menu? I already created an active class in CSS but I am not sure how to handle the JavaScript. This is a huge application with multiple pages so the goal is to make it as dynamic as possible.

This is my current code:

.dropbtn:active {
  background-color: blue
}
<div id="headerDiv" class="divHeaderLoginButton">
  <div style="width:1120px; margin: 0px auto;">
    <div id="menu" style="display:none;">

      <button id="btn1" class="dropbtn">Home<i class="down"></i></button>
      <div class="dropdown-content divH">
        <button class="subMenuBtn" id="btn11">Main Menu <i class="right"></i></button>
        <div class="dropdown-content divH" id="dv1">
          <a href="/About" onclick="window.location.reload(true);">About</a>
          <a href="/Index" onclick="window.location.reload(true);">Index</a>
          <a href="/DisplayTeam" onclick="window.location.reload(true);">Display Team</a>
        </div>
        <button id="btn12" class="subMenuBtn">Shop <i class="right"></i></button>
        <div class="dropdown-content divH" id="dv2">
          <a href="/Jewelery" onclick="window.location.reload(true);">Jewlery</a>
          <a href="/Clothes" onclick="window.location.reload(true);">Clothes</a>
          <a href="/Shoes" onclick="window.location.reload(true);">Shoes</a>
          <a href="/Accessories" onclick="window.location.reload(true);">Accessories</a>
        </div>
      </div>
    </div>
Tags:

2

Answers


  1. 0

    What I have done in the past is put the following code in the css file

    .dropbtn a:hover {
    color: #f1f1f1;
  }

    this changes the color when the objected is hovered over. If you want to be when clicked, I think there is another one other than hover to do that.

    Login or Signup to reply.
  2. 0

    If you would like to add a simple highlight to the button when hovered on, try updating the border color, like this:

    var btn11 = document.getElementById("btn11");

btn11.addEventListener("mouseenter", function() {
  btn11.style.borderColor = "yellow";

});
btn11.addEventListener("mouseleave", function() {
  btn11.style.border = "";
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search