javascript - 按下按钮时制作全高和全宽的菜单栏-6ren

javascript - 按下按钮时制作全高和全宽的菜单栏

转载作者：行者123 更新时间：2023-11-28 02:55:43

25

4

我想当我按下右上角的菜单按钮时，一些东西从左滑到右全屏(全高和全宽)，其他一切都消失了。这里的问题是，如果您向下滚动然后单击菜单按钮，它不会显示它只显示在顶部。另外还有一些我不太明白的东西，高度和宽度。如果我想要覆盖整个页面或只覆盖我们可见的高度和宽度，我们该怎么做？为此，我将 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>

最佳答案

你可以将侧边栏的绝对位置更改为固定位置，该位置将相对于视口(viewport)并固定在顶部

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

关于javascript - 按下按钮时制作全高和全宽的菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46469344/

25

4

0

文章推荐： javascript - 设置/清除间隔问题

文章推荐： html - 下拉组合框不对齐

文章推荐： html - 水平 div img 对齐

css - 窗口底部的位置标题+全宽
我有一个标题 1(#banner h1.index_banner_text)，它需要始终位于距页面底部 20 像素和距页面左侧 570 像素的位置。如果调整窗口大小，我希望标题自然堆叠，但始终与页面底
javascript - 倾斜底部边框 - 全宽
这个问题已经有答案了: CSS responsive slanted edge (1 个回答) 已关闭 7 年前。我想知道如何创建一个宽度为 100% 的 div，宽度为 300 像素，其中底部边框
jquery - 全宽 Accordion
我做了一个非常简单的水平全宽 Accordion ，但我遇到了一个错误 - 它的最后一部分在折叠过程中下降了。这是我的代码:https://jsfiddle.net/trzxs3u1/ 它可能来自同
html - 显示时图像未占据全高/全宽
我有两张相同的图片。我几乎一直显示其中一张图像，唯一的异常(exception)是在 1001px - 1400px 的视口(viewport)中，我显示图像的裁剪版本。由于某种原因，company-
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
html - Vimeo 全宽
这个问题在这里已经有了答案: How did YouTube create a fluid video player? (1 个回答) 关闭 5 天前。我正在尝试在网页中全宽显示一个 vimeo
jquery - Fancybox 全宽
我是编码新手，我试图只在我的 homepage 中使用每个 fancybox全宽和响应式 ( eg )，但这些选项都没有完成这项工作(fitToView、autoSize 或 aspectRatio)
markdown - 全宽 Markdown 表格
到目前为止，我已经在 Markdown 表格中获得了尽可能多的格式和居中文本，但是在控制相对于外部容器的表格尺寸方面我没有发现任何东西(至少除了当它太大时它会自动缩小的事实)换行文本。) 是否可以在
javascript - 全宽 Swiper 在幻灯片左侧有一个间隙
带有大屏幕的 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片左侧留下空白，我创建了一支笔来演示这一点: https://codepen.io/anon/pen/BwMx
c# - 如何使用 WebView 全宽
在我的 Windows 应用商店应用程序中，我只有一个 XAML 中的 WebView: 我想在不同的屏幕尺寸或方向上将宽度设置为最大可用值。我试图获取砂砾本身的宽度来设置 WebVi
android - 水平 ScrollView 全宽
好吧，我开发了一个 HorizontalScrollView，里面有一些按钮。我可以通过 getWidth() 获取此 HorizontalScrollView 的宽度。但这会返回显示的 H
javascript - jcrop 全宽/高度比例裁剪
我们实现了 Jcrop在我们的系统中，到目前为止它运行良好。但是我们最近发现了一个小问题: 场景我们的网站允许用户上传他们公司的标志。我们的宽高比要求是 200/150，不幸的是，用户的公司 Log
ios - 全宽 View 不包含与父级相同的框架宽度
我遇到一个问题，我的 UIImageView 使用以下约束跨越整个屏幕宽度。将前导对齐到:Superview(等于:-20) 将尾部对齐到:Superview(等于:-20) Top Space t
css - 全宽 div 内的响应式图像
我有这个标记: 和这个 css(我正在使用 Twitter Bootstrap): img { height: auto; max-width
javascript - 全宽、响应式、网格布局
谁能给我解释一下这个页面是如何运作的？ http://wexley-demo.squarespace.com/ 我看到有javascript，但不明白。这也是实现这种效果最简单的方法吗？ – 缩放、
javascript - 调整大小时 slider 全宽
我正在研究这个 slider : http://codepen.io/anon/pen/viBHe 当您打开页面时， slider 获得屏幕的 100% 宽度，这很好用，也是我想要实现的，但问题是当您
html - 全宽 SVG 剪辑
我目前正在为单页网站制作剪切路径: http://grafomantestsite3.be/ 如您所见，这适用于 chrome，但不适用于 firefox、opera 等。我做了一个代码笔来说明我的
html - 全宽 anchor 标签问题
代码如下: Overall Advance Rating(1 foodees rated) 这里也是在对图像进行评级后获得光标。我如何处理光标直到只有图像。我曾尝试使
jquery - 全宽 Bootstrap 下拉菜单
我正在尝试制作一个与此页面中的菜单类似的 Bootstrap 菜单。https://makr.com/ 这就是我想出的，但我现在几乎卡住了。如何使下拉文本显示在每个下拉按钮下方，就像在 https:
html - 全宽 Vimeo 嵌入无响应
我在 div 中嵌入了一个 vimeo，它是视口(viewport)的全宽。该视频在几天内运行良好，但现在播放按钮(和所有其他按钮)完全没有响应。我试过弄乱 z-index 但那不起作用。

首页

博学

6Ren·AI

商城

javascript - 按下按钮时制作全高和全宽的菜单栏