How to organize the HTML body on the screen with CSS

Asked

Viewed 2,228 times

2

I made a header and a retractable side menu, but I can not now organize the body of the site next to the menu, it is always down and if I give float left and right it is occupying 10% of the screen size and stuck on 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: The aside is left and is retractable, and the <section> is the body of the site. At the moment Section is going down the entire content of the page and I need it to occupy the space next to the menu(on the right).

Site screen:

inserir a descrição da imagem aqui

html css css3 front-end webdesign

1 answer

3

I made a quick sketch. See...

		<script type="text/javascript">

			$(document).ready(function(){
				$('#btn-menu').click(function(){
					$("#menu-lateral").toggleClass('toggleMenu');
					$('main').toggleClass('vai');
				});
			});
	html, body {
		    height: 100%;
		    width: 100%;
		    margin: 0;
		    padding: 0;
		}
		body {
		    text-align: center;
		    text-shadow: 0 1px 3px rgba(0,0,0,.5);
		}
		/*menu*/
		#menu-lateral {
		    width: 0%;
		    background: #FFF;
		    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: all 1s ease;  
		    float: left;  
		}
		.toggleMenu {
			width: 20%;
		    max-width: 250px;
			
		    -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 {
			float: right;
			width: 95%;
			background: #C7C7C7;
			height: 100%;
			transition: all 1s ease;
		}
		/*barra de cabeçalho*/
		header{ 
		    width: 100%;
		    height: 40px;
		    background-color: #FF0;
		    text-align: left;
		    text-indent: 10px;
		}
		/*config do corpo da pag*/
		.home-wrapper{
		    width: 100%;
		    height: 100%; 
		}
		ul.box{
			margin:0;
			padding; 0;
		}
		ul.box li{
			list-style: none;
			font-size: 14px;
			font-family: 'Verdana';
			margin: 0;
			padding: 0;
		}
		.vai{
			width: 80%;
		}
<!DOCTYPE html>

	 <head>

		
    </head>
    <body>
    <div class="home-wrapper">
       <header>
           <div class="btn-header">
               <a href="#" id="btn-menu">
               	|||||||
               <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="#">Link 1</a></li>
                       <li><a href="#">Link 1</a></li>
                       <li><a href="#">Link 1</a></li>
                       <li><a href="#">Link 1</a></li>
                       <li><a href="#">Link 1</a></li>
                       <li><a href="#">Link 1</a></li>
                   </ul>
               </div> <!-- /#menu -->
           </div>    
       </aside>
       <main>
       	<p>aosihdasoidasoihafasf</p>    
       </main>
       </div>
    </body>
</html>

  • I did it and it worked, but he bugged the animation of the menu. Now he shows up face instead of being pulled aside like before...

  • What’s in your script.js ? It’s the menu animation ? If so, you can do it with CSS. Because I didn’t see any Hover in the Menu. From what I saw, by JS you make a toggleClass of class . toggleMenu in CSS.

  • I edited there, yes that’s all that was done

  • Look at the code I put in the edit of my reply. You don’t need a JS script to run the menu display function.

  • i did not understand this menu Hover, pq when I click the button the menu n pushes the button to the side, soon the mouse n gets on top of it and on mobile phones and tablets n would work(I think..) and n worked here your code :/

  • 1

    Ha Siiim! So, is that here I do not have the image, nor did I realize that had an icon that pushed the menu. So really you need a JS script. I’m sorry. I’ll edit my code.

  • Ah now I got it, my bad, only I need mine to come with the click on the button pq this site will be used only on mobile phones and tablets

  • I posted there a censored image of how it has to look kk

  • Let’s go continue this discussion in chat.

  • I’m in the chat room!

  • @Andreyhartung repeated my answer. Save in a separate file and see what I did... so you have an idea.

  • partner, this isn’t working... is this right here or did I take a dump? http://pastebin.com/0qD2Uk6t

  • https://jsfiddle.net/t3219ehn/ - Connects to this LINK.

  • Partner, would you mind stepping into the chat room so I can talk to you?

Show 9 more comments

Browser other questions tagged html css css3 front-end webdesign

You are not signed in. Login or sign up in order to post.