按下按钮时制作完整的高度和宽度菜单栏

Question

I want to when I press a menu button on the top right, something slides from the left to the right full screen (full height and width) and everything else vanishes. 我想当我按下右上角的菜单按钮时，某些东西从左到右全屏滑动（全高和全宽），其他所有内容都消失了。 The problem here is that if you scroll down then click the menu button it doesn't show it only shows on the top. 这里的问题是，如果您向下滚动然后单击菜单按钮，它不会显示，而只会显示在顶部。 Plus there's something I don't quite understand, the height and the width. 另外还有一些我不太了解的东西，高度和宽度。 If i want something to cover the whole page or only the height and width that is visible to us how do we do something like that ? 如果我想覆盖整个页面，或者只覆盖我们可见的高度和宽度，我们该怎么做？ For this I put 100% height and width so it's the visible part of the page, what if we want the whole page to be covered in something ? 为此，我将高度和宽度设置为100％，因此它是页面的可见部分，如果我们希望整个页面都被某些东西覆盖？ How does the height and width work? 高度和宽度如何工作？

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

Answer 1

The side bar has a absolute position, which still refers to the document. 侧栏有一个绝对位置，仍然指向文档。

So you want to take #side-bar outside of the document flow by placing it fixed . 因此，您想通过将其放置为fixed来将#side-bar置于文档流之外。
It will then be "above" the viewport. 然后它将在视口“上方”。

I than use top, left, bottom and width to animate it. 然后我使用顶部，左侧，底部和宽度为其设置动画。

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

Answer 2

You could do it changing the position absolute from the side bar to fixed, the position will be relative to the viewport and will be fixed at the top 您可以将侧栏的绝对位置更改为固定位置，该位置将相对于视口并固定在顶部

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

按下按钮时制作完整的高度和宽度菜单栏

问题描述

2 个解决方案

解决方案1
0 2017-09-28 12:41:21

解决方案2
0 已采纳 2017-09-28 12:43:13

按下按钮时制作完整的高度和宽度菜单栏

问题描述

2 个解决方案

解决方案1 0 2017-09-28 12:41:21

解决方案2 0 已采纳 2017-09-28 12:43:13

解决方案1
0 2017-09-28 12:41:21

解决方案2
0 已采纳 2017-09-28 12:43:13