HTML 响应式顶部导航菜单

Question

所以，我在尝试创建 响应式顶部导航菜单时遇到了问题。 我能够显示汉堡包菜单栏，但是 javascript当用户点击图标时不起作用。

这是我的 HTML、CSS 和 JavaScript 目前的样子。我正在关注 w3schools.com 以便我可以创建自己的网站。

HTML

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

/* Add a black background color to the top navigation */
.topnav {
 background-color: #8585e0;
 overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
 background-color: #ddd;
 color: black;
}

/* Add an active class to highlight the current page */
.active {
 background-color: #00e68a;
 color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
 display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
 .topnav a:not(:first-child) {display: none;}
 .topnav a.icon {
   float: right;
   display: block;
 }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
 .topnav.responsive {position: relative;}
 .topnav.responsive a.icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
}

<!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="javascript" href="script/javascript.js">
    <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>

  </body>
</html>

如果你能告诉我 javascript 和 css 中的 onclick 功能有什么问题，看看我如何让汉堡包菜单图标真正能够打开和关闭，那就太好了.

Answer 1

我想我找到了问题所在。您正在使用 <link> 到 javascript 文件，而不是使用 <script> 并将其放在 html 文件的底部，它应该可以正常工作：

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

HTML 响应式顶部导航菜单

HTML Responsive Top Navigation Menu

html

javascript

css

navigation

responsive