html - CSS flex 属性不允许隐藏和堆叠链接。这是否也不允许我的汉堡菜单正常运行？

转载作者：太空宇宙更新时间：2023-11-04 06:00:56

26

4

在我的导航栏中，是我的链接。我正在尝试设置一个媒体查询，在单击我的带有 primely CSS flex-box 的汉堡菜单后，链接堆叠并居中。我需要对我的代码进行哪些更改才能实现此目的？

我首先使用 float 、绝对和相对定位。此时我的导航栏几乎完美地工作。但是，我必须将我的链接与它的 href="home"放在类为“options”的 div 之外，以便在我的屏幕尺寸接近我的媒体查询时它仍然可见。之后我的链接定位变得很尴尬所以我转向了 CSS flex-box。

   <html>
<div>
<nav class="navbar">
    <label class="menu" for="toggle">&#9776</label>
    <input type="checkbox" id="toggle"/>
    <div class="main"><li class="home"><a href="home">TechReality</a></li></div>
    <div class="options">
       <li class="news"><a href="news"></a></li>
        <li class="products"><a href="productstats">Categories</a></li>
        <li class="trends"><a href="trending">Trending</a></li>
        <li class="forum"><a href="reading">Customer Forum</a></li>
        <li class="about"><a href="aboutus"></a>About Us</li>
    </div>
</div>
</nav>

@media only screen and (max-width: 1135px) {
.navbar .options .home{
    visibility: visible;
}

.menu {
    display: block; 
    cursor: pointer;
}

.navbar.options{
    text-align: center;
    visibility: hidden;
    flex-basis: 100%;
    flex-wrap: wrap;
}

.news, .products, .trends, .forum, .about {
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    margin: 0;
}

ul:last-of-type a {
    border-bottom: none;
  }

#toggle:checked + .options {
    visibility: visible;
}
}

我的完整代码可以在代码笔片段中看到 https://codepen.io/ashu121805/full/XvgRqP .

最佳答案

这里有很多要讨论的内容，但我想指出三个主要问题，这将使您完成 90% 的工作，然后您可以根据需要调整样式。

1。修复无效的 HTML

你有一个无关的收尾div <nav class="navbar"> 内的标签应该删除。你还有li div 内的标签，这是不正确的；一个li应该始终是 ol 的 child 或 ul .修复这些，并删除多余的 html从上面代码段的开头开始标记，我们得到这个:

<div>
  <nav class="navbar">
    <label class="menu" for="toggle">&#9776</label>
    <input type="checkbox" id="toggle"/>
    <ul class="main">
      <li class="home"><a href="home">TechReality</a></li>
    </ul>
    <ul class="options">
      <li class="news"><a href="news"></a></li>
      <li class="products"><a href="productstats">Categories</a></li>
      <li class="trends"><a href="trending">Trending</a></li>
      <li class="forum"><a href="reading">Customer Forum</a></li>
      <li class="about"><a href="aboutus"></a>About Us</li>
    </ul>
  </nav>
</div>

(另外，请注意:在 CodePen 中，您不需要包含 html 或 body 标签，也不需要包含 head 部分。您也可以删除您拥有的 script 标签，只需在编辑器 View 中使用 JS 面板。)

2。让汉堡菜单发挥作用

这个很容易修复。现在您正在使用此规则切换菜单的可见性:

#toggle:checked + .options {
  visibility: visible;
}

问题是，+选择器仅选择元素的紧接下一个 的同级元素。自 .options不在 #toggle 之后, 选择器不起作用。

相反，您可以使用 ~选择器，它将选择匹配选择器的元素之后的所有 sibling :

#toggle:checked ~ .options {
  visibility: visible;
}

3。基本 CSS 清理

一旦你做到这一点，你就会有一个菜单，当你点击汉堡包时，它会切换，但它看起来很不稳定。我们需要做几件主要的事情:

让我们的列表 (ul) 实际上看起来不像列表。
使链接垂直堆叠。
将链接放在合理的位置，例如屏幕左侧导航栏的正下方。

#1 可以简单地完成:

ul {
  list-style: none;
  padding-left: 0;
}

#2 可以通过添加这些额外的样式来完成:

.navbar .options {
  flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
  width: 100%;
}

另请注意，您目前的媒体查询样式中有错字——.navbar .options 中应该有一个空格。你目前没有的地方。

#3 有点复杂，但一个好的开始是将这些样式添加到您的媒体查询中:

/* force .options to wrap below since it has flex-basis: 100% */
.navbar {
  flex-wrap: wrap;
}
/* remove the default margin-bottom on lists – or you could do this in your main styles above your media query */
.navbar .options,
.main {
  margin-bottom: 0;
}

从那里您可以根据需要进行调整。

关于html - CSS flex 属性不允许隐藏和堆叠链接。这是否也不允许我的汉堡菜单正常运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57300669/

26

4

0

文章推荐： c - 将 char 存储在数组 C 中无法正常工作

文章推荐： Linux 中颜色响应的正则表达式匹配

文章推荐： c - 如何通过终止符跳出循环？

文章推荐： linux - 使用 sed 命令替换文件内容

