Toggling One Classes Opacity, on a Click of Another (button)-CodePudding

On click of the hamburger menu, I already have an animation. What I want to do: is upon clicking the hamburger css/javascripted <button>. I want another class; my .dropdownMenu class to change it's opacity to 1). Something like:

$(document).on('click', '.hamburger', function () {
  $(this).toggleClass('.dropdownMenu'.style.opacity = 1);
});

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', function() {
  this.classList.toggle('is-active')
})

body {
  background  : grey;
  }
.hamburger {
  display     : block;
  position    : relative;
  z-index     : 1;
  user-select : none;
  appearance  : none;
  border      : none;
  outline     : none;
  background  : none;
  cursor      : pointer;
  }
.hamburger span {
  display          : block;
  width            : 33px;
  height           : 4px;
  margin-bottom    : 5px;
  position         : relative;
  background-color : #eeeeee;
  border-radius    : 6px;
  z-index          : 1;
  transform-origin : 0 0;
  transition       : 0.4s;
  }
.hamburger:hover span:nth-child(2) {
  transform        : translateX(10px);
  background-color : #8c38ff;
  }
.hamburger.is-active span:nth-child(1) {
  transform        : translate(0px, -2px) rotate(45deg);
  background-color : #8c38ff;
  }
.hamburger.is-active span:nth-child(2) {
  opacity          : 0;
  transform        : translateX(15px);
  }
.hamburger.is-active span:nth-child(3) {
  transform        : translate(-3px, 3px) rotate(-45deg);
  background-color : #8c38ff;
  }
.hamburger.is-active:hover span {
  background-color : #8c38ff;
  }
.menu {
  display         : none;
  flex            : 1 1 0%;
  justify-content : center;
  margin          : 0 -16;
  letter-spacing  : 2px;
  }
.menu a {
  color           : ivory;
  margin          : 0 16;
  font-weight     : 600;
  text-decoration : none;
  transition      : 0.4s;
  padding         : 8px 16px;
  border-radius   : 99px;
  }
.menu a.is-active,
.menu a:hover {
  background-color : #8c38ff;
  }
.dropdown {
  position : relative;
  }
.dropdownMenu {
  position         : absolute;
  z-index          : 100;
  right            : -2rem;
  top              : calc(100%   1.36rem);
  border-bottom    : 3px solid #8c38ff;
  border-left      : 3px solid #8c38ff;
  background-color : #212121;
  border-radius    : 0 0 15px 15px;
  padding          : 20px;
  padding-right    : 50px;
  opacity          : 0;
  }
.dropdownMenu a {
  color           : ivory;
  text-decoration : none;
  font-size       : 20px;
  opacity         : 1;
  }

<nav>
  <div >
    <h1>Company Name</h1>
    <div >
      <a href="#" >Events</a>
      <a href="#">About</a>
      <a href="#">Login</a>
      <a href="#">Dashboard</a>
    </div>
    <div >
      <button >
          <span></span>
          <span></span>
          <span></span>
      </button>
      <div >
        <a href="#" >Events</a>
        <a href="#" >About</a>
        <a href="#" >Login</a>
        <a href="#" >Dashboard</a>
      </div>
    </div>
  </div>
</nav>

CodePudding user response：

Method-1

This method adds and removes the opacityStyle class style from the .dropdownMenu.

$(document).on('click', '.hamburger', function () {
  $('.dropdownMenu').toggleClass('opacityStyle')
});

/* Added the following class style. */
.opacityStyle{
  opacity: 1;
}

Method-2

Clicking the <button> assigns the opacity of the dropdownMenu class style to 1 if 0. Otherwise, clicking the <button> will assign the opacity of the dropdownMenu class style 1 to 0.

$(document).on('click', '.hamburger', function () {
  if($('.dropdownMenu').css("opacity") == "1")
    $('.dropdownMenu').css("opacity", "0");
  else
    $('.dropdownMenu').css("opacity", "1");
});

Code Snippet

/* Made jQuery compatible for fewer lines of code. */
$('.hamburger').bind('click', function() {
  this.classList.toggle('is-active')
});

/* The following event handler method has been added. */
$(document).on('click', '.hamburger', function () {
  $('.dropdownMenu').toggleClass('opacityStyle')
});

body {
  background  : grey;
}
.hamburger {
  display     : block;
  position    : relative;
  z-index     : 1;
  user-select : none;
  appearance  : none;
  border      : none;
  outline     : none;
  background  : none;
  cursor      : pointer;
}
.hamburger span {
  display          : block;
  width            : 33px;
  height           : 4px;
  margin-bottom    : 5px;
  position         : relative;
  background-color : #eeeeee;
  border-radius    : 6px;
  z-index          : 1;
  transform-origin : 0 0;
  transition       : 0.4s;
}
.hamburger:hover span:nth-child(2) {
  transform        : translateX(10px);
  background-color : #8c38ff;
}
.hamburger.is-active span:nth-child(1) {
  transform        : translate(0px, -2px) rotate(45deg);
  background-color : #8c38ff;
}
.hamburger.is-active span:nth-child(2) {
  opacity          : 0;
  transform        : translateX(15px);
}
.hamburger.is-active span:nth-child(3) {
  transform        : translate(-3px, 3px) rotate(-45deg);
  background-color : #8c38ff;
  }
.hamburger.is-active:hover span {
  background-color : #8c38ff;
}
.menu {
  display         : none;
  flex            : 1 1 0%;
  justify-content : center;
  margin          : 0 -16;
  letter-spacing  : 2px;
  }
.menu a {
  color           : ivory;
  margin          : 0 16;
  font-weight     : 600;
  text-decoration : none;
  transition      : 0.4s;
  padding         : 8px 16px;
  border-radius   : 99px;
}
.menu a.is-active,
.menu a:hover {
  background-color : #8c38ff;
}
.dropdown {
  position : relative;
}
.dropdownMenu {
  position         : absolute;
  z-index          : 100;
  right            : -2rem;
  top              : calc(100%   1.36rem);
  border-bottom    : 3px solid #8c38ff;
  border-left      : 3px solid #8c38ff;
  background-color : #212121;
  border-radius    : 0 0 15px 15px;
  padding          : 20px;
  padding-right    : 50px;
  opacity          : 0;
}
.dropdownMenu a {
  color           : ivory;
  text-decoration : none;
  font-size       : 20px;
  opacity         : 1;
}

/* Added the following class style. */
.opacityStyle{
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
  <div >
    <h1>Company Name</h1>
    <div >
      <a href="#" >Events</a>
      <a href="#">About</a>
      <a href="#">Login</a>
      <a href="#">Dashboard</a>
    </div>
    
    <div >
      <button >
        <span></span>
        <span></span>
        <span></span>
      </button>
      
      <div >
        <a href="#" >Events</a>
        <a href="#" >About</a>
        <a href="#" >Login</a>
        <a href="#" >Dashboard</a>
      </div>
    </div>
  </div>
</nav>