CSS only menu

css-only-menu.markdown

CSS only menu

This could be a JS free fallback for a menu on smaller screens. Click the navicon to have the menu open!

This is done by using a checkbox which is along side the 'nav' menu. When the checkbox is checked, the menu will open. The input is the full width and height of the initial header so that it is easy to click.

Navicon is based on http://w3bits.com/animated-menu-icon-css/

A Pen by Dan Ford on CodePen.

License.

index.html

<header>
  <input class="burger-input" type="checkbox" id="click"/>
  <label for="click">
    <div class="burger"></div>
  </label>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
  </nav>
</header>

style.scss

@import 'bourbon';

$headerBg: #426bde;
$naviconFg: #ffffff;
$listItemFg: #ffffff;
$listItemBg: #6281d8;
$listItemBgHov: lighten($listItemBg, 5%);

header {
  background-color: $headerBg;
}

// The menu controlled by the burger
.burger-input {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 45px;
  cursor: pointer;
  position: absolute;
  + label {
    width: 30px;
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    cursor: pointer;
    position: relative;
    &:after,
    &:before,
    .burger {
      content: '';
      width: 25px;
      height: 4px;
      display: block;
      margin: 3px auto;
      border-radius: 3px;
      background-color: $naviconFg;
      @include transition(all 200ms ease-in-out);
    }
  }

  &:checked {
    + label {
      top: 4px;
      &:before {
        @include transform(translateY(2px) rotate(135deg));
      }
      &:after {
        @include transform(translateY(-12px) rotate(-135deg));
      }
      .burger {
        @include transform(scale(0));
      }
    }
    ~ nav {
      display: block;
      li {
        display: block;
        text-align: center;
      }
    }
  }
}


// Navigation styles
nav {
  display: none;
}

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
  a {
    display: block;
    padding: 10px 0;
    color: $listItemFg;
    background-color: $listItemBg;
    @include transition(background-color 250ms ease-in-out);
    &:hover {
      background-color: $listItemBgHov;
    }
  }
}

a {
  text-decoration: none;
}

body {
  background-color: #1D1F20;
}

*, :before, :after {
  box-sizing: border-box;
}