Snippets

Alice Peters CSS & HTML only burger button with animation

Created by Alice Peters last modified
<!-- CSS & HTML only burger button with animation by Alice Peters, alicepeters.de -->
<!DOCTYPE html>
<html>

<head>
  <title>HTML &amp; CSS only burger button</title>
  <style type="text/css">
    body {
      background-color: #000;
      margin: 0;
      padding: 0;
    }
    /* Animation */

    @keyframes open {
      from {
        left: -100vw;
      }
      to {
        left: 0;
      }
    }

    #burgerbutton {
      display: none;
    }
    /* You probably want to replace the text part of the label element with a background via css in productive use. */

    .burgerimage {
      position: absolute;
      top: 0;
      left: 10px;
      font-size: 28pt;
      cursor: pointer;
      transition: transform 0.8s ease;
      color: red;
    }

    nav {
      background-color: #fff;
      display: block;
      height: 50px;
      border-bottom: 3px solid red;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
    }

    nav ul {
      display: none;
      position: fixed;
      top: 53px;
      margin: 0;
      padding: 0;
      width: 50vw;
      list-style: none;
    }

    nav ul li {
      display: block;
      width: auto;
    }

    nav ul li a {
      text-decoration: none;
      color: red;
      background-color: #fff;
      border-bottom: 1px solid darkred;
      display: block;
      padding: 20px;
      transition: background 0.5s ease;
    }

    nav ul li a:hover {
      background-color: pink;
      color: darkred;
    }

    #burgerbutton:checked ~ ul {
      display: block;
      animation-name: open;
      animation-duration: 0.8s;
    }

    #burgerbutton:checked ~ .burgerimage {
      transform: rotate(360deg);
    }
  </style>
</head>

<body>
  <nav>
    <input type="checkbox" id="burgerbutton" />
    <label for="burgerbutton" class="burgerimage" title="Navigation">&#x2630;</label>
    <ul>
      <li><a href="#" title="Link">Link</a></li>
      <li><a href="#" title="Link">Link</a></li>
      <li><a href="#" title="Link">Link</a></li>
      <li><a href="#" title="Link">Link</a></li>
      <li><a href="#" title="Link">Link</a></li>
    </ul>
  </nav>
</body>

</html>

Comments (0)