A Pen by brownman.

index.html

<input type="checkbox" id="nav">
<navigation>
  <a href="http://codepen.io/brownman/pen/sKiLe">css stolen from</a>
  <a href="http://osrc.dfm.io/brownman#events">on the web</a>
  <a href="https://github.com/brownman/magnify_the_small">Magnify_the_small(Bash)</a>
  <a href="https://github.com/brownman/meteor-tts-chat">A test-to-speech chat</a>
  <a href="https://github.com/brownman/mind_maps">mind-maps collection</a>
  <a href="https://github.com/brownman/m.t.s.2">Virtualization+Packaging</a>
</navigation>
<content>
 
 feel free to discover this page's links.. ofer.
</content>
<!-- No more markup needed :D -->

Responsive-Top-Menu-Pure-CSS-and-HTML-by-Joni.markdown

Responsive Top Menu Pure CSS and HTML by Joni

Hope you like this top menu. The goal is to be super minimal in the HTML and the same for the CSS. The CSS is a bit messy but I think you can understand it.

A Pen by brownman on CodePen.

License.

script.js

window.addEventListener('load', function(){
    new FastClick(document.body);
}, false);

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:100);
html {
  min-height:100%;
}

body {
  font-family:'HelveticaNeue-Light', Roboto;
  background: #121a1d; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #121a1d 0%, #1abc9c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#121a1d), color-stop(100%,#1abc9c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #121a1d 0%,#1abc9c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #121a1d 0%,#1abc9c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #121a1d 0%,#1abc9c 100%); /* IE10+ */
background: linear-gradient(135deg,  #121a1d 0%,#1abc9c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#121a1d', endColorstr='#1abc9c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color:#fff;
}
input[id*="nav"] {
  z-index:1;
  position:absolute;
  left:-45px;
  width:0;
  height:0;
  padding:0;
  margin:0;
  border:1px solid red;
  cursor:pointer;
}
input[id*="nav"]:after {
  width:25px;
  height:25px;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1319/nav-icon-on.png);
  background-repeat:no-repeat;
  background-size:20px;
  content:"";
  transform:translateX(57px) translateY(15px);
  position:absolute;
}
input[id*="nav"]:checked ~ navigation a {
  pointer-events: auto;
}

navigation {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:45px;
  background:#222;
  opacity:0;
  transition:.3s;
  text-align:right;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
navigation a {
  color:#fff;
  text-decoration:none;
  font-size:12px;
  margin-right:20px;
  user-select:none;
  position:relative;
  margin-top:17px;
  display:inline-block;
  pointer-events: none;
  margin-left:-5px;
}
input[id*="nav"]:checked ~ navigation {
  opacity:1;
}
content {
  display:block;
  padding:100px 70px;
  font-size:51px;
}
navigation a:after {
  content:"";
  height:2px;
  width:100%;
  position:absolute;
  background:#fff;
  top:20px;
  left:50%;
  margin-left:-50%;
  transform:rotateY(90deg);
  transition:.3s;
}
navigation a:hover:after {
  transform:rotateY(0deg);
}

@media all and (max-width:380px) {
  navigation {
    height:auto;
  }
  navigation a {
    display:block;
    text-align:center;
    margin:0;
    padding:14px 0;
  }
  navigation a:after {
    top:40px;
  }
  content {
    font-size:32px;
    padding:50px 35px;
  }
}