dropdown

by TimPietrusky

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<nav role="custom-dropdown">
    <input type="checkbox" id="button">
    <label for="button" onclick></label>
    
    <ul>
        <li><a href="#">Stream</a></li>
        <li><a href="#">Lab</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

SCSS

* {
   box-sizing:border-box; 
}

html,
body {
    width:100%;
    height:100%;
}

body {
    margin:.75em;
    background:url(http://cache.clickonf5.org/wp-content/uploads/2010/04/ubuntu_wallpaper_thumb.png);
    background-size: cover;
}

/* Advanced Checkbox Hack */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label { 
  display:none;
  cursor: pointer;
  user-select:none;
}

/* background-color for li / select */
$img_bg: url(https://raw.github.com/TimPietrusky/mantisbt-is-a-rockstar/master/rockstar/img/bg_dark_grey.png);

/* custom-dropdown */
nav[role="custom-dropdown"] {
    position:relative;
    width: 100%;
    
    a,
    label {
      color:#ccc;
      text-decoration:none;
      font: 1.4em sans-serif;
      transition:color .3s ease-in-out;
    }
    
    ul {
      padding: 0;  
      margin: 0 auto;  
      width:100%;
    
      > li {
        float:left;
        padding:.55em .55em;
        width:19%;
        background-image: $img_bg;
        text-align:center;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        transition-property: box-shadow, color;
        box-shadow:
          0 .05em .25em 0 rgba(0, 0, 0, .35)
        ;
        cursor: pointer;
    
        &:hover {
            background-color:rgba(0, 0, 0, .85);
            color:#fff;
            box-shadow:
              0 .05em .25em 0 rgba(0, 0, 0, .35),
              inset 0 0 0 2em rgba(0, 0, 0, .3)
            ;
    
            > a {
              color:#fff;
            }
        }
      }
    }
}

/* small screens */
@media screen and (max-width: 44em) {
  html,
  body {
    margin:0;      
  }

  nav[role="custom-dropdown"] {
    ul {
      display:none;
      height:100%;
    }

    label {
      position:relative;
      display:block;
      width:100%;
      min-height:2.25em;
     ...

JavaScript

/*
  Inspired by http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks

http://www.hongkiat.com/blog/responsive-web-nav/

  Optimized version of Hugo Giraudels checkboxes http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/
 */