Jump to content
Sapinn

Fixar menu lateral e barra css grid

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Jack Oliveira
      Ola pessoal tava procurando um modo de eu montar algo dessa forma com css e html
      que seja usado cores rgb ou um bg de fundo, poderia ser ambos tbm.
      porem que ambos ficassem tando pra direita, esquerda e centro, neste caso ficara a escolha da pessoa da forma que quer que fique
      montei o exemplo no editor de imagem apenas para ver como que preciso, porem que fiquem alinhando srrs. Sobre o tamanho e a largura que pudesse ajustar conforme for a necessidade tbm sem que 
      fique sem qualidade..
       

       
      Desde já fico grato
    • By juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica Curitiba
      Tantra em Curitiba

      Obrigado
      Att
      Julio Cezar
       
       
       
    • By Marcones Borges
      Olá, estou com o seguinte problema, não estou conseguindo alinhar a div a baixo da outra.
       
      Tenho a div linha, div assinatura, div conteúdo.
      A div linha precisa ficar a pós o conteúdo, após o texto linha e assinatura...
       
      porém não fica.
      Veja o css
      #texto1 {     position:absolute;     left: 30px;     top: 310px;     font-size:16px;     letter-spacing: .1rem;     font-family:courier,arial,helvetica;     line-height: 1.5;     text-align: justify;     padding-left: 2%;     padding-right: 5%;     padding-bottom: 2em;     float:right;     height:902px;     z-index: 1;   #linha1{     position:fixed;     left: 70px;     bottom: 80px; } #assinatura {     border-radius: 10%;     left: 435px;     overflow: hidden;     position:absolute; }  
      O html
      <div id="texto1"><?=nl2br($cliente->conteudo)?></div> <div id="linha1"> ___________________________________ </div> <div id="assinatura"> &nbsp;&nbsp;<?=$cliente->secretario?> - <?=$cliente->convencao?><br> &nbsp;&nbsp;&nbsp;<b>SECRETÁRIO(A)</b><br> </div>
    • By Marcones Borges
      Olá, estou com uma dúvida, como faço para transformar um arquivo gerado com dados do sistema em jpg?
       
      Tenho uma pagina que pega informações do cliente para gerar um cartão, nome, foto e uma imagem de background.
      Até ai tudo bem, esta gerando a imagem que preciso, agora preciso criar um botão para exportar ela em jpg ou compartilhar nas redes a imagem gerada...
       
      Assim eu abro ela em outra página.
      <code]>
      <a href='cartao_aniversariante.php?id=<?=$cliente->id?>' target="_blank"><img src="imagens/niver.png" width="20" height="20" title="Cartão Aniversário"></a>
      </code>

      Tentei anexar a imagem aqui mais não permite pelo tamanho.
       
      Preciso exportar esta nova página aberta.... 
    • By Marcones Borges
      Olá, estou fazendo um banner virtual, ele vem com fundo default e uma imagem sobrepondo ele (foto de uma pessoa), queria remover o fundo da imagem, deixando apenas a imagem da pessoa, como faço isso?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.