academy.of.webdesign

Home
YouTube
Shop
Anwendungen
Über uns

academy.of.webdesign

Home
YouTube
Shop
Anwendungen
Über uns

Hamburger Menü

HTML

  
<html>
  <head>
  </head>
  <body>
    <input type="checkbox" id="click">
    <label for="click">
      <div class="rahmen">
        <div class="linie einsham"></div>
        <div class="linie zweiham"></div>
        <div class="linie dreiham"></div>
      </div>
    </label>
    <ul>
      <li>Home</li>
      <li>Seite 1</li>
      <li>Seite 2</li>
    </ul>
  </body>
</html>

CSS

  
body {
    margin: 0;
}

.linie {
    width: 80px;
    height: 8px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
}

.einsham {
    top: 16px;
}

.zweiham {
    top: 40px;
}

.dreiham {
    top: 64px;
}

.rahmen {
    width: 80px;
    height: 88px;
    padding-right: 10px;
    padding-left: 10px;
    background: rgb(206, 106, 107);
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    margin: 40px;
}

#click {
    display: none;
}

ul {
    display: none;
    font-size: 2em;
    background: white;
    margin: 0;
}

#click:checked~ul {
    display: block;
}

#click:checked~label .einsham {
    transform: rotate(-45deg);
    top: 40px;
    transition: transform 0.5s;
}

#click:checked~label .zweiham {
    opacity: 0;
}

#click:checked~label .dreiham {
    transform: rotate(45deg);
    top: 40px;
    transition: transform 0.5s;
}

@media (max-width:800px) {
    .linie {
        width: 60px;
        height: 6px;
        border-radius: 3px;
    }

    .rahmen {
        width: initial;
        height: 66px;
        padding: 0 7.5px;
        border-radius: 0;
        margin: 0;
    }

    .einsham {
        top: 12px;
    }

    .zweiham {
        top: 30px;
    }

    .dreiham {
        top: 46.5px;
    }

    #click:checked~label .einsham {
        top: 30px;
    }

    #click:checked~label .dreiham {
        top: 30px;
    }
}