Snippets

Alice Peters CSS & HTML only burger button with animation

Updated by Alice Peters
View revision

File burger.html Modified

  • Ignore whitespace
  • Hide word diff 
 
     @keyframes open {
       from {
-        left: -100vh;
+        left: -100vw;
       }
       to {
         left: 0;
Updated by Alice Peters
View revision

File burger.html Modified

  • Ignore whitespace
  • Hide word diff 
       top: 53px;
       margin: 0;
       padding: 0;
-      width: 50vh;
+      width: 50vw;
       list-style: none;
     }
Updated by Alice Peters
View revision

File burger.html Modified

  • Ignore whitespace
  • Hide word diff 
 
 <body>
   <nav>
-    <input type="checkbox" id="burgerbutton" class="mobile" />
+    <input type="checkbox" id="burgerbutton" />
     <label for="burgerbutton" class="burgerimage" title="Navigation">&#x2630;</label>
     <ul>
       <li><a href="#" title="Link">Link</a></li>
Created by Alice Peters
View revision

File burger.html Added

  • Ignore whitespace
  • Hide word diff 
+<!-- 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: -100vh;
+      }
+      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: 50vh;
+      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" class="mobile" />
+    <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>
HTTPS SSH

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