javascript - 如何在响应式导航栏中设计汉堡菜单链接？

Question

我正在尝试设计我的汉堡包菜单链接，但找不到正确的方法。

我正在查看的示例:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

我认为问题在于我添加了 ul class="headerlinks"来设计全屏菜单。有人有解决方案吗？

我想像在 w3schools 示例中那样显示它:

这是我的代码

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

.topnav {
	background-color: white;
	width: 100%;
	position:absolute;
	overflow: hidden;
	border-bottom: 1px solid;
	border-bottom-color: #e8ebef;
	height: 120px;
}

.topnav a {
	float: left;
	display: block;
	color: #4d4d4f;
	text-align: center;
	padding: 10px 30px;
	text-decoration: none;
	font-size: 17px;
	margin-top: 10px;
}

.topnav a:active{
	color: #bed017;
}

.topnav a:hover {
  background-color: #f2f2f2;
	}

.topnav .icon {
  display: none;
}


.headerlinks{
	margin-left: 25%;
	margin-top: 1.5%;
	
}
@media screen and (max-width: 1100px) {
   
  .topnav  a{display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }  

  .circle
    {
        display: none;
    }

	.signInbtn
	{
		display: block !important;
	}
}

@media screen and (max-width: 1100px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  } 
}

<div class="topnav" id="myTopnav">
	<img class="headerlogo" src=""></img>
	
	<ul class="headerlinks">
		<a href="#home">Hem</a>
		<a href="#">test</a>
		<a href="#newcustomer">Ny kund</a>
		<a href="javascript:void(0);" style="font-size:20px;" class="icon" onclick="myFunction()">&#9776;</a>
	</ul>
	
	<ul>
		<li class="headerLogIn">
			<a><button class="circle" onclick="document.getElementById('id01').style.display='block'">LOGGAIN</button></a>
		</li>
	</ul>
  </div>

Answer 1

您在追加响应式类名称的函数中有一个拼写错误(您错过了在“响应式”类名称之前添加一个空格)。你的功能应该是:

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

所以，行:

x.className += "responsive";

应该是:

x.className += " responsive";

添加该空间应该可以解决问题。希望这可以帮助。谢谢。