Создание строки меню полной высоты и ширины при нажатии на кнопку

Я хочу, чтобы когда я нажимаю кнопку меню в правом верхнем углу, что-то скользит слева направо на весь экран (полная высота и ширина), а все остальное исчезает. Проблема здесь в том, что если вы прокручиваете вниз, а затем нажимаете кнопку меню, она не отображается, а отображается только вверху. Плюс есть кое-что, что я не совсем понимаю, высота и ширина. Если я хочу, чтобы что-то покрывало всю страницу или только видимую нам высоту и ширину, как мы можем сделать что-то подобное? Для этого я поставил 100% высоты и ширины, чтобы это была видимая часть страницы, что, если мы хотим, чтобы вся страница была чем-то покрыта? Как работают высота и ширина?

$("#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>


javascript html jquery css width
person Ramy Alayane    schedule 28.09.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать это, изменив абсолютную позицию с боковой панели на фиксированную, позиция будет относительно области просмотра и будет зафиксирована вверху.

$("#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: fixed;
top: 0;
  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>

person Renzo Calla    schedule 28.09.2017
comment
ДА ! Большое спасибо, а можете ли вы объяснить часть о ширине и высоте? если я хочу, чтобы что-то было на 100% от высоты полной страницы, и если я хочу, чтобы это было на 100% от высоты видимой части страницы, как нам это сделать, как ширина и высота работают в css - person Ramy Alayane; 28.09.2017

arrow_upward
0
arrow_downward

Боковая панель имеет абсолютную позицию, которая по-прежнему относится к документу.

Итак, вы хотите вывести #side-bar за пределы потока документов, поместив его fixed.
Тогда он будет "над" окном просмотра.

Затем я использую верхний, левый, нижний и ширину, чтобы анимировать его.

$("#side-button").click(function(){
  if ($("#side-bar").css("display") == "block"){
    $("body").css("overflow","auto");
    $("#side-bar").animate({left: "-100%"},400,function(){
        $("#side-bar").css("display","none");
    });
  }
  else{
    $("#side-bar").css("display","block").animate({left: "0%"},400,function(){
      $("body").css("overflow","hidden");
    });
  }
});
html{
  height:100%;
  width:100%;
}
body{
  position: relative;
  height:100%;
  width:100%;
}

#side-bar{
  position: fixed;
  top:0;
  bottom: 0;
  left:-100%;
  width: 100%;
  background: black;
  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>

person LinkinTED    schedule 28.09.2017