个人中心
gpt4 book ai didi

html - 使媒体浏览器的下拉CSS菜单全高

转载 作者：太空宇宙 更新时间：2023-11-04 07:10:24 25 4
gpt4 key购买 nike

我创建了一个完整的响应式 CSS 菜单，该菜单在较小的浏览器尺寸下变为下拉菜单。

在较小的屏幕尺寸下，下拉菜单的行为符合预期，但我想做的是强制下拉元素占据窗口的整个高度和宽度，而不改变页面的大小(我已经达到全宽但不是全高)。换句话说，我希望菜单占据窗口的整个高度并位于除按钮之外的所有内容之上(因此它可以再次折叠显然)。

我试过改变一些属性，但目前我不确定这种方式是否可行。有没有人想过如何做到这一点？

JSFIDDLE HERE

CSS

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}

/* pagenav */

.pagenav {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 3;
}

.pagenav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.pagenav li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.pagenav li a:hover,
.pagenav .nav-right-btn:hover {
  background-color: #f4f4f4;
}

/* nav-right */

.pagenav .nav-right {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* nav-right icon */

.pagenav .nav-right-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.pagenav .nav-right-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.pagenav .nav-right-icon .navicon:before,
.pagenav .nav-right-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.pagenav .nav-right-icon .navicon:before {
  top: 5px;
}

.pagenav .nav-right-icon .navicon:after {
  top: -5px;
}

/* nav-right btn */

.pagenav .nav-right-btn {
  display: none;
}

.pagenav .nav-right-btn:checked ~ .nav-right {
  max-height: 240px;
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon {
  background: transparent;
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon:before {
  transform: rotate(-45deg);
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon:after {
  transform: rotate(45deg);
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon:not(.steps) .navicon:before,
.pagenav .nav-right-btn:checked ~ .nav-right-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .pagenav li {
    float: left;
  }
  .pagenav li a {
    padding: 20px 30px;
  }
  .pagenav .nav-right {
    clear: none;
    float: right;
    max-height: none;
  }
  .pagenav .nav-right-icon {
    display: none;
  }
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

      <link href="cover4.css" rel="stylesheet">


    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">


  </head>
  <body>

<header class="pagenav">

  <input class="nav-right-btn" type="checkbox" id="nav-right-btn" />
  <label class="nav-right-icon" for="nav-right-btn"><span class="navicon"></span></label>
  <ul class="nav-right">
    <li><a href="#reel">Link1</a></li>
    <li><a href="#bio">Link2</a></li>
    <li><a href="#contact">Link3</a></li>
  </ul>
</header>


  </body>
</html>

最佳答案

TL;DR - 在点击时将菜单设置为 height: calc(100vh - $nav-height) 的动画。

我相信您正在寻找的是vh 和vw 单位、视口(viewport)宽度和视口(viewport)高度。它们的工作方式类似于百分比，但不是相对于父容器(如设置 width: 100%)，而是相对于视口(viewport)。因此，例如，width: 100vw 表示 viewport 宽度的 100%，不是其父容器。

这些单元在当前所有浏览器中都有很好的支持:https://caniuse.com/#feat=viewport-units

如果您希望下拉元素也占据页面的整个高度，您可以使用 Flexbox 来实现。将列表元素包装在 display:flex 容器中并使用 justify-content 和 align-items 属性(可能使用 space-around 属性)让元素自动散开。这是关于 Flexbox 细节的精彩指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑:感谢Mark E用于提供工作 fiddle 。这里包括一个修改版本，它使用 display:flex 属性在页面的整个高度上展开元素:https://jsfiddle.net/od5g8v4a/14/ .它似乎并没有破坏菜单的桌面版本。我添加了注释以显示已修改的内容。

请注意，从技术上讲，高度不应精确设置为 100vh - 它应该是 100vh - $navbar-height。你可能想要 use the calc()实现这一目标的功能。

关于html - 使媒体浏览器的下拉CSS菜单全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51236435/

25 4 0
文章推荐： html - 如何用水平线画满
文章推荐： c - 如果给定多边形的顶点，如何计算多边形的质心？
文章推荐： c - 文本文件上的Strtok导致段错误
文章推荐： html - 没有在
  • 标签内设置样式，当我检查元素的 CSS 值时显示无效的属性值