tomhodgins/adaptive-nav.html

## adaptive-nav.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Responsive Nav</title>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui">
  <style>html{opacity:0;-webkit-text-size-adjust: 100%;}body{margin:0}</style>
</head>
<body>
  <nav class="eqNav">
    <a href="#" class="brand">brand</a>
    <input type="checkbox" id="menu">
    <label for="menu"><span>≡</span></label>
    <!-- Menu Loop -->
    <input type="radio" name="eqNav" id="one">
    <label for="one">
      <span>One</span>
      <div>
        <a href="#">link a</a>
        <a href="#">link b</a>
        <a href="#">link c</a>
      </div>
    </label>
    <input type="radio" name="eqNav" id="two">
    <label for="two">
      <span>Two</span>
      <div>
        <a href="#">link d</a>
        <a href="#">link f</a>
        <a href="#">link g</a>
      </div>
    </label>
    <input type="radio" name="eqNav" id="three">
    <label for="three">
      <span>Three</span>
      <div>
        <a href="#">link h</a>
        <a href="#">link i</a>
        <a href="#">link j</a>
      </div>
    </label>
    <!-- /Menu Loop -->
    <input type="radio" name="eqNav" id="reset">
    <label for="reset"></label>
  </nav>
  <script type="text/eqcss">
    /* Global Menu Styles */
    @element '.eqNav' and (min-width: 0px) {
      html {
        opacity: 1;
      }
      $this * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'Helvetica Neue', 'Myriad Pro', Myriad, Helvetica, 'Segoe UI', Arial, sans-serif;
        font-kerning: auto;
        outline: none;
      }
      $this {
        background: #333;
      }
      $this .brand {
        display: block;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        padding: .5em;
        font-size: 140%;
        position: relative;
      }
      $this input {
        display: none;
      }
      $this label {
        display: block;
        position: relative;
        z-index: 3000;
      }
      $this label span,
      $this label > div a {
        display: block;
        padding: 1em;
        color: #fff;
        font-size: 100%;
        font-weight: 400;
        text-decoration: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        cursor: pointer;
        transition: color .1s ease-in-out;
      }
      $this label span:hover,
      $this label span:focus,
      $this a:hover,
      $this a:focus {
        color: #f0c;
      }
      $this label > div a {
        padding: 1em 1em 0 1em;
      }
      $this label > div a:last-child {
        padding-bottom: 1em;
      }
      $this input + label > div {
        display: none;
        background: #333;
        position: relative;
        width: 100%;
        right: 0;
        z-index: 3000;
        transition: all .5s ease-in-out;
      }
      $this input:checked + label {
        background: #333;
      }
      $this input:checked + label span {
        color: #cf0;
      }
      $this input:checked + label > div {
        display: block;
      }
      $this input:checked ~ label[for="reset"] {
        opacity: 1;
        pointer-events: all;
      }
      $this label[for="reset"] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 2000;
        opacity: 0;
        background: rgba(0,0,0,.3);
        transition: all .1s ease-in-out;
        pointer-events: none;
      }
      $this input#reset:checked + label {
        opacity: 0;
        pointer-events: none;
      }
    }
    /* Mobile Menu View */
    @element '.eqNav' and (min-width: 0px) and (max-width: 499px) {
      $this {
        text-align: center;
      }
      $this label[for="menu"] {
        display: inline-block;
        width: auto;
        position: absolute;
        top: 0;
        right: 0;
      }
      $this label[for="menu"] span {
        display: inline-block;
        font-size: 200%;
        padding: .2em .5em;
        text-align: center;
        z-index: 3000;
      }
      $this input#menu:checked + label span {
        color: #cf0;
      }
      $this input[type="radio"] + label {
        display: none;
      }
      $this input#menu:checked ~ input[type="radio"] + label {
        display: block;
      }
    }
    /* Desktop Menu View */
    @element '.eqNav' and (min-width: 500px) {
      $this {
        text-align: right;
        max-height: auto !important;
        overflow: visible;
      }
      $this .brand {
        display: inline-block;
        float: left;
      }
      $this label[for="menu"] {
        display: none;
      }
      $this input + label > div {
        display: none;
        background: #333;
        position: absolute;
        width: auto;
        min-width: 200px;
        max-width: 500px;
        word-break: normal;
        right: 0;
        text-align: left;
        z-index: 3000;
        transition: all .5s ease-in-out;
      }
      $this:before {
        display: none;
      }
      $this label {
        display: inline-block;
      }
    }
  </script>
  <!--[if lt IE 9]><script src="http://elementqueries.com/EQCSS-polyfills.js"></script><![endif]-->
  <script src="http://elementqueries.com/EQCSS.js"></script>
</body>
</html>