Responsive Sidebar according to information

Asked

Viewed 109 times

1

I’m not being able to make my menu responsive, I mean, in case I put a lot of information in the center of the container it breaks, I’d like this menu to extend or something similar to that... How would you do?inserir a descrição da imagem aqui

Would you like it not to be this blank space, is there any way? Type like this (image below), but with content

insira o código aqui

My HTML and CSS codes are:

      nav {
    
        background-color: #2f3e53;
    
    }
    
    .nav-wrapper a.button {
    
        margin: 0% 0% 0% 3%;
        display:none;
    
    }
    
    .barra-lateral {
    
        background-color: #697586;
        color:white;
        width:30%;
        font-size:1.30em;
        
    
    }
    
     li {
        
        list-style-type: none;
        padding: 2% 5%;
    
    }
    .container.corpo {
    
        margin-left:40%;
        margin-top:-28%;
        padding-top:2%;
        width:60%;
    
    }
    footer{
        margin-top: 26%;
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<nav>
    
        <div class="nav-wrapper">
    
            <!--<a href="#" class="brand-logo"><img src=" {{ asset('assets.Painel.img.logo.png') }}"></a>-->
    
    
            <ul id="nav-mobile" class="right hide-on-med-and-down">
    
                <li><a href="">Perfil  </a></li>
    
    
            </ul>
            <a class="button"><i class="fas fa-bars"></i></a>
    
        </div>
    
    </nav>
    
    <div class="barra-lateral">
    
            <li><i class="fas fa-user"></i>    Perfil  
                <ul>
                    <li>Editar Perfil</li>
                </ul>
            </li>
            <li><i class="fas fa-home"></i>    Home         </li>
            <li><i class="fas fa-clipboard"></i>    Cursos  
                <ul>
                    <li>Adicionar Curso</li>
                    <li>Editar Curso</li>
                    <li>Excluir Curso </li>
                    <li>Consultar lista de Cursos</li>
                </ul>
            </li>
            <li><i class="fas fa-clipboard"></i>    Categoria de Cursos     
                <ul>
                    <li>Adicionar Categoria de Curso</li>
                    <li>Editar Categoria de Curso</li>
                    <li>Excluir Categoria de Curso </li>
                    <li>Consultar Categoria de lista de Cursos</li>
                </ul>
            </li>
            <li><i class="fas fa-gifts"></i>    Combos      </li>
            <li><i class="fas fa-newspaper"></i>    Notícias    </li>
            <li><i class="far fa-newspaper"></i>    Categoria de Notícias   </li>
            <li><i class="fas fa-users"></i>    Clientes    </li>
            <li><i class="fas fa-smile"></i>    Parceiros   </li>
            
    
    </div>
<footer class="page-footer">

      <div class="container">

        <div class="row">

          <div class="col l6 s12">
            <h5 class="white-text">Aos usuários</h5>
            <p class="grey-text text-lighten-4">Caso encontre algum bug no sistema, por favor informar imediatamente</p>
          </div>



        </div>

      </div>

      <div class="footer-copyright">

        <div class="container">

        © 2019 Instituto Técnico Profissionalizante


        </div>

      </div>
      
    </footer>

The part of container it’s not mine, I’m using the framework materialize to help me with some things, I’m also using for front part the Laravel Rail system

If I haven’t been clear enough, I’ll add more information.

css html5 laravel-blade

  • Cara edits your question and also puts HTML, without it it is difficult to answer...

  • Okay, I’ll edit the info.

  • Dude but in your HTML you don’t even have the footer, it is very different from what the image represents... The ideal is to put a code to better simulate the problem you have there, but only with this code does not match the image

  • @hugocsl is now correct, I added the materialize scripts and the missing footer part of my footer.

1 answer

0


Face an option is to wrap the sidebar and the div that will receive the content in a flex-container, so you put at once next to each other and your sidebar will always match the size of the div content next door.

inserir a descrição da imagem aqui

Follow the image code above

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

nav {

	background-color: #2f3e53;

}

.nav-wrapper a.button {

	margin: 0% 0% 0% 3%;
	display: none;

}

.barra-lateral {

	background-color: #697586;
	color: white;
	width: 30%;
	font-size: 1.30em;


}

li {

	list-style-type: none;
	padding: 2% 5%;

}

.container.corpo {

	margin-left: 40%;
	margin-top: -28%;
	padding-top: 2%;
	width: 60%;

}

footer {
	/* margin-top: 26%; */
}

.wrapper {
	width: 100%;
	display: flex;
}

.cont {
	width: 70%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<nav>

	<div class="nav-wrapper">

		<!--<a href="#" class="brand-logo"><img src=" {{ asset('assets.Painel.img.logo.png') }}"></a>-->


		<ul id="nav-mobile" class="right hide-on-med-and-down">

			<li><a href="">Perfil </a></li>


		</ul>
		<a class="button"><i class="fas fa-bars"></i></a>

	</div>

</nav>

<div class="wrapper">
	<div class="barra-lateral">

		<li><i class="fas fa-user"></i> Perfil
			<ul>
				<li>Editar Perfil</li>
			</ul>
		</li>
		<li><i class="fas fa-home"></i> Home </li>
		<li><i class="fas fa-clipboard"></i> Cursos
			<ul>
				<li>Adicionar Curso</li>
				<li>Editar Curso</li>
				<li>Excluir Curso </li>
				<li>Consultar lista de Cursos</li>
			</ul>
		</li>
		<li><i class="fas fa-clipboard"></i> Categoria de Cursos
			<ul>
				<li>Adicionar Categoria de Curso</li>
				<li>Editar Categoria de Curso</li>
				<li>Excluir Categoria de Curso </li>
				<li>Consultar Categoria de lista de Cursos</li>
			</ul>
		</li>
		<li><i class="fas fa-gifts"></i> Combos </li>
		<li><i class="fas fa-newspaper"></i> Notícias </li>
		<li><i class="far fa-newspaper"></i> Categoria de Notícias </li>
		<li><i class="fas fa-users"></i> Clientes </li>
		<li><i class="fas fa-smile"></i> Parceiros </li>


	</div>
	<div class="cont">
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore quas nostrum est excepturi vitae
		recusandae minima ad unde architecto repellendus, doloribus nam dolore, enim ratione tempore, aliquam at
		itaque a accusantium aliquid incidunt. Dolore inventore accusamus eaque, placeat quidem reiciendis, numquam
		illum voluptatum autem dicta rerum! Eaque tempore fugit magnam id atque aut quasi optio similique veniam
		nulla quis beatae odio culpa nam, dicta voluptate architecto vero libero saepe repellat eveniet minus?
		Laboriosam, ipsum alias officia ab iusto reprehenderit iure maiores suscipit eius pariatur asperiores
		consectetur atque soluta id. Placeat sunt id voluptatibus unde praesentium possimus laboriosam in adipisci
		impedit dicta deserunt doloremque nostrum nemo at dolorem beatae fuga, quo tenetur cumque, saepe quis?
		Expedita molestiae, impedit quia itaque dolore in similique laudantium fugit placeat libero optio? Ad sequi
		impedit aspernatur, sed esse nesciunt recusandae aliquam quibusdam blanditiis ut neque consectetur
		dignissimos assumenda odit minima natus aliquid non. Nostrum explicabo, minima similique optio incidunt
		atque possimus id animi assumenda esse ut eveniet est repellendus eum laboriosam totam nemo qui dolor iste
		cupiditate itaque ex ipsum. Repellat, officia enim veniam quos architecto corporis sapiente inventore
		molestias odit. Aut ex optio dignissimos aliquid fugiat, tenetur iusto, qui deserunt numquam amet, sunt
		sapiente laboriosam alias modi ut eaque dolorum maiores doloremque perferendis laudantium ad sit beatae?
		Quasi explicabo quia porro adipisci, consequuntur quibusdam autem. Unde illum voluptate aperiam voluptatem,
		aliquam possimus, obcaecati iusto ullam eos, distinctio rem esse quis temporibus. Possimus, facilis atque
		blanditiis nesciunt laudantium aliquam rem, iste obcaecati perferendis culpa repellat ipsum necessitatibus,
		delectus itaque magni corporis accusantium ab. Consequatur laudantium doloribus 
	</div>
</div>
<footer class="page-footer">

	<div class="container">

		<div class="row">

			<div class="col l6 s12">
				<h5 class="white-text">Aos usuários</h5>
				<p class="grey-text text-lighten-4">Caso encontre algum bug no sistema, por favor informar
					imediatamente</p>
			</div>



		</div>

	</div>

	<div class="footer-copyright">

		<div class="container">

			© 2019 Instituto Técnico Profissionalizante


		</div>

	</div>

</footer>

  • Hugo, so container.corpo no longer uses css? Just cont?

  • @Rodrigopires who container.corpo I didn’t see it in your HTML, I didn’t touch this class because there was no element with this class in HTML, so in my answer I created an element with the class . cont ee was like you can see in the image or in the code.... That’s what I understood you needed, with the sidebar and the . cont are the son of a felx container I called . wrapper they are already set next to each other, do not need the .container.body class or those margins that you used

Browser other questions tagged css html5 laravel-blade

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