HTML | CSS:汉堡菜单的问题
我叫特洛伊,多年来我一直在尝试在HTML和CSS上创建汉堡菜单 我在YouTube上找到了一个教程,效果很好,直到我在下面添加了HTML | CSS:汉堡菜单的问题,html,css,Html,Css,我叫特洛伊,多年来我一直在尝试在HTML和CSS上创建汉堡菜单 我在YouTube上找到了一个教程,效果很好,直到我在下面添加了。我将包括youtube视频的链接 所以基本上问题是,我尝试在标题下添加一个,然后当我点击汉堡菜单时,它会破坏整个东西,直到我再次关闭汉堡菜单:视频上有大量评论说我应该添加一个最小高度:70px。试过了,但什么也没用。我感谢正在阅读本文的读者花时间试图找到一种方法来帮助我好的,我想我已经找到了解决你问题的方法。起初,我怀疑与z-index有关,因为它看起来好像在另一个文
。我将包括youtube视频的链接
所以基本上问题是,我尝试在标题下添加一个
,然后当我点击汉堡菜单时,它会破坏整个东西,直到我再次关闭汉堡菜单:视频上有大量评论说我应该添加一个最小高度:70px。试过了,但什么也没用。我感谢正在阅读本文的读者花时间试图找到一种方法来帮助我好的,我想我已经找到了解决你问题的方法。起初,我怀疑与z-index有关,因为它看起来好像在另一个文本下面。然而,事实证明,您有一些问题:
您的菜单位于文档流中。它将你的其他内容向下推
您的菜单在顶部栏展开时会覆盖它,使其无法在展开后缩回
您的菜单没有背景色,因此在展开菜单时,它下面的所有内容都会显示出来
在@media.CSS菜单下,您需要有以下代码:
.menu{
text-align: center;
width: 100%;
display: none;
position: fixed;
top: 72px;
z-index: 5;
background-color: #fff;
}
位置:固定将其从文档流中取出。顶部:72px确保它不会覆盖顶栏。Z-index:5和背景色:#fff使其显示在页面其余部分的顶部。现在看起来是这样的:
你自己试试看,如果它解决了你的问题或者你仍然需要帮助,请告诉我。无需跳转到Bootstrap或任何复杂的框架-这是一个基本的CSS实现,您几乎就完成了,只是缺少了几行代码。欢迎使用Stack Overflow。请花一点时间阅读页面,了解该网站的工作原理。可能是打字错误,但我没有看到打开的正文标记。您也可以使用Bootstrap()。它易于实现,并允许您提供响应性设计,其中包括汉堡包菜单。我将尝试一下,谢谢。我只是添加了一个图像来清楚地显示正在发生的事情。另外,我不太确定如何安装和使用引导。在页面上包含它们所需的css和js库:然后按照navbar with hamburger的示例进行操作:
body{
font-family: 'Poppins', sans-serif;
width: 100%;
height: 100%;
margin: 0;
}
.nav{
background: #5fffcb;
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
}
.nav h1{
font-size: 25px;
float: left;
line-height: 70px;
padding-left: 20px;
margin: 0 30px 0 0;
}
.menu{
margin: 0 30px 0 0;
}
.menu a{
clear: right;
font-weight: bold;
text-decoration: none;
color: #282828;
margin: 0 10px;
line-height: 70px;
}
label{
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle{
display: none;
}
@media only screen and (max-width: 500px){
nav{
height: auto;
min-height: 70px;
line-height: 70px;
}
label{
font-weight: bold;
display: block;
cursor: pointer;
}
.menu{
text-align: center;
width: 100%;
display: none;
}
.menu a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu{
display: block;
}
.menu{
text-align: center;
width: 100%;
display: none;
position: fixed;
top: 72px;
z-index: 5;
background-color: #fff;
}