Select

index.html

<nav role="select">
    <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>
    
    <select onchange="if (this.value) window.location.href = this.value;">
        <option value="#">Stream</option>
        <option value="#">Lab</option>
        <option value="#">Projects</option>
        <option value="#">About</option>
        <option value="#">Contact</option>
    </select>
</nav>

script.js

 /**
  Select
  
  # What? #
  Part of my "Responsive Menu Concepts" article on CSS-Tricks
  https://css-tricks.com/responsive-menu-concepts


  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

select.markdown

Select

Part of my Responsive Menu Concepts article on CSS-Tricks.

A Pen by Tim Pietrusky on CodePen.

License.

style.scss

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Exo:400,500,700,700italic);

* {
   box-sizing:border-box; 
}

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

body {
    margin:1.25em .75em;
    background:url(https://subtlepatterns.com/patterns/black-Linen.png);
    font: 1.4em 'Exo', sans-serif;
}

nav[role="select"] {
    width: 100%;
    position:relative;
    color:#000;
    
    > select {
      display:none;  
    }
    
    ul {
      width:100%;
      list-style:none;
    
      > li {
        float:left;
        padding:.55em .45em;
        width:19%;
        font-size:1.2em;
        background-color: hsla(304, 35%, 51%, .5);
        text-align:center;
        transition-duration: .15s;
        transition-timing-function: ease-in-out;
        transition-property: box-shadow, background, color, text-align, padding;
        cursor: pointer;
    
        &:hover {
            background-color: hsla(304, 35%, 51%, .3);
            color:#fff;
            text-align:left;
            padding-left:.75em;
            box-shadow:
              0 0 0 .25em rgba(0, 0, 0, .3),
              0 0 0 .5em rgba(0, 0, 0, .3),
              0 0 0 .75em rgba(0, 0, 0, .3),
              inset 0 0 0 .25em rgba(0, 0, 0, .3)
            ;           
        }
    
        > a {
          color:inherit;
          text-decoration:none;
          transition:inherit;
        }
      }
    }
}

/* small screens */
@media screen and (max-width: 44em) {
  body {
   margin:1em 0;     
  }
    
  nav[role="select"] {
    ul {
      display:none;
    }

    &:after {
        position:absolute;
        z-index:-1;
        content:"Menu";
        right:0;
        bottom:-1.75em;
        background:hsla(304, 35%, 51%, .4);
        padding:.15em .55em;
    }

    select {
      display:block;
      user-select:none;
      cursor: pointer;
      width:100%;
      padding:.55em .45em;
      border:none;
      background-color: hsla(304, 35%, 51%, .25);
      font: 1.2em 'Exo', sans-serif;
    }
  }
}