0

Menu onClick change body opacity and color with out effecting header portion. Header must continue with opacity 1 and white background.

Also, release function when click anywhere.

$(document).ready(function() {

  $(document).on('click', 'button', function() {
    $('body').toggleClass('active')
  });    


  $(document).mouseup(function (e){
    var container = $('.popup');
    if (!container.is(e.target) 
        && container.has(e.target).length === 0)
    {
        container.slideUp();
    }
  });
});
    body.active {
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0.5;
    }
            <nav class="nav">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              <button class="nav__toggle" aria-expanded="false" type="button">
                <i class="fa fa-bars" aria-hidden="true"></i>
              </button>
              <ul class="nav__wrapper">
                <li class="nav__item"><a href="#">Home</a></li>
                <li class="nav__item"><a href="#">About</a></li>
                <li class="nav__item"><a href="#">Services</a></li>
                <li class="nav__item"><a href="#">Hire us</a></li>
                <li class="nav__item"><a href="#">Contact</a></li>
              </ul>
            </nav>
VKS
  • 17
  • 7

2 Answers2

1

This will toggle the background with the button, but will always remove the active class when anywhere else is clicked. I assumed the button was to show/hide the nav so I added that in there too

$(document).ready(function() {
  $(document).on('click', function(evt) {
    if (evt.target.id === 'buttonnav') {
      $('.nav__wrapper').toggle();
      if ($('.nav__wrapper').css('display') === 'none') $('body').removeClass('active');
      else $('body').addClass('active');

    } else
      $('body').removeClass('active')
  });


  $(document).mouseup(function(e) {
    var container = $('.popup');
    if (!container.is(e.target) &&
      container.has(e.target).length === 0) {
      container.slideUp();
    }
  });
});
body.active {
  background-color: rgba(0, 0, 0, 0.5);
}

body.active p,
body.active div,
body.active span,
body.active ul,
body.active li,
body.active a {
  opacity: 0.2;
}

.nav__wrapper {
  background: #fff;
}

body.active ul.nav__wrapper,
body.active ul.nav__wrapper li,
body.active ul.nav__wrapper li a {
  opacity: 1 !important;
}
<body>
  <nav class="nav">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id='buttonnav' class="nav__toggle" aria-expanded="false" type="button">
                click<i class="fa fa-bars" aria-hidden="true"></i>
              </button>
    <ul class="nav__wrapper" hidden>
      <li class="nav__item"><a href="#">Home</a></li>
      <li class="nav__item"><a href="#">About</a></li>
      <li class="nav__item"><a href="#">Services</a></li>
      <li class="nav__item"><a href="#">Hire us</a></li>
      <li class="nav__item"><a href="#">Contact</a></li>
    </ul>
  </nav>
  <p>Text to show opacity</p>
</body>
Kinglish
  • 23,358
  • 3
  • 22
  • 43
  • at the same time header portion including nav must show with opacity 1 – VKS Jul 08 '21 at 17:00
  • ok, updated. You can't apply an opacity on body and have it not effect the nav. however, you can apply opacity to all body elements and then exclude nav – Kinglish Jul 08 '21 at 17:27
0

If i get it right you want to change body background color e opacity. I made it with CSS() but you can use an addClass if you want to use class to make the style.

$('#clickMe').click(function(){
  $('body').css({'background-color':'rgba(0, 0, 0, 0.5)'});


});
body{
background-color:rgba(0, 0, 0, 1);
}

 #clickMe p {
 color: white;
 }
 header{
 height:50px;
 background-color:white;
 color:black
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<div>This is the header</div>
</header>
  <div id="clickMe">
      <p>Hello World! <br><u>Click me!</u></p>
  </div>


</body>
BRABO
  • 100
  • 7