<nav role="navigation" class="nav">
  <span id="mobmenu"></span>
  <a href="#" class="item">menu1</a>
  <a href="#" class="item">menu2</a>
  <a href="#" class="item">menu3</a>
  <a href="#" class="item">menu4</a>
</nav>

@import "compass/css3";

$orange: orangered;
$hover: #ccc;
$breakpoint: 650px;
$max-width-menu: 850px;

/************************************
This class holds the menu items
************************************/
.nav {
  margin: 20px auto;
  padding: 0;
  /* YOU CAN USE IT ONE LISTS TOOOOOO */
  list-style-type:none;
  background: $orange;
  
  /************************************
  overflow:hidden is vital for this menu
  because the items *float* to the left
  and they would disappear, without 
  this style applied.
  This way .nav expands to contain the
  floats and displays them!
  https://css-tricks.com/all-about-floats/
  ************************************/
  overflow:hidden;
  box-shadow: 10px 10px 10px #333;
  max-width: $max-width-menu;
  .item {
    /* display them horizontally*/
    display: inline-block;
    /* grab some space around them */
    padding: 20px 0 20px 0;
    width: 25%;
    /* float them to the left, to avoid 
    margins on the side (different
    in each browser) */
    float:left;
    color: white;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    &:hover, &.current {
      background: $hover;
      color: black;
    }
  }
}

#mobmenu {
  /* hide it at first! */
  display:none;
  
  text-align: center;
  height: 64px;
  cursor:pointer;
}

@media only screen and (max-width:$breakpoint) {
  #mobmenu{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAACVBMVEX///8AAAD///9+749PAAAAAnRSTlMAAHaTzTgAAAAnSURBVHhe7c+hEQAACMNAlmTJTompq+OOw+RlXCpB9h3aFoGXgxAwLsSUwfWOht8AAAAASUVORK5CYII=) no-repeat;
    background-position: 50%;
    /* NOW IT'S TIME TO SHOW THE MENU TOGGLE */
    display:block;
  }
  
  /*Either be more specific or use important:
  .menu {
    padding: 0;
    opacity: 0;
    height: 0;
  }
  */
  .nav .item{
    /* this is 'deprecated' */
    /*display: none;*/
    
    padding: 0;
    opacity: 0;
    height: 0;
  } 

}
@media only screen and (min-width: $breakpoint) {
  .nav .item{
    /*
    WE HAVE TO SET IT TO IMPORTANT,
    BECAUSE WE HAVE TO OVERRIDE THE
    JAVASCRIPT INLINE CODE WE WROTE
    */
    width: 25% !important;
    padding: 20px 0px 20px !important;
    opacity: 1 !important;
    height: auto !important;
  }
}













.hint {
  background: lightgrey;
  padding: 1em;
  font-size: 1.5em;
  text-align:center;
  margin: 2em auto 2em;
  clear:both;
}

/*==================
JAVASCRIPT FOR THE
NAVIGATION MENU
==================*/
(function() {
	var showing = false,
      mobmenu = document.getElementById('mobmenu'),
      items = document.getElementsByClassName('item');
  console.log('showing ' + showing);
  mobmenu.onclick = function() {
    var i=0,item;
    if(!showing)
      while(item=items[i++]) {
		  	//item.style.display = 'inline-block';
        //padding-top + padding-bottom + 1em
        item.style.padding = "20px 0px 20px 0px";
   	  	item.style.width = "100%";
   	  	item.style.opacity = "1";
        item.style.height = "auto";
         
		  }
		 else
       while(item=items[i++]) {
	  		//item.style.display = 'none';
         item.style.padding = "0";
         item.style.opacity = "0";
         item.style.height = "0";
         
       }
    console.log('showing b ' +showing);
	  showing = !showing;
    console.log('showing a ' +showing);    
  }
})();