German English
Icon Twitter Icon DeviantArt
Icon GitHub Icon Google Play

Cookies und andere Daten

Auf dieser Webseite sowie den dazugehörigen Unterseiten und Subdomains werden sogenannte Cookies verwendet, um Einstellungen und Daten für die weitere Nutzung zu speichern. Mit dem Akzeptieren dieser Meldung erklären Sie sich damit einverstanden, dass Cookies gespeichert und weiterverwertet werden, welche unter anderem Daten enthalten, die Sie bei zukünftigen Besuchen identifizieren können. Weitere Informationen zu den erhobenen Daten und ihrer Verwendung finden Sie in der Privacy Policy. AkzeptierenAblehnen

Reines CSS & HTML Burger-Menü

14.05.2017

Dieses Beispiel ist für Leute, wie mich, die Dinge, welche man bereits mit CSS lösen kann, gegenüber JavaScript bevorzugen, weil wichtige Bedienelemente auch ohne aktiviertes JavaScript nutzbar sein sollten.

Es handelt sich hierbei um ein klassisches Burger-Menü, welches über einen Button in der Navigationsleiste angezeigt wird.

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;
    }
    /* Im Produktiven Einsatz sollte der Text-Teil des Label-Elements vielleicht durch eine Hintergrund-Grafik ersetzt werden. */

    .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 auf Bitbucket: https://bitbucket.org/snippets/ParouNeko/RLkxB)

 

Demo:


Kommentare

comments powered by Disqus