1

Eu estou tentando fazer o seguinte, um menu fixo na lateral esquerda com 100% de altura, o problema é que quando aperto f12 para simular um ipad por exemplo, o conteúdo entra embaixo da barra lateral, como posso arrumar isso?

Menu:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <style type="text/css">
    .barra {
      background-color: #0C152A;
      height: 100%;
      text-decoration: none;
      position: fixed;
      margin-top: -18px;
      color:#fff;
      width: 275px;
    }

#cor {
  color:#fff;
  text-decoration: none;
} 




  </style>

</head>
<body>

<div class="barra" style="padding-top: 100px">
  <div class="container">
  <ul class="nav flex-column">
  <li class="nav-item" >
    <a id="cor" class="nav-link" href="#">Cadastro de Clientes</a>
  </li>
  <li class="nav-item" style="margin-top:-15px" >
    <a id="cor" class="nav-link" href="#">Listar Clientes</a>
  </li>
  <li class="nav-item" style="margin-top:-15px">
    <a id="cor" class="nav-link" href="#">Editar Clientes</a>
  </li>

</ul>
</div>
</div>
</body>
</html>

e o conteúdo lateral:

    <?php include'menu.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="container mt-3">
  <h2>Toggleable Tabs</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>
</div>

</body>
</html>

eu gostaria que o conteúdo se moldaria conforme o espaço do ipad, e o menu continuasse fixo ao lado esquerdo, acho que me fiz entender, estou usando bootstrap

1 Resposta 1

1

Segue um exemplo de como deve ser a estrutura do seu website, após entender como funciona, basta recortar a parte do menu e incluir no arquivo php referente ao menu e no arquivo principal onde fica o layout montado você precisa fazer o include dele no exato local onde ele está hoje.

Assim o layout não ira quebrar e você conseguira o resultado esperado.

.barra {
      background-color: #0C152A;
      height: 100%;
      text-decoration: none;
      position: fixed;
      margin-top: -18px;
      color:#fff;
    }

#cor {
  color:#fff;
  text-decoration: none;
}


.container-fluid{
  padding:0 !important;
}

.container{
  padding:0 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container">
    <div class="row py-3">
        <div class="col-lg-3 col-sm-3 mr-auto" id="sticky-sidebar">
            <div class="sticky-top">
                <div class="barra" style="padding-top: 100px">
                  <ul class="nav flex-column">
                    <li class="nav-item" >
                      <a id="cor" class="nav-link" href="#">Cadastro de Clientes</a>
                    </li>
                    <li class="nav-item" style="margin-top:-15px" >
                      <a id="cor" class="nav-link" href="#">Listar Clientes</a>
                    </li>
                    <li class="nav-item" style="margin-top:-15px">
                      <a id="cor" class="nav-link" href="#">Editar Clientes</a>
                    </li>
                  </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-sm-8 ml-auto" id="main">
           <div class="conteudo">
              <h2>Toggleable Tabs</h2>
              <br>
              <!-- Nav tabs -->
              <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
                </li>
              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                <div id="home" class="container tab-pane active"><br>
                  <h3>HOME</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div id="menu1" class="container tab-pane fade"><br>
                  <h3>Menu 1</h3>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div id="menu2" class="container tab-pane fade"><br>
                  <h3>Menu 2</h3>
                  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                </div>
            </div>
        </div>
    </div>
</div>
  
  </div>
</div>

</body>
</html>

4
  • 1
    A resposta do Lodi é fantástica, pode ir nela que é boa. Commented 2/03/2019 às 15:58
  • 1
    Lodi, só uma dúvida, e quando a pessoa clicar em algum link do menu, como faço para abrir do lado? pq se eu incluir o menu, vai vir tudo..não? Commented 2/03/2019 às 17:05
  • ai já é php, a div conteúdo deve conter um sistema de rotas. Exemplo: você acessaria a url http://meusite.com/index.php?page=home e dentro da div conteúdo ficaria <?php switch($_GET['page']){case 'home': include 'caminho/da/minhapaginahome.php'} ?> no arquivo minhapaginahome.php você coloca o verdadeiro conteúdo da home apenas sem header body ou a tag html. Deu para captar a ideia? para novas rotas, basta adicionar um outro case.
    – Lodi
    Commented 2/03/2019 às 17:45
  • Genial! Consegui :) Commented 5/03/2019 às 16:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .