CSS Desktop Slide-In Hamburger Menu programmieren (HTML & CSS)

Heute zeige ich euch wie ihr ein Hamburger Menu selbst programmieren könnt für eure HTML Seite. Das ist eines der Elemente die man immer wieder brauchen muss und heute lernt ihr also wie man sowas programmiert. Wie immer – es gibt viele Wege die nach Rom äh zum Hamburger Menu führen und das ist ein Weg dazu.

Video

HTML

<nav role="navigation">
      <div id="menuToggle">
        <input type="checkbox" />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu">
          <a href="#">
            <li>Home</li>
          </a>
          <a href="#">
            <li>About</li>
          </a>
          <a href="#">
            <li>Info</li>
          </a>
          <a href="#">
            <li>Contact</li>
          </a>
        </ul>
      </div>
    </nav>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #232323;
  color: #cdcdcd;
}

#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
}

#menuToggle a {
  color: #232323;
  text-decoration: none;
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: tomato;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}


#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #e73f3f;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}



#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}




#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  height: 600px;

  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
 

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s ease-in-out;
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}


#menuToggle input:checked ~ ul {
  transform: none;
}