German English

Cookies & other data

We are using cookies on our websites. Cookies are used to store data and settings. By accepting this notification you accept that cookies are stored and used that also include data that could identify you on future visits. You can read more about the stored data and its purpose in our Privacy Policy.

AcceptDecline

CSS & HTML only burger button

14.05.2017

This example is for everyone like me, who prefers to solve things in CSS instead of JavaScript if it's doable, because important navigation elements should be usable without activated JavaScript, too.

It's a classic burger menu that is controlled by a button in the navigation bar of the website.

Code:

<!-- 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>

(Snippet on Bitbucket: https://bitbucket.org/snippets/ParouNeko/RLkxB)

 

Demo:


Author

author picture
Alice Peters

Website
DeviantArt