Question

所以我是html / css的新手，我正在个人网站上工作。我在制作下拉汉堡包菜单时遇到了麻烦。我为移动设备调整大小设置了标题，但是当我点击汉堡图标时，菜单会再次显示主导航。我试图让它嵌入主菜单下，宽度为100％。除了添加＆＃34; x＆＃34;当用户完成查看时关闭它的符号。我希望我解释得很好，我会发布codepen link。

＆＃13;

	function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

好吧，首先，你必须将你的图标放在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>

如何创建下拉汉堡菜单

1 个答案: