<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;
}
View Compiled
/*==================
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);
}
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.