CODEWITHSUNDEEP
css
Jabbamonkey
Jabbamonkey

Reputation: 277

CSS Hamburger Menu NOT Showing Menu

I created a pure CSS hamburger menu, using a CHECKBOX ... but, when I click the hamburger "checkbox", it isn't showing the menu....

#menulist { /* Hide Menu when in mobile */
    display: none;
    margin-top: 50px;
    background: #101010;
  }
#btn-chk:checked ~ #menulist { /* This SHOULD show the menu */
    display: block; /* This isn't working ... display remains at "none" */
  }

You can see the full code on codepen here: https://codepen.io/jabbamonkey/pen/eYRYzyG

Upvotes: 0

Views: 95

Answers (2)

Benny Powers
Benny Powers

Reputation: 5836

The menulist and the input are not siblings, since the input is a child of the div.

If you make the input a sibling of the input it will work

https://codepen.io/jabbamonkey/pen/eYRYzyG?editors=1100

#mainmenu {
  width: 100%;
  background: #000;
  position: relative;
}

#menulist a {
  display: inline-block;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}

#menulist a:hover {
  background: #401408;
}

#btn-chk {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: inline-block;
  background: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
  color: white;
}

.lbl-chk span {
  position: absolute;
  background: white;
  display: block;
  width: 51%;
  height: 6px;
  transition: 0.3s;
}

.lbl-chk span:nth-child(even) {
  left: 50%;
  border-radius: 0px 2px 2px 0px;
}

.lbl-chk span:nth-child(odd) {
  border-radius: 2px 0px 0px 2px;
}

.lbl-chk span:nth-of-type(1),
.lbl-chk span:nth-of-type(2) {
  top: 3px;
}

.lbl-chk span:nth-of-type(3),
.lbl-chk span:nth-of-type(4) {
  top: 17px;
}

.lbl-chk span:nth-of-type(5),
.lbl-chk span:nth-of-type(6) {
  bottom: 3px;
}

.lbl-chk span:nth-of-type(1) {
  transform-origin: top left;
}

.lbl-chk span:nth-of-type(2) {
  transform-origin: top right;
}

.lbl-chk span:nth-of-type(5) {
  transform-origin: bottom left;
}

.lbl-chk span:nth-of-type(6) {
  transform-origin: bottom right;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 3px;
  left: 8px;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(2) {
  transform: rotate(-45deg);
  top: 3px;
  left: calc(50% - 8px);
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(3) {
  transform: translateX(-50%);
  opacity: 0;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(4) {
  transform: translateX(50%);
  opacity: 0;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(5) {
  transform: rotate(-45deg);
  bottom: 3px;
  left: 8px;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(6) {
  transform: rotate(45deg);
  bottom: 3px;
  left: calc(50% - 8px);
}

@media (max-width: 768px) {
  #mainmenu {
    height: 50px;
    display: inline-block;
  }
  #menulist a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  #menulist {
    display: none;
    margin-top: 50px;
    background: #101010;
  }
  #btn-chk:checked ~ #menulist {
    display: block;
  }
}

<div class="menubar-wrap">
     <div class="menu-bar" id="mainmenu">
      <input type="checkbox" id="btn-chk"/>
      <label class="lbl-chk" for="btn-chk">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
      </label>
        <div class="menu" id="menulist">
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
        </div>
    </div>
  </div>

Upvotes: 0

MattHamer5
MattHamer5

Reputation: 1491

Your CSS has no way of finding your menu with where your input is placed. You need to move it outside of the toggle div, and change your selectors to match that. See below for a working example.

#mainmenu {
  width: 100%;
  background: #000;
  position: relative;
}
#menulist {
}
#menulist a {
  display: inline-block;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#menulist a:hover {
  background: #401408;
}
.toggle {
  display: none;
}
#btn-chk {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: 5px;
}
.toggle label {
  display: inline-block;
  background: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
}
.lbl-chk span {
  position: absolute;
  background: white;
  display: block;
  width: 51%;
  height: 6px;
  transition: 0.3s;
}
.lbl-chk span:nth-child(even) {
  left: 50%;
  border-radius: 0px 2px 2px 0px;
}
.lbl-chk span:nth-child(odd) {
  border-radius: 2px 0px 0px 2px;
}
.lbl-chk span:nth-of-type(1),
.lbl-chk span:nth-of-type(2) {
  top: 3px;
}
.lbl-chk span:nth-of-type(3),
.lbl-chk span:nth-of-type(4) {
  top: 17px;
}
.lbl-chk span:nth-of-type(5),
.lbl-chk span:nth-of-type(6) {
  bottom: 3px;
}
.lbl-chk span:nth-of-type(1) {
  transform-origin: top left;
}
.lbl-chk span:nth-of-type(2) {
  transform-origin: top right;
}
.lbl-chk span:nth-of-type(5) {
  transform-origin: bottom left;
}
.lbl-chk span:nth-of-type(6) {
  transform-origin: bottom right;
}
/* #btn-chk:checked ~ label span:nth-child(even) { background: green; }
#btn-chk:checked ~ span:nth-child(odd) { background: yellow; } */
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 3px;
  left: 8px;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(2) {
  transform: rotate(-45deg);
  top: 3px;
  left: calc(50% - 8px);
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(3) {
  transform: translateX(-50%);
  opacity: 0;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(4) {
  transform: translateX(50%);
  opacity: 0;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(5) {
  transform: rotate(-45deg);
  bottom: 3px;
  left: 8px;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(6) {
  transform: rotate(45deg);
  bottom: 3px;
  left: calc(50% - 8px);
}

@media (max-width: 768px) {
  #mainmenu {
    height: 50px;
    display: inline-block;
  }
  #menulist a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  .toggle {
    display: block;
  }
  #menulist {
    display: none;
    margin-top: 50px;
    background: #101010;
  }
  #btn-chk:checked ~ #menulist {
    display: block!important;
  }
}
<div class="menubar-wrap">
     <div class="menu-bar" id="mainmenu">
        <input type="checkbox" id="btn-chk"/>
      <div class="toggle">
          <label class="lbl-chk" for="btn-chk" onclick>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </label>
        </div>
        <div class="menu" id="menulist">
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
        </div>
    </div>
  </div>

JSFiddle

Upvotes: 1

Related Questions