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 frdca10
      Estou personalizando a página "minha conta" do woocomerce com o elementor.
      Nesta pagina coloquei alguns icones que funcionam como botões que direcionam o usuário para as paginas especificas (editar enrereço, editar conta, logout, dashboard).
       
      ja está funcionando e ao clicar em cada icone, a pagina é direcionada e o endereço do navegador muda e fica assim dependendo da situação:
       
      https://meusite/minha-conta/edit-account/
      https://meusite/minha-conta/orders/
      https://meusite/minha-conta/edit-address/
       
      Como eu posso fazer para que cada icone assuma uma cor especifica dependendo do endereço que foi acessado?
       
      Hoje todos os icones ficam da mesma cor. Gostaria de uma indicação visual de qual pagina esta sendo acessada
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    • By Vanessa Andrade
      Bom dia Pessoal!
       Gostaria da ajuda de vocês, não tenho conhecimento aprofundado em html e css e a tray não quer me dar suporte para alteração desta fonte dizendo que é padrão.....
      Enfim a fonte está minuscula mal dá para entender o que está escrito, e não acho onde altero...
      https://www.lacee.com.br/loja/extra.php?loja=495949&amp;pagina=afiliados
       

    • By LuizH.M
      Estou tentando alterar um css via javascript mas por algum motivo da erro
      se puder ajudar agradeço
       
      html
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <!--Titulo-->
          <title>Projeto</title>
          <!--Cadeia de caracteres-->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-compatible" content="ei=edge">
          <link rel="stylesheet" type="text/css" href="css/estilo.css">
          
      </head>
      <body>
          <header></header>
          <input type="checkbox" id="chk" onclick="chk()">
          <label for="chk" class="menu-chk">&#9776;</label>
          <div class="bg"></div>
          <nav class="menu" id="principal">
              <ul>
                  <li><a href="#" class="home">Home</a></li>
                  <li><a href="#">Contato</a></li>
                  <li><a href="#">Forum</a></li>
                  <li><a href="#">Sobre</a></li>
              </ul>
              
          </nav>
          <footer>
                <script type="text/javascript" src="js/javascript.js"></script>
          </footer>
      </body>
      </html>
       
      css
      *{
          padding: 0;
          margin: 0;
      }
      header{
          position: fixed;
          top: 0;
          left: 0;
          height: 50px;
          width: 100%;
          background-color: #5b859a;
      }
      .menu-chk{
          position: fixed;
          font-size: 25px;
          font-weight: bold;
          padding: 5px;
          width: 40px;
          height: 40px;
          text-align: center;
          background-color: #5b859a;
          color: #fff;
          cursor: pointer;
          transition: all.4s;
          left: 301px;
          top: 0;
      }
      .menu-chk:hover{
          background-color: #fff;
          color: #5b859a;
      }
      .menu{
          height: 100%;
          position: fixed;
          background-color: #222;
          top: 0;
          overflow: hidden;
          transition: all .4s;
      }
      #principal{
          width: 300px;
          left: -300px;
      }
      ul{
          list-style: none;
      }
      ul li a{
          display: block;
          font-size: 18px;
          font-family: 'Arial';
          padding: 10px;
          border-bottom: solid 1px #000;
          color: #ccc;
          text-decoration: none;
          transition: all.4s;
      }
      ul li span{
          float: right;
          padding-right: 10px;
      }
      ul li a:hover{
          background-color: #5b859a;
      }
      .home{
          margin-top: 60px;
          background-color: #111;
          border-left: solid 5px #444;
      }
       
      js
       
      function chk() {
          var chk = document.getElementById('chk');
          var menu = document.getElementById('principal');
          
          chk.is(':checked'){
              menu.style.left = "300px";
          }
      }
    • By jvb
      Olá povo do código, eu confesso que estou sem saber o pq de algumas propriedades do Bootstrap 4.2.1 como por exemplo:
      .img-fluid { max-width:100%; height: auto } não funcionar em outra folha de style, que não seja Bootstrap, a propriedade não esta dentro de @media, essa propriedade eu imaginava ser de uso geral.
      Vejamos que a Página continua linkando para o bootstrap, apenas algumas propriedades não terem efeito em outra folha de styles. 
×

Important Information

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