logo标签列表

如何创建下拉式汉堡菜单

javascripthtmlcss
6

我刚开始学习HTML/CSS并且正在制作个人网站。我遇到了创建下拉汉堡菜单的问题。在移动端大小调整时，我已经设置好了标题栏，但是当我点击汉堡图标时，菜单却与主导航栏对齐。我想让它嵌套在主菜单下方，并具有100％的宽度。此外，我还想在用户完成查看后添加“x”符号来关闭它。希望我解释得足够清楚，我会发布CodePen链接。

 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()">&#9776;</a>
     </li>
  </ul>
    </div>

</body>

“并且宽度为100%”，您是指相对于父元素的100%还是相对于视口的100%？ - guest271314
为什么不使用Bootstrap？它有一个易于使用的组件来完成这项工作，而且还具有响应式设计。你知道吗？ - lisarko8077
@guest271314 感谢您将页面宽度设置为100%。 - user7311741
@lisarko8077 我对此不是很熟悉，正在努力学习手写编码，但还是谢谢你，kittyCat 帮我解决了问题。 - user7311741
感谢所有评论的人，我已经解决了它。 - user7311741
1个回答
3
首先，您需要将图标放在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()">&#9776;</a>
      </div>
    </div>

</body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接