Publicado em 22 de abr.

Fixar menu lateral e barra css grid

#css #desenvolvimento-frontend #grid #menu

Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 23 de abr.

Se for para acompanhar a rolagem tem que usar fixed.

O fato de está quebrando o html é quase certeza absoluta que é por causa de erros na estrutura html.

Uma vez que a propriedade fixed não altera o fluxo de outras tag's no documento.

Obs.: Nesses casos para melhor ajudar seria bom apresentar algum website que usa algo igual ou similar ao pretendido, até mesmo imagens podem ajudar. Sendo o código em si menos relevante.

6 horas atrás, Sapinn disse:

menu lateral na esquerda

6 horas atrás, Sapinn disse:

barra que está em cima

7 horas atrás, Sapinn disse:

unica coisa que mexesse fosse o conteúdo da direita

Na verdade o outros elementos que vão se "mover"

Dê uma olhada nisso, pelo que você mencionou foi o que imaginei que está tentando fazer:

Spoiler

<style>
 #barra_de_cima,
 #menu_lateral {
 z-index: 1;
 position: fixed;
 left: 0
 }
 #barra_de_cima {
 top: 0;
 height: 50px;
 width: 100vw;
 background-color: red
 }
 #menu_lateral {
 top: 50px; /* altura de #barra_de_cima */
 height: calc(100vh - 50px); /* altura da tela menos a altura de #barra_de_cima */
 width: 250px;
 background-color: green
 }
 #conteudo_direita {
 margin-top: 50px; /* altura de #barra_de_cima */
 padding-left: 250px; /* largura de #menu_lateral */
 background-color: blue
 }
</style>
<div id="barra_de_cima">Algo aqui dentro</div>
<div id="menu_lateral">Algo aqui dentro</div>
<div id="conteudo_direita">
 <div style="height: 5000px">Para criar uma rolagem</div>
</div>

Sapinn· 23 de abr.

Acho que me expressei mal sobre a quebra da página, não é como se todo o site ficasse torno com os componentes em lugares errados o real problema é que os componentes acabam ficando um por cima do outro devido ao fixed. Existe exemplos disso em dashboard (área do admin) nos templetes em que existe uma barra o menu lateral, geralmente à esquerda, e todo o conteúdo a direita, quando há uma rolagem apenas esse conteúdo localizado nessa parte se move. O exemplo de código que você mostrou funciona perfeitamente mas eu gostaria de fazer isso com o css grid.

wanderval· 25 de abr.

HTML:

<body>
 <main>
 <nav></nav>
 <section>
 hi
 </section>
 <article>
 <p>conteudo</p>
 </article>
 </main>
</body>

	CSS:

body {

 margin: 0;
}

main {

 display: grid;
 grid-template-columns: 20% 55% 25%;
 grid-template-rows: 55px 1fr;
 background: grey;
}

nav {

 background: blue;
 grid-row: 1;
 grid-column: 1 / 4;
 position: sticky;
 top: 0;
}

section {

 background: grey;
 grid-column: 1 / 2;
 grid-row: 2;
 position: sticky;
 top: 60px;
 left: 0;
 align-self: start;

}

article {

 background: yellow;
 grid-column: 2 / 4;
}

article p {

 padding-bottom: 1500px;
}

	JSBin: [https://jsbin.com/tifonawuxu/1/edit?html,css,output](https://jsbin.com/tifonawuxu/1/edit?html,css,output)

Sapinn· 26 de abr.

Funcionou perfeitamente, muito obrigado.