var action = document.getElementById("action");
var navWrapper = document.querySelector(".nav-wrapper");
action.addEventListener("click", function () {
action.classList.toggle("list");
action.classList.toggle("close");
navWrapper.classList.toggle("open");
});
html, body {
position: relative;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div#container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
header {
z-index: 2;
position: absolute;
top: 0px;
height: 40px;
padding: 5px;
line-height: 30px;
width: 100%;
box-shadow: 0px 0px 5px black;
background-color: whitesmoke;
box-sizing: border-box;
}
.nav-wrapper {
z-index: 1;
position: absolute;
top: 40px;
left: -210px;
bottom: 0px;
width: 200px;
background-color: rgba(0, 0, 0, 0.3);
transition: width 0.5s linear, left 0.5s linear 0.5s;
}
.nav-wrapper nav {
height: 100%;
width: 200px;
box-shadow: 3px 0px 5px -3px black;
background-color: whitesmoke;
overflow: auto;
}
.nav-wrapper nav a {
display: block;
height: 40px;
width: 100%;
border-bottom: 1px solid silver;
line-height: 30px;
box-sizing: border-box;
padding: 5px;
}
.nav-wrapper nav a:hover {
background-color: gainsboro;
}
.nav-wrapper.open {
left: 0px;
width: 100%;
transition: width 0.5s linear 0.5s, left 0.5s linear;
}
main {
z-index: 0;
position: absolute;
top: 40px;
bottom: 0px;
width: 100%;
background-color: white;
overflow: auto;
padding: 5px;
box-sizing: border-box;
}
div.icon {
float: left;
height: 28px;
width: 28px;
border-radius: 2px;
margin: 2px;
background-size: calc(100% - 2px);
background-position: center;
background-repeat: no-repeat;
box-shadow: 0px 0px 5px black;
}
div.icon:hover {
background-color: gainsboro;
}
div.icon.list {
background-image: url(http://image005.flaticon.com/1/svg/114/114320.svg)
}
div.icon.close {
background-image: url(http://image005.flaticon.com/1/svg/122/122264.svg)
}
@media (min-width: 720px) {
div#action { display: none; }
.nav-wrapper {
z-index: 3;
top: 0px;
right: 0px;
height: 40px;
left: 0px;
width: auto;
background-color: transparent;
pointer-events: none;
}
.nav-wrapper nav {
width: auto;
float: right;
background-color: transparent;
pointer-events: auto;
overflow: hidden;
}
.nav-wrapper nav a {
display: table-cell;
width: auto;
padding: 5px;
line-height: 30px;
box-sizing: border-box;
border-bottom: 0px none transparent;
border-left: 1px solid silver;
white-space: nowrap;
}
<div id="container">
<header>
<div id="action" class="icon list"></div>
Titulo
</header>
<div class="nav-wrapper">
<nav>
<a href="">Link de Teste 01</a>
<a href="">Link de Teste 02</a>
<a href="">Link de Teste 03</a>
<a href="">Link de Teste 04</a>
<a href="">Link de Teste 05</a>
<a href="">Link de Teste 06</a>
</nav>
</div>
<main class="content">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec cursus ipsum. Vestibulum dignissim a quam vitae tincidunt. Suspendisse sapien mauris, rutrum eu nisl elementum, tristique consectetur magna. Phasellus fermentum, velit id ultricies ullamcorper, nulla erat tristique tortor, euismod laoreet lorem turpis id lorem. Aenean varius lorem nulla. Maecenas dictum efficitur dolor, nec vehicula mauris mollis quis. Proin congue scelerisque turpis. Maecenas dui nulla, ultricies eget lorem non, vulputate tristique diam. Pellentesque convallis, tortor ut imperdiet efficitur, lacus magna lobortis urna, vel scelerisque enim purus semper lorem. Praesent sed aliquet est.
</p>
<p>
Ut tincidunt non felis quis congue. Quisque ornare vel elit et lacinia. Cras scelerisque eu mauris nec tempor. Vivamus vel urna mattis, consectetur metus in, facilisis nisi. Morbi vitae dolor nisi. Phasellus eu mi ultrices, laoreet neque vitae, posuere orci. Nam in felis in sem ultrices rhoncus eu sit amet urna. Fusce eget diam vel dolor feugiat aliquam et ultricies mauris.
</p>
<p>
Morbi aliquet elit nibh, et viverra dui tempus ac. Integer eget diam nulla. Donec urna ligula, sagittis at lorem nec, blandit hendrerit metus. Vestibulum gravida dui vel sem gravida luctus. Vestibulum sed metus sit amet sapien tristique vestibulum. Proin ut lorem et est mollis eleifend non at sem. Pellentesque eu gravida est. Sed purus ipsum, varius eget accumsan sit amet, porta vitae ligula. In dictum, lorem id ultrices placerat, nulla justo viverra dui, sed viverra nibh risus vulputate metus. Proin aliquam posuere sem sed venenatis.
</p>
<p>
Curabitur tortor mi, varius ac orci sit amet, pulvinar vulputate augue. Suspendisse scelerisque lectus at commodo ultricies. Etiam ullamcorper dui vel justo auctor tempus. Phasellus id sollicitudin lectus. Pellentesque in quam quis dui sagittis cursus. Nulla iaculis posuere aliquet. Cras tempor auctor felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut porta eleifend nibh et auctor. Pellentesque at erat quam. In urna nisi, pharetra vehicula lacus eget, fermentum sagittis eros. Mauris iaculis ante eget tellus semper bibendum. Mauris sollicitudin dolor nunc, nec laoreet ante luctus sit amet.
</p>
<p>
Aliquam mi magna, dapibus ac egestas sed, aliquet id dui. Quisque ultrices efficitur urna, a cursus ipsum consequat hendrerit. Sed vehicula nisi sed vulputate pellentesque. Ut blandit sollicitudin sem vel egestas. Aliquam libero sapien, rutrum eget efficitur sed, ornare ut nibh. Pellentesque non cursus purus. Suspendisse volutpat ex vel nibh posuere, sed maximus ex maximus. Proin mi magna, placerat at purus id, bibendum lacinia nibh. Mauris non rhoncus ante. Proin mauris leo, suscipit vel laoreet egestas, venenatis a arcu. Fusce lobortis cursus placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ligula felis, pulvinar a interdum quis, auctor eu ipsum. Curabitur tempor, orci quis eleifend bibendum, tortor dolor venenatis nisi, ac facilisis quam nunc a enim. Nullam elit nulla, imperdiet eget euismod vitae, fringilla ut dolor. Morbi et accumsan neque, quis vehicula sem.
</p>
<p>
Duis dolor tortor, pulvinar ut ipsum sit amet, cursus aliquet neque. Donec non ligula lobortis, malesuada ligula eu, suscipit nibh. Nam tempor, ipsum cursus bibendum elementum, eros eros feugiat eros, nec rhoncus orci arcu placerat lectus. Integer et ultricies felis. Duis nulla ipsum, malesuada vitae urna nec, egestas scelerisque nisl. Integer vulputate consectetur finibus. Aliquam erat volutpat. Nam sed est nulla. Aliquam tristique sed lorem eget malesuada. In hac habitasse platea dictumst. Cras ac dui elit. Proin pharetra sit amet metus ut fringilla. Etiam at turpis nec lacus mollis lobortis sodales non nisl.
</p>
<p>
Nullam facilisis quam vitae suscipit euismod. Ut ligula metus, ultrices a nisi venenatis, tristique dictum lectus. Phasellus auctor porttitor tellus, sit amet vehicula velit malesuada in. Integer mauris nulla, volutpat ut hendrerit sit amet, gravida non leo. Duis purus augue, tempus eget pretium nec, malesuada malesuada tellus. Maecenas convallis pretium metus nec molestie. Morbi ac maximus mauris, in iaculis metus. Maecenas elementum dui ac tortor volutpat, ut iaculis odio convallis. Fusce malesuada tristique enim, ac vulputate leo semper in. Quisque auctor tempus urna, non suscipit justo mattis ut. In at metus blandit, euismod est id, mattis ex. Praesent gravida feugiat felis eget scelerisque.
</p>
<p>
In urna nulla, dapibus in hendrerit sed, elementum suscipit eros. Vivamus dapibus magna vitae odio efficitur venenatis. Nulla id suscipit felis. Vestibulum varius sapien et nibh porta, sit amet ultricies velit pharetra. Vestibulum dictum diam et eros elementum convallis. Suspendisse id sem felis. Fusce dapibus, nibh at semper euismod, velit enim mollis lectus, eu mattis nulla turpis id magna. Morbi nec neque urna. Ut imperdiet pellentesque elit, fringilla laoreet ex venenatis sit amet. Mauris aliquam metus sem, id sagittis diam sollicitudin sit amet. Sed id venenatis est. Mauris id nisi justo. Cras varius ante non enim lacinia tristique. Ut justo dui, condimentum sed urna non, finibus tristique est. Nunc nec elit auctor, lacinia ipsum non, blandit odio. Nulla sit amet ligula et risus tincidunt fermentum ut sit amet massa.
</p>
<p>
Integer vitae tincidunt odio. Quisque dui dolor, pellentesque id vehicula vitae, molestie dignissim justo. In ut scelerisque eros. Etiam at ipsum sit amet nulla fermentum sagittis. Quisque vitae auctor est. Fusce magna sem, tempus sed venenatis sed, rhoncus egestas odio. Quisque eleifend, odio eget tempus lobortis, nisi ante tincidunt tortor, non vestibulum urna leo aliquet elit. Fusce scelerisque nunc maximus felis blandit pharetra. Nunc commodo sed justo in facilisis. Cras lacinia risus et lorem rhoncus, in congue tortor condimentum. Suspendisse potenti. Nam rhoncus libero quis ipsum hendrerit efficitur. Ut diam purus, tincidunt eu varius sed, rhoncus a eros. Etiam vitae lacinia orci, eget vestibulum justo.
</p>
<p>
Aliquam malesuada erat et justo placerat tristique. Sed blandit rutrum nibh a porttitor. Duis ut erat sit amet libero accumsan vehicula. Cras quis ex nec quam convallis suscipit. Nulla nisl enim, suscipit sit amet porttitor id, commodo non nunc. Curabitur ut imperdiet enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla accumsan laoreet sem, sit amet imperdiet metus malesuada sit amet. Integer finibus pharetra mattis.
</p>
<p>
Etiam elit lacus, volutpat a sagittis vitae, tincidunt eget ipsum. Sed ac augue hendrerit, tempus nisl eu, porttitor est. Quisque elementum porta tortor, ac ornare elit rhoncus eget. Morbi vel rutrum eros. Quisque quis efficitur ipsum, commodo eleifend nisl. Suspendisse sodales consequat convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi consequat congue arcu vulputate dapibus. Nulla vitae consectetur eros, in luctus felis.
</p>
<p>
Nam tempus justo ac lorem imperdiet, ut blandit ipsum pellentesque. In iaculis velit ante. Quisque eleifend mi id hendrerit porttitor. In sem ipsum, fermentum vitae lorem vel, aliquet finibus odio. In in ante ac lorem faucibus vulputate non iaculis justo. Aenean gravida ante quis venenatis lobortis. Maecenas pellentesque facilisis est vel faucibus. Integer sapien ligula, tempor vitae finibus vitae, elementum sed purus. Nunc iaculis nulla ac enim vehicula, at faucibus lacus laoreet. Phasellus venenatis venenatis est, dictum tincidunt tortor malesuada in. Cras at nulla ipsum. Sed suscipit felis non sapien fermentum semper. In hac habitasse platea dictumst. Ut vel libero quis erat laoreet porta. Donec massa mauris, pulvinar tincidunt dolor at, iaculis auctor tortor. Nulla vel libero et diam tincidunt blandit nec quis purus.
</p>
<p>
Cras porta, arcu nec iaculis mollis, dolor enim pellentesque mauris, sed bibendum erat orci laoreet sem. Praesent purus lorem, congue vel nisl nec, pharetra dictum nibh. Cras ac mauris tempus, interdum tortor vel, pulvinar sapien. Mauris id ipsum id sem condimentum iaculis a in urna. Pellentesque vehicula arcu at congue ullamcorper. Proin dictum purus nulla, at volutpat nulla fermentum ut. Ut eleifend dui est, sed pellentesque sem lobortis non. Ut tellus dui, sodales sed pharetra commodo, aliquam vitae magna. Donec vel ultricies velit. Nunc hendrerit rutrum tellus, et ultricies eros aliquam ut. Ut eu elit lorem. Mauris consectetur sapien risus, at vulputate metus rutrum eleifend. Vivamus ac molestie lectus.
</p>
<p>
Mauris at odio quis lacus varius posuere in sed arcu. Fusce dapibus arcu volutpat erat tincidunt, pulvinar commodo urna hendrerit. Donec nec justo maximus, sollicitudin mi at, placerat justo. Sed vitae ipsum porta, fermentum velit ac, vestibulum felis. Nulla ornare condimentum rutrum. Sed iaculis feugiat orci et rhoncus. Vivamus ut est quis erat commodo lacinia. Suspendisse consequat sem in augue sollicitudin pretium. Quisque commodo rhoncus nulla faucibus aliquam. Phasellus tristique velit nec sapien pulvinar lobortis. Fusce eu mollis velit, ac malesuada sapien. Praesent ultrices leo ac feugiat luctus. Nulla blandit dignissim purus non porttitor. Ut vel pretium nulla.
</p>
<p>
Nam dignissim vestibulum ante, in consectetur purus semper non. Praesent venenatis sapien sed ultricies porta. Cras eu consectetur dolor, at efficitur mi. Cras enim purus, finibus non turpis ac, aliquet vulputate lorem. Aliquam maximus felis in orci rhoncus, eget finibus orci aliquet. Maecenas convallis lacus convallis lacus aliquet auctor. Phasellus dolor est, facilisis sed sapien et, maximus semper justo. Nam eget arcu id ligula fringilla commodo at at lectus. Sed bibendum mattis erat, vel bibendum mauris ultrices id. Suspendisse imperdiet massa sed purus vestibulum, posuere volutpat dolor porta. Proin consequat nisl lacus, dictum facilisis nisi auctor ut. Morbi a ante a lorem rutrum volutpat faucibus eu est.
</p>
</div>
</main>
</div>
You have a horizontal menu, and you want to go vertical if the resolution is low, that’s it?
– Guilherme Lautert
Exactly, is that clear? @Guilhermelautert
– Tiago P.C
I had to read it three times to understand. It would be good if you edit it, to make it clearer, as well as post your code, to understand the environment. To think about a solution.
– Guilherme Lautert
All right, @Guilhermelautert.
– Tiago P.C
Edited question! Downvoters rethink and comment with constructive criticism. ;)
– Tiago P.C
Hello. Any reason to have the tag [tag:ux] in this question? I think not, because you request "good practices" from the programming point of view. So I removed the tag, okay?
– Luiz Vieira