Question

有没有一种方法可以将我的html页面放在一个流体容器中（引导程序4），并能够使用js来使菜单通过Java中的切换按钮显示和消失？（我已经可以使用菜单了，但是无法使其显示在容器上）

var button = document.querySelector('.toggle_button'); // bouton sandwich
var nav = document.querySelector('.nav'); // menu deroulant gauche

var a = document.querySelector('.menu a');

//Derouler le menu
button.onclick = function() {
  nav.classList.toggle('nav_open');
}

html,
body {
  padding: 0;
  margin: 0;
}

.toggle_button {
  height: 3px;
  width: 30px;
  position: relative;
  float: right;
  margin-right: 10px;
  margin-top: 5px;
  cursor: pointer;
}

.toggle_button span {
  height: 3px;
  background-color: #2980b9;
  width: 100%;
  position: absolute;
  top: 20px;
  left: 0;
}

.toggle_button span:before {
  content: '';
  height: 3px;
  background-color: #2980b9;
  width: 100%;
  position: absolute;
  top: -10px;
  left: 0;
}

.toggle_button span:after {
  content: '';
  height: 3px;
  background-color: #2980b9;
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0;
}

.menu {
  height: 1000px;
  width: 200px;
  background-color: #2980b9;
}

.menu a {
  color: #ecf0f1;
  font-family: sans-serif;
  text-align: center;
  display: block;
  padding-top: 30px;
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

.logo {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 24px;
}

.nav {
  margin-left: -200px;
  transition-duration: 0.2s;
}

.nav_open {
  margin-left: 0;
  transition-duration: 0.2s;
}

.back {
  background-color: #ecf0f1;
}

.bandeau {
  background-color: #e67e22;
  height: 50px;
  display: sticky;
}

.bandeau a {
  color: #ecf0f1;
  font-family: sans-serif;
  text-align: center;
  display: block;
  font-size: 30px;
  padding-top: 0px;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<!-- Header contenant le titre de la page home.html et le type d'encodage ecrit -->

<head>
  <title> SARL Garage BRINCAT </title>
  <meta charset="utf-8" \>

  <link rel="stylesheet" href="../bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <!-- Container global -->
  <div class="container-fluid back">

    <!-- Boutton sandwich -->
    <div class="toggle_button">
      <span></span>
    </div>

    <div class="container">
      <div class="row">

        <!-- Logo FIAT -->
        <article class="col-md-3 bandeau">
          <img src="res/FIAT.jpg">
        </article>

        <!-- Titre -->
        <article class="col-md-9 bandeau">
          <a href="#"> SARL Garage BRINCAT </a>
        </article>

      </div>

    </div>


  </div>

  <!-- Menu deroulant -->
  <div class="menu nav">
    <a href="#" class="logo"> Mon logo</a>
    <a href="#"> Neuf </a>
    <a href="#"> Occasions </a>
    <a href="#"> Contact </a>
  </div>
  <script type="text/javascript" src="js/app.js"></script>
  <!-- Page principale (hors menu) -->
</body>

</html>

我不是很好，但是我刚开始学习网络开发人员，所以我可能做的很丑。^^'当我按右上角的“三明治”按钮时，我试图使左边的菜单出现，但是我不知道如何使它“ ovverride”成为主页的容器流体，因为我的响应菜单既不是它的一部分，也不是引导程序的组件，谢谢您的时间：）

Answer 1

只需使用菜单上的position: absolute，将其设置为高z-index。

.menu {
  height: 1000px;
  width: 200px;
  background-color: #2980b9;
  position: absolute;
  z-index: 1000;
}

您可能需要调整顶部偏移量。

用js覆盖引导容器

1 个答案: