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

How do I make a menu appear/disappear when I click an icon in HTML?

I declared a checkbox for when I click on the hamburger icon, the icon animates successfully. But I also want the menu to appear on the screen. I tried setting the opacity: 1 in ilde state and then the opacaity: 0 in the checked state but it doesn’t work. HELP
Here is my code

 .pop-wrapper {
   background-color: black;
   position: absolute;
   left: 35%;
   top: 70px;
   text-align: center;
   width: 30%;
   bottom: 1rem;
   opacity: 0;
 }

 input[type="checkbox"]:checked~.pop-wrapper.m1 {
   transform: 0.5s;
   opacity: 1;
 }
<div className="wrapper">
  <div className="hamburger-lines">
    <input class="checkbox" type="checkbox" name="" id="" />
    <div className="hamburger-l1"></div>
    <div className="hamburger-l2"></div>
    <div className="hamburger-l3"></div>
  </div>
  <div className="pop-wrapper">
    <div className="popup-m" id="popup-m">
      <div className="m1">Home</div>
      <div className="m2">Account</div>
      <div className="m3">Deposit</div>
    </div>
  </div>
</div>

I tried setting opacity: 1 in idle and opacity: 0 in checked state. I am expecting the menu to appear from 0-1 opacity when I click on the hamburger icon but it does nothing.

Tags:

4

Answers


  1. 0

    Instead of .pop-wrapper.m1, you should use .pop-wrapper to target the entire popup wrapper.And you need to use the transition property to animate the change in opacity.:

    .pop-wrapper {
  background-color: black;
  position: absolute;
  left: 35%;
  top: 70px;
  text-align: center;
  width: 30%;
  bottom: 1rem;
  opacity: 0;
  transition: opacity 0.5s;
}

input[type="checkbox"]:checked + .pop-wrapper {
  opacity: 1;
}
    Login or Signup to reply.
  2. 0

    You should target the .popup-wrapper.

    But therefore you need to change the HTML to:

    <div className="wrapper">
    <div className="hamburger-lines">
      <input class="checkbox" type="checkbox" name="" id="" />
      <div className="hamburger-l1"></div>
      <div className="hamburger-l2"></div>
      <div className="hamburger-l3"></div>
      <div className="pop-wrapper">
        <div className="popup-m" id="popup-m">
          <div className="m1">Home</div>
          <div className="m2">Account</div>
          <div className="m3">Deposit</div>
        </div>
      </div>
    </div>
  </div>

    Then change your CSS to:

    .pop-wrapper {
  background-color: grey; /* Changed to grey to see what's happening */
  position: absolute;
  left: 35%;
  top: 70px;
  text-align: center;
  width: 30%;
  bottom: 1rem;
  opacity: 0.3;
}

input[type="checkbox"]:checked~.pop-wrapper {
  transform: 0.5s;
  opacity: 1;
}
    Login or Signup to reply.
  3. 0

    The ~ selector is the subsequent-sibling combinator, means it will select subsequent sibling only.

    So, first move the <input class="checkbox" type="checkbox" name="" id="" /> just before the .pop-wrapper, also change input:checked~.pop-wrapper.m1 to input:checked~.pop-wrapper

     .pop-wrapper {
   /* background-color: black; */
   position: absolute;
   left: 35%;
   top: 70px;
   text-align: center;
   width: 30%;
   bottom: 1rem;
   opacity: 0;
 }

 input:checked~.pop-wrapper {
   transform: 0.5s;
   opacity: 1;
 }
    <div class="wrapper">
  <div class="hamburger-lines">
    <div class="hamburger-l1"></div>
    <div class="hamburger-l2"></div>
    <div class="hamburger-l3"></div>
  </div>
  <input class="checkbox" type="checkbox" name="" id="" />
  <div class="pop-wrapper">
    <div class="popup-m" id="popup-m">
      <div class="m1">Home</div>
      <div class="m2">Account</div>
      <div class="m3">Deposit</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    Instead of using opacity to hide and display the div, you can use

    display: none; and display: block; properties and by javascript function orgnizing the displaing and hiding the menue you want show so instead of the

    <input class="checkbox" type="checkbox" name="" id="" />

    you can create

    <button class="checkbox" type="checkbox" onclick="clicked()">Hamburger Menue</button>

    but the place of the button will be out the dive you want to display and this the javascript function to change the css properties

    function clicked() {
    var n = document.getElementById("hamburgerMenue");
    if (n.style.display == "none") {
        n.style.display = "block";
    } else {
        n.style.display = "none"
    }
}

    and the final result is

     function clicked() {
        var n = document.getElementById("hamburgerMenue");
        if (n.style.display == "none") {
            n.style.display = "block";
        } else {
            n.style.display = "none"
        }
    }
     .pop-wrapper {
   background-color: black;
   position: absolute;
   left: 35%;
   top: 70px;
   text-align: center;
   width: 30%;
   bottom: 1rem;
   /* opacity: 0.3; */
   display: none;
 }

 #hamburgerMenue {
    display: none;
 }
    <div className="wrapper">
    <button class="checkbox" type="button" onclick="clicked()">Hamburger Menue</button>
  <div className="hamburger-lines" id="hamburgerMenue" >
    <div className="hamburger-l1">This is me humburger1</div>
    <div className="hamburger-l2">This is me humburger2</div>
    <div className="hamburger-l3">This is me humburger3</div>
  </div>
  <div className="pop-wrapper">
    <div className="popup-m" id="popup-m">
      <div className="m1">Home</div>
      <div className="m2">Account</div>
      <div className="m3">Deposit</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search