css-regions-1/examples/responsive-menu.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Menu | CSS Regions</title>
  
  <style>
    
    body {
      -width: 550px;
      -width: 350px;
    }
    
    body, html{
      margin: 0;
      padding: 0;
    }

    #nav-global a:hover{
      text-decoration: underline;
    }

    header{
      box-sizing: border-box;
      display: -webkit-flex;
      height: 3rem;
      border-bottom: 1px solid #E3E3DB;
      background: #F4F4EE;
    }


    #nav-global{
      height: 3rem;
      -webkit-flex: 1 1 auto;
      padding-left: 1rem;
    }

    /* #nav-global a{ */
    a {
      text-decoration: none;
      margin-right: 1.3rem;
      padding: 0.5rem 0 0;
      float: left;
      color: #333;
      font: 1.3rem/1.9rem normal georgia,serif;
    }

    #menu {
      display: -webkit-flex;
      -webkit-justify-content: flex-end;
      -webkit-align-items: center;
      position: relative;
      -webkit-flex: 1 0 auto;
    }

    #menu aside{
      visibility: hidden; /* toggled by JavaScript */
      background: #F4F4EE;
      max-width: 5rem;
      padding: 0.5rem 1rem 1rem;
      position: absolute;
      top: calc(3rem - 1px);
      border: none;
      right: 0;
    }

    #menu aside.visible{
      visibility: visible;
    }

    #menu .end{
      display: block;
      margin: 1rem 0 0;
      padding: 1rem 0 0;
      border-top: 1px solid #E24D4D;
      color: rgba(252,252,252,0.7);
      font-family: helvetica, arial, serif;
    }

    #menu .toggle{
      text-align: center;
      border: 2px solid rgb(75, 75, 75);
      border-radius: 8px;
      display: block;
      text-decoration: none;
      font: .9rem/1.1rem sans-serif;
      width: 3.4rem;
      height: 1rem;
      padding: 0;
    }

    /* collect all nav links */
    #nav-global a{
      -webkit-flow-into: menu;
    }

    /* reflow nav links into original container and overflow into another element */
    #nav-global,
    #nav-compact{
      -webkit-flow-from: menu;
    }

  </style>
</head>
<body>
  
<header>
  <nav id="nav-global">
    <a href="#">This</a>
    <a href="#">That</a>
    <a href="#">Other</a>
    <a href="#">Extra</a>
    <a href="#">More</a>
    <a href="#">Misc.</a>
  </nav>

  <div id="menu">
    <a href="#" class="toggle">MENU</a>
    
    <aside class="visible">
      <nav id="nav-compact">
        <!-- #global nav items will flow here -->
      </nav>
      <div class="end">
        <a href="#">Contact</a>
        <a href="#">About</a>
        <a href="#">Help</a>
      </div>
    </aside>
    
  </div>
</header>  
  
  <script>
  
    var toggle = document.querySelector('.toggle'),
        aside = document.querySelector('aside');
        
    toggle.addEventListener('click', function(){
      aside.classList.toggle('visible')
    })

    var property = "flow-into";

    // check if any variant exists, prefixed or not
    var isCapable = ['-webkit-','-ms-','-moz-',''].some(function(prefix){
      return prefix + property in document.body.style 
    })

    property = isCapable ? property : 'no-' + property;
     
    document.body.classList.add(property)
  
  </script>
  
</body>
</html>