Snippets

Alice Peters CSS & HTML only burger button with animation

Created by Alice Peters last modified
burger.html
Raw 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<!-- 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)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.