Click here to Skip to main content
15,900,461 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all,

I want to make a mega-menu where on hover the background is opacity.
I have a problem:
The background is flickering on hover and the opacity is applied to everything on the page and not to only the background. Do somebody know how to do this?

html:
HTML
<nav class="navbar">
          <ul>
            <li>Menu
              <div class="mega-menu">
                <div class="inner-mega-menu">
                  <p>Item1</p>
                  <p>Item2</p>
                  <p>Item3</p>
                  <p>Item4</p>
                  <p>Item5</p>
                </div>
                <div class="inner-mega-menu">
                  <p>Item1</p>
                  <p>Item2</p>
                  <p>Item3</p>
                  <p>Item4</p>
                  <p>Item5</p>
                </div>
              </div>
            </li>
            <li>Menu</li>
          </ul>
          <script>
          $(document).ready(function(){
            $("ul").hover(function(){
                $(".backdrop").show();
                }, function(){
                $(".backdrop").hide();
            });
          });
        </script>
        </nav>

css:
CSS
.navbar {
  width: 100%;
  background-color: #257427;
  height: 48px;
  box-sizing: border-box;
}

.navbar ul {
  width: 1020px;
  height: 100%;
  margin: 0 auto;
  list-style: none;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
}

.navbar ul li {
  width: 120px;
  float: left;
  text-align: center;
  padding: 15px 0;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s ease;
}

.mega-menu {
  position: absolute;
  top: 48px;
  left: 0;
  width: 1020px;
  height: 250px;
  background-color: #fff;
  transition: all 0.4s ease;
  padding: 40px;
  box-sizing: border-box;
  display: none;
  border-radius: 0 0 20px 20px;
}

.inner-mega-menu {
  width: 24%;
  float: left;
  margin-right: 1%;
}
 .backdrop {
  background-color:rgba(0,0,0,0.5);
   opacity: 0.5;
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index:100;
   display: none;
}



Thanks,
Sam

What I have tried:

I tried to search the internet and the above.
Posted
Updated 17-Nov-20 18:18pm

1 solution

Your .backdrop element appears above the .navbar. As soon as you show it, the mouse is no longer hovering over the navbar <ul>, so the code triggers to hide the backdrop. At which point, the mouse is again hovering over the <ul>, so the code triggers to show the backdrop.

You could add pointer-events: none; to the backdrop style, which will work in all modern browsers:
pointer-events - CSS: Cascading Style Sheets | MDN[^]

This would prevent the flickering, but the backdrop would still appear on top of the navbar.

To make the navbar appear on top of the backdrop, you need to give it a higher z-index. In order to do that, you need to make it a positioned element - for example, by adding position: relative;.

Demo[^]
 
Share this answer
 
Comments
Sam Vorst 18-Nov-20 2:00am    
Thanks, that helped me out!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900