所以我是 html/css 的新手，我在个人网站上工作。我在创建下拉式汉堡菜单时遇到问题。我为移动调整大小设置了标题，但是当我单击汉堡包图标时，菜单再次弹出主导航。我试图让它位于主菜单下并且宽度为 100%。以及添加“x”符号以在用户完成查看时将其关闭。我希望我解释得足够好，我会发布 codepen link .
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}body {
background-color: #EFF0EC
}
.header {
padding-left: 30px;
background-color: #FFFFFF;
padding-top: 18px;
padding-bottom: 18px;
}
h1 {
font-size: 36px;
font-family: Buenard, Times, serif;
background-color: #FFFFFF
float: left;
display: inline;
}
ul.topnav {
list-style-type: none;
display: inline;
float: right;
margin: auto;
padding: 0;
overflow: hidden;
}
li a {
color: #000;
text-decoration: none;
display: inline-block;
transition: 0.3s;
}
li a:hover {
color: #80B198;
}
li {
font-size: 22px;
font-family: Lato, Arial sans-serif;
padding: 10px 16px;
display: inline-block;
margin: auto;
}
ul. topnav li.icon {
display: none;
}
/* Smartphone-size screens */
@media (max-width: 767px) {
ul.topnav li {display: none;}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}<body>
<div class="header">
<h1>Lorem Ipsum</h1>
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#portfolio">Portfolio</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></i>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
</div>
</body>最佳答案
好吧，首先你必须让你的图标在ul之外并定位这个 ul与宽度为 100% 的移动设备中的绝对值一样。如果单击汉堡包图标，它会打开菜单，如果您再次单击它，它会关闭它。
这是一个 codepen下面是代码。
而不是有一个十字架。我认为你应该在这个 codepen 中尝试其中一个汉堡菜单.您可以简单地将其中一个替换为 <div class="icon">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}body {
background-color: #EFF0EC
}
.header {
padding-left: 30px;
background-color: #FFFFFF;
padding-top: 18px;
padding-bottom: 18px;
position:relative;
}
h1 {
font-size: 36px;
font-family: Buenard, Times, serif;
background-color: #FFFFFF
float: left;
display: inline;
}
ul.topnav {
list-style-type: none;
display: inline;
float: right;
margin: auto;
margin-right:50px;
padding: 0;
overflow: hidden;
}
li a {
color: #000;
text-decoration: none;
display: inline-block;
transition: 0.3s;
}
li a:hover {
color: #80B198;
}
li {
font-size: 22px;
font-family: Lato, Arial sans-serif;
padding: 10px 16px;
display: inline-block;
margin: auto;
}
div.icon {
position:absolute;
top:30px;
right:20px;
}
/* Smartphone-size screens */
@media (max-width: 767px) {
ul.topnav{
position:absolute;
top:60px;
left:0;
margin:0;
padding:0;
width:100%;
background-color:white;
}
ul.topnav li {display: none;}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}<body>
<div class="header">
<h1>Lorem Ipsum</h1>
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#portfolio">Portfolio</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</div>
</div>
</body>关于javascript - 如何创建下拉汉堡菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41390677/