Javascript HTML响应式顶部导航菜单
因此，我在尝试创建响应性强的顶部导航菜单时遇到了问题。我能够显示汉堡菜单栏，但用户单击图标时的javascript不起作用 下面是我的HTML、CSS和JavaScript目前的样子。我关注w3schools.com，以便创建自己的网站 HTMLJavascript HTML响应式顶部导航菜单,javascript,html,css,navigation,responsive,Javascript,Html,Css,Navigation,Responsive,因此，我在尝试创建响应性强的顶部导航菜单时遇到了问题。我能够显示汉堡菜单栏，但用户单击图标时的javascript不起作用 下面是我的HTML、CSS和JavaScript目前的样子。我关注w3schools.com，以便创建自己的网站 HTML 函数myFunction（）{ var x=document.getElementById（“myTopnav”）； 如果（x.className==“topnav”）{ x、 类名+=“响应”； }否则{ x、 className=“topnav
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}/*为顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：#8585e0；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景色：#00e68a；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*当屏幕宽度小于600像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
大炮主页
欢迎来到我的网站
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
javascripthtml<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cannon Homepage</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="about.html">About</a>
<a href="accomplishments.html">Accomplishments</a>
<a href="hobbies.html">Hobbies</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</div>
<div style="padding-left:16px">
<h2>Welcome to my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- here -->
<script type="text/javascript" src="script/javascript.js"></script>
</body>
</html>
大炮主页
欢迎来到我的网站
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