ios - UICollectionView 堆叠
如何将单元格(在 UICollectionView 中)堆叠在一起？ Feedly 做得很好，我想知道是否可以以某种方式操纵 zIndex 属性以在 UICollectionView 的导航中获得类似
css 堆叠 div
我正在尝试堆叠 div 以使用和图像显示顶部和底部淡入淡出。外部 div(“旋转器”)有一个背景图像，该图像在顶部和底部具有渐变，在中间是透明的。在中间，我想显示内容或图像，并将外部 div 背景图
CSS 堆叠 Div
我有两个动画(在 CSS 中)div，它们围绕彼此旋转。我想在中间为文本添加另一个 div。但是，如果我将 div 放在这两个中的任何一个中，它就会与父 div 一起设置动画。如果我尝试定位它，它就位
Android 堆叠 View
图中显示了我想要的 View 。最佳答案为此你可以采取 FrameLayout . 例如 - 1: 更新: 例如 - 2:精湛的示例和技巧，可在此处找到:http://w
tensorflow - 堆叠 LSTM 的初始状态结构
使用 tf.keras.layers.RNN 的 TensorFlow (1.13.1) 中多层/堆叠 RNN 的初始状态所需的结构是什么？ API？我尝试了以下方法: lstm_cell_size
r - ggplot2 - 堆叠/躲避条形图
我在制作条形图时遇到问题，其中 y 轴不是计数，而是变量的值。我使用stat=identity，这对于一个变量来说很好。但是，如果我有两个变量并且想要创建堆叠/闪避条形图怎么办？我这里有一些模拟数
r - 对路径列表中的栅格进行分组/堆叠，并提取每组的最小值
我有一个栅格路径列表(rplist = 912 raster pathe for 912 rasters (19yeras)(12months)(4weeks))如下: [1] "C:/Users
php - 堆叠 PHP 代码？
我已经完成了一个项目，现在需要更改该项目，以便在变量位于数组中时显示一个 div，如果变量不在数组中则显示另一个 div。通常我会这么做祝你愉快，但是我得到的代码已经包含大量 html 和 ph
r - ggplot2 - 堆叠/躲避条形图
我在制作条形图时遇到问题，其中 y 轴不是计数，而是来自变量的值。我使用 stat=identity，这对一个变量来说没问题。但是，如果我有两个变量并想创建一个堆叠/闪避条形图怎么办？我这里有一些
r - 对路径列表中的栅格进行分组/堆叠，并提取每组的最小值
我有一个栅格路径列表(rplist = 912 raster pathe for 912 rasters (19yeras)(12months)(4weeks))如下: [1] "C:/Users
java - 标签重叠(堆叠)有问题
我正在尝试将分数和耗时标签(scoreAndTimer)添加到我已经工作的贪吃蛇游戏代码中。问题是当我使用 ScoreAndTimer.setText(); 时它与之前的文本堆叠在一起。我尝试 se
gtk - 堆叠 GTK+ 小部件
有没有办法将 GTK+ 小部件放入堆栈中？ IE。在标签上放置一个按钮，使按钮覆盖标签的一部分。最佳答案您可以使用 GtkFixed 作为布局。这将允许您控制子小部件的确切位置，并且它们可以重叠。
java - 堆叠 ASM 访问者的正确方法是什么？
我有以下代码: for (Map.Entry e : classes.entrySet()) { ClassReader reader = e.getValue(); ClassWri
r - 根据ggplot2中类别的比例调整(堆叠)条宽
我正在尝试根据类别的计数(或比例)更改我的(堆叠)条宽，作为示例，我使用了钻石数据集。我想根据每个类别(变量 cut )的频率看到不同的宽度。我首先创建了一个变量 cut_prop然后用下面的代码绘制
c# - DispatcherTimer 堆叠 - UWP
我目前正在 UWP 中开展一个项目，我有一个 CommandBar，我想将其从 Hidden 变为 Compact 如果鼠标移动。五秒钟后(如果鼠标不移动)CommandBar 应该再次返回到Hidd
ios - 动画期间 subview 堆叠
我是 Swift 新手，并尝试在学习过程中编写一本交互式书籍。我使用 CATransform3DMakeRotation 创建了封面效果。正如您所看到的，当我堆叠 View 时，问题就出现了。如果我
android - 使用相机快照防止多项 Activity 堆叠
我已经阅读了 finish(); 命令和 FLAG_ACTIVITY_CLEAR_TOP 命令，还查看了 Common Ware 关于终止应用程序的回答，但我不确定如何放置这进入我的应用程序。基本上
c++ - 堆叠 Cg 着色器
在我的引擎中，我从成对的顶点/像素着色器文件中加载 Cg 着色器。我希望能够堆叠着色器以组合它们(照明+ Material 等)。除了将着色器分解为单独的函数然后从中创建单个着色器脚本字符串之外，您是
java - 相同的 Activity 堆叠
我有一个 Activity 应该自行完成并关闭应用程序。现在，在某些情况下，根据用户导航到 Activity 的方式而变化， Activity 正在堆叠。当 Activity 堆积时，然后调用 fin
python - 堆叠 CSV 文件的最快方法
我有 10 个具有完全相同的列和数据类型的 csv 文件。什么是最快/最有效的堆叠方式？ CSV1: col1 | col2 | col3 1 | 'a' | 0.1 2 | 'b'

首页

博学

6Ren·AI

商城

html - CSS flex 属性不允许隐藏和堆叠链接。这是否也不允许我的汉堡菜单正常运行？

1。修复无效的 HTML

2。让汉堡菜单发挥作用

3。基本 CSS 清理