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

JoeB
November 24, 2024
143 views
0 votes
2 Answers

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>

Answers

- ilikegrape
- November 24, 2024 at 6:19 pm
- 0 votes
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.

- TheOneAndOnlySammy
- November 24, 2024 at 6:40 pm
- 0 votes
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.