Je veux quand j'appuie sur un bouton de menu en haut à droite, quelque chose glisse de la gauche vers la droite plein écran (pleine hauteur et largeur) et tout le reste disparaît. Le problème ici est que si vous faites défiler vers le bas puis cliquez sur le bouton de menu, il ne montre pas seulement les expositions sur le dessus. Plus il y a quelque chose que je ne comprends pas tout à fait, la hauteur et la largeur. Si je veux quelque chose pour couvrir toute la page ou seulement la hauteur et la largeur qui nous est visible, comment pouvons-nous faire quelque chose comme ça? Pour cela je mets 100% de hauteur et de largeur donc c'est la partie visible de la page, et si on veut que toute la page soit couverte par quelque chose? Comment fonctionne la hauteur et la largeur?Faire une barre de menu pleine hauteur et largeur en appuyant sur le bouton
$("#side-button").click(function(){
if ($("#side-bar").css("display") == "block"){
$("body").css("overflow","auto");
$("#side-bar").animate({width: "0%"},400,function(){
$("#side-bar").css("display","none");
});
}
else{
$("#side-bar").css("display","block").animate({width: "100%"},400,function(){
$("body").css("overflow","hidden");
});
}
});html{
height:100%;
width:100%;
}
body{
position: relative;
height:100%;
width:100%;
}
#side-bar{
position: absolute;
width:0%;
background: black;
height: 100%;
z-index: 100;
display:none;
}
#side-button{
display:flex;
position:fixed;
right:10px;
top:10px;
z-index: 100;
width:30px;
height:30px;
justify-content: space-around;
flex-direction: column;
}
#side-button div{
width:100%;
height:4px;
background-color: gray;
display:block;
}
#side-button:hover #first{
transform: rotate(1turn);
transition: 1s transform;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div id="side-bar">
<div class="page-header text-center header1">
<h1>THIS IS A HEADER</h1>
</div>
</div>
<div id="side-button" >
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<div class="container" style="padding-bottom:20px;">
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
</div>
<script src="bootstrap.js"></script>
</body>
</html>
OUI! merci beaucoup, et pouvez-vous expliquer la partie sur la largeur et la hauteur? si je veux que quelque chose soit à 100% de la hauteur de la page entière et si je veux qu'elle soit 100% de la hauteur de la partie visible de la page, comment faisons-nous cela comment la largeur et la hauteur fonctionnent en CSS –