<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<style>
  /**
   * Based on
   * https://codepen.io/erikterwan/pen/EVzeRP
   * Made by Erik Terwan
   * MIT License
   */
  .is-hidden {
    display: none;
  }

  .navbar-burger {
    display: block;
    position: relative;
    top: 10px;
    left: 10px;
    z-index: 1;
  }
  .navbar-burger span {
    display: block;
    width: 33px;
    height: 1px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 0px;
    z-index: 1;
    transform-origin: 0px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  .navbar-burger-toggle {
    cursor: pointer;
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  /* Fix hamburger button position. */
  /* Hamburger/X animation (1/3). */
  .navbar-burger-toggle:checked + .navbar-burger span {
    opacity: 1;
    transform: rotate(45deg) translate(-9px, -8px);
    background: #232323;
  }

  /* Hamburger/X animation (1/3). */
  .navbar-burger-toggle:checked + .navbar-burger span:nth-child(1) {
    transform-origin: 0% 0%;
  }

  /* Hamburger/X animation (2/3). */
  .navbar-burger-toggle:checked + .navbar-burger span:nth-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /* Hamburger/X animation (3/3). */
  .navbar-burger-toggle:checked + .navbar-burger span:nth-child(3) {
    transform-origin: 0% 100%;
    transform: rotate(-45deg) translate(0, -1px);
  }

  /* Display menu when it's checked. */
  .navbar-burger-toggle:checked ~ .navbar-menu {
    display: block;
    opacity: 1;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: opacity 0.75s ease, transform 0.5s;
  }

  .navbar-menu {
    opacity: 0;
    /*display: none;*/
    transform: translate(-100%, 0);
    transition: opacity 0.75s ease, transform 0.5s;

  }

  nav {
    position: absolute;
    /*background: red;*/
  }


</style>
</head>
<body>
  <nav>
    <input type="checkbox" role='button'
                     aria-label='menu'
            aria-expanded='false'
           class='navbar-burger-toggle is-hidden' id="navbar-burger-toggle">
    <label for="navbar-burger-toggle" class="navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <div class="navbar-menu">
      <a class="navbar-item"> one</a>
      <a class="navbar-item"> two</a>
      <a class="navbar-item"> three</a>
    </div>
  </nav>
</body>
</html>

Mobile navigation should not need JS #163

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions