Fixed side menu on the left with Contents on the right

Asked

Viewed 3,205 times

1

I’m trying to do the following, a fixed menu on the left side with 100% height, the problem is that when I press F12 to simulate an ipad for example, the content goes under the side bar, how can I fix it?

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>

and the side content:

    <?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>

i would like the content to be shaped according to the space of the ipad, and the menu remained fixed on the left side, I think I made myself understood, I’m wearing bootstrap

html css bootstrap-4

1 answer

1


Here is an example of how the structure of your website should be, after understanding how it works, just cut the part of the menu and include in the php file referring to the menu and the main file where the layout is mounted you need to include it in the exact place where it is today.

So the layout will not break and you will achieve the expected result.

.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>

  • 1

    Lodi’s answer is fantastic.

  • 1

    Lodi, just one question, and when the person clicks on some link from the menu, how do I open the side? pq if I include the menu, it will all come.. No no?

  • ai is already php, div content must contain a route system. Example: you would access the url http://meusite.com/index.php?page=home and within the content div would be <?php switch($_GET['page']){case 'home': include 'caminho/da/minhapaginahome.php'} ?> in the file mydeletinahome.php you place the real content of the home only without header body or html tag. Can you capture the idea? for new routes, just add another case.

  • Great! I got it :)

Browser other questions tagged html css bootstrap-4

You are not signed in. Login or sign up in order to post.