Responsive menu demo

index.html

<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
  <ul>
    <li>Home</li>
    <li>About us</li>
    <li>
      Our company
      <ul>
        <li>History</li>
        <li>Very long and tedious history</li>
      </ul>
    </li>
    <li>Our team</li>
    <li>Contact us</li>
  </ul>
  
  <label for="navbar-checkbox" class="navbar-handle"></label>
</nav>

responsive-menu-demo.markdown

Responsive menu demo

Pure CSS implementation

A Pen by Hussain AlQatari on CodePen.

License.

style.less

// Smaller menu when on small screen
// All padding and margin are in em, so they will scale as well
@media (min-width : 900px) {
  .menu {
    font-size: 1.2em;
  }
}

.menu {
  padding: 0.5em;
  background: #eee;
  min-height: 2em;
  line-height: 1em;

  > ul {
    transition: max-height .25s linear;    
  }
  
  ul {
    margin: 0;
    padding: 0;
    text-align: center;
  }
  li {
    // visibility transition is on li because multiple transition selectors is not well supported
    transition: visibility .25s linear;
    display: inline-block;
    border: 1px solid;
    padding: .45em 1.1em;
    margin: 0 .3em;
    position: relative;
  }
}

@media (min-width : 651px) {
  .menu {
      li { // nested menu
        ul {
          display: none;
          position: absolute;
          top: 100%;
          margin-top: 1px;
          left: -1px;
          right: -1px;
        }
        &:hover ul {
          display: block;
        }
        li {
          margin: -1px 0 0 0;
          box-sizing: border-box;
          width: 100%;
        }
     }
  }
}

@media (max-width : 650px) {
  .menu {
    > ul {
      max-height: 0;
      overflow: hidden;
      margin: 0 3.5em 0 1em;
    }

    li {
      visibility: hidden;
      display: block;
      padding: 0.5em 0.6em;
      border: none;
    }
    
    li { // nested menu
      ul {
        margin-top: 0.5em;
        border-left: 1px solid #000;
      }
    }

    .navbar-handle {
      display: block;
    }
  }
  
  #navbar-checkbox:checked + .menu {
    ul {
      max-height: 300px;
    }
    
    li {
      visibility: visible;
    }
    .navbar-handle {
      &, &:after, &:before {
        border-color: #aaa;
      }
    }
  }
}

.navbar-checkbox {
    display: none;
}

.navbar-handle {
    @height: 45px; // just a reference to compute em values on the fly
    display: none;
    cursor: pointer;
    position: relative;
    font-size: @height;
    padding: .5em 0;
    height: 0;
    width: 1em * 75px / @height;
    border-top: (1em * 6px / @height) solid;

    &:before, &:after {
        position: absolute;
        left: 0;
        right: 0;
        content: ' ';
        border-top: (1em * 6px / @height) solid;
    }

    &:before {
        top: 1em * 17px / @height;
    }

    &:after {
        top: 1em * 40px / @height;
    }
}



///////////

.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  
  .navbar-handle {
    position: absolute;
    font-size: 1.2em;
    top: 0.7em;
    right: 12px;
    z-index: 10;    
  }
}