个人中心
gpt4 book ai didi

javascript - 用js覆盖bootstrap容器

转载 作者：行者123 更新时间：2023-11-28 00:07:44 25 4
gpt4 key购买 nike

有没有一种方法可以将我的 html 页面放在一个流动的容器中 (bootstrap 4)，并能够使用 js 使菜单在 Javascript 中通过切换按钮出现和消失？ (我的菜单已经可以使用了，但是我不能让它出现在容器上)

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”，因为我的响应式菜单不是它的一部分，也不是 Bootstrap 组件，谢谢你的时间:)

最佳答案

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

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

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

关于javascript - 用js覆盖bootstrap容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55601845/

25 4 0
文章推荐： Javascript使用元素向下移动滚动条不起作用
文章推荐： c++ - 配置文件的实现
文章推荐： c++ - 从全局内核调用宿主函数
文章推荐： javascript - 从prototype.object获取类上下文
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com