Есть ли способ разместить мою html-страницу в контейнере с жидкостью (начальный загрузчик 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>
Я не очень хорош, но я только начал изучать веб-разработчик, поэтому я мог делать ужасные вещи ^^ «Я пытаюсь заставить мое меню слева появляться, когда я нажимаю кнопку сэндвича в верхнем правом углу, но я не знаю, как сделать так, чтобы он "переворачивал" контейнер-флюид, являющийся главной страницей, потому что мое отзывчивое меню не является его частью и не является компонентом начальной загрузки, спасибо за ваше время:)