I made a header and retractable side menu, but I can not now organize the body of the site next to the menu, it always stays down and if I float left and right it gets occupying 10% of the screen size and glued to the right side.
HTML and CSS
html,
body {
height: 100%;
width: 100%;
}
body {
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/*menu*/
#menu-lateral {
width: 250px;
height: calc(100% - 40px);
-moz-transform: translate3d(-250px, 0, 0);
-webkit-transform: translate3d(-250px, 0, 0);
-ms-ransform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
transition: ease 1;
}
.toggleMenu {
-moz-transform: translate3d(0, 0, 0) !important;
-webkit-transform: translate3d(0, 0, 0) !important;
-ms-transform: translate3d(0, 0, 0) !important;
-o-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
main {}
/*barra de cabeçalho*/
header {
width: 100%;
height: 40px;
background-color: red;
}
/*config do corpo da pag*/
.home-wrapper {
background-color: gainsboro;
width: 100%;
height: 100%;
}
-Edit- A pedidos,
o JS var clique=document.getElementById("btn-menu");
var menuLateral=document.getElementById("menu-lateral");
clique.onclick=function (e) {
e.preventDefault();
menuLateral.classList.toggle('toggleMenu');
}
;
}
);<body>
<div class="home-wrapper">
<header>
<div class="btn-header">
<a href="#" id="btn-menu">
<img src="img/menu55.png">
<img src="img/icone_logo.png">
<p>Home</p>
</a>
</div>
</header>
<aside id="menu-lateral">
<div class="menu-wrapper">
<div id="menu">
<div class="nome-cargo-titulo">
<h3 class="nome-titulo">nome</h3>
<h4 class="cargo-titulo">cargo<h4>
</div>
<div class="divisoria-menu"><p></p></div>
<ul class="box">
<li><a href="#">Acesso </a></li>
<li><a href="#">Ação </a></li>
<li ><a href="#">Lançamento</a></li>
<li ><a href="#">Lançamento</a></li>
<li><a href="#">Lançamento</a></li>
<li><a href="#">Saldo</a></li>
</ul>
</div> <!-- /#menu -->
</div>
</aside>
<main>
<p>aosihdasoidasoihafasf</p>
</main>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body> In short: aside is left and retractile, <section> is the body of the site. At the moment the section is going down of all content of the page and I need that it occupy the space next to the menu (to the right).
Site Screen:
