Jump to content

POWERED BY:

Sapinn

Fixar menu lateral e barra css grid

By Sapinn, in HTML e CSS

Recommended Posts

Sapinn    0

Sapinn
Posted

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

Omar~    87

Omar~
Posted

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

Sapinn    0

Sapinn
Posted

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

wanderval    19

wanderval
Posted

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
Go To Topic Listing HTML e CSS

  • Similar Content

    • juliosonic
      Menu Navbar CSS Bootstrap
      By juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.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 em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Felipe Medeiros
      Como alterar o tema filho se o css usado no tema pai nao está dentro da pasta do tema pai?
      By Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Alessandro Bodão
      H1 que preencha toda a largura da container
      By Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • FabianoSouza
      Aplicar border radius em mouseover numa TR
      By FabianoSouza
      Gente, tenho as TRs da minha tabele já com os cantos arredondados (através das TDs first-child e last-child). Fiz dessa forma porque desconheço uma maneira de aplicar radius diretamente na TR.
       
      O problema é que ao colorir a TR com o over do CSS, perde-se a formatação do border radius das TDs e exibe a TR com os cantos quadrados.
       
      Preciso que os cantos fiquem arredondados mesmo ao passar o mouse sobre a TR.
       
      Como resolvo isso?
    • viniciusfroner
      "echo" Mensagem ERROR
      By viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
×

Important Information

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

  I accept