Question

对于我的网页（Github Page），我想使菜单对屏幕大小敏感，这样，当菜单太小且元素不合适时，它就会折叠。我打算添加以下解决方案：w3schools，当屏幕较小时，使用“汉堡”图标将所有元素合并。

我可以使用不同的元素创建菜单，添加“汉堡”图标，然后在屏幕较大时默认将其隐藏。但是，媒体查询和js函数一定是错误的，因为当我将屏幕缩小时，会出现“汉堡”图标，但是其他元素不会消失，并且在“汉堡”上单击并没有任何作用。我猜想某个地方的id名称有误或混淆。可以吗？

在w3schools的示例中，使用div标签，但我不是。该示例是否必不可少？

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("nav");
  if (x.className === "header_nav") {
    x.className += " responsive";
  } else {
    x.className = "header_nav";
  }
}

/* Header_nav ----- DRAFT */

#page-wrapper {
  padding-top: 3.5em;
}

#header_nav {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
  cursor: default;
  height: 3.5em;
  left: 0;
  line-height: 3.5em;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

#header_nav .icon {
  display: none;
}

#header_nav h1 {
  height: inherit;
  left: 1.25em;
  line-height: inherit;
  margin: 0;
  position: absolute;
  top: 0;
}

#header_nav nav {
  position: absolute;
  right: 1em;
  top: 0;
}

#header_nav nav ul {
  margin: 0;
}

#header_nav nav ul li {
  display: inline-block;
  margin-left: 1em;
}

#header_nav nav ul li a,
#header_nav nav ul li span {
  border: 0;
  color: inherit;
  display: inline-block;
  height: inherit;
  line-height: inherit;
  outline: 0;
}

#header_nav nav ul li a.button,
#header_nav nav ul li span.button {
  height: 2em;
  line-height: 2em;
  padding: 0 1.25em;
}

#header_nav nav ul li a:not(.button):before,
#header_nav nav ul li span:not(.button):before {
  margin-right: 0.5em;
}

#header_nav nav ul li.active>a,
#header_nav nav ul li.active>span {
  color: #e44c65;
}

#header_nav nav ul li>ul {
  display: none;
}

body.landing #page-wrapper {
  padding-top: 0;
}

body.landing #header_nav {
  background: transparent;
  box-shadow: none;
  position: absolute;
}


/* 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) {
  #header_nav a:not(:first-child) {
    display: none;
  }
  #header_nav 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) {
  #header_nav.responsive {
    position: relative;
  }
  #header_nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #header_nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<html>

<head>
  <title>Eduardo Alvarado</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="assets/css/main.css" />
  <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
  <!-- Load an icon library to show a hamburger menu (bars) on small screens -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body class="is-preload">

  <!-- Header Navigation Menu -->
  <section id="header_nav">
    <nav id="nav">
      <ul>
        <li>
          <a href="index">
            <p style="color:white">Home</p>
          </a>
        </li>
        <li>
          <a href="">
            <p style="color:white">Research</p>
          </a>
        </li>
        <li>
          <a href="">
            <p style="color:white">Game-dev</p>
          </a>
        </li>
        <li>
          <a href="photography">
            <p style="color:white">Photography</p>
          </a>
        </li>
        <li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
      </ul>
    </nav>
  </section>

可以在仓库（Github Repo）中找到整个代码。

您能看到我无法发现的错误吗？为什么w3school中的示例不适用？

非常感谢您的帮助。提前非常感谢您！

Answer 1

这是一个根据您的代码可复制的小型解决方案： https://jsfiddle.net/hneromu4/5/

我添加了一个固定于链接元素的类，当我们调整窗口大小时，这些元素应该保留：

<section id="header_nav">
  <nav id="nav">
    <ul>
      <li class="fixed"><a href="">Home</a></li>
      <li><a href="">Research</a></li>
      <li><a href="">Game-dev</a></li>
      <li><a href="photography">Photography</a></li>
      <li class="fixed hamburguer"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>
  </nav>
</section>

我还调整了您的CSS和js。

Answer 2

在您的CSS和HTML中，我做了一些更改，因为您的汉堡包菜单位于您要隐藏的同一东西之内，这并不是一个好主意，我还对CSS进行了一些调整，因为您将位置设置为相对但未将显示设置为阻止。希望这会有所帮助！

CSS（第2525-2547行）：

        @media screen and (max-width: 600px) {
              #nav {display: none;}
              #header_nav 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) {
          #nav.responsive {position: relative;display: block;}
          #header_nav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          #nav.responsive a {
            float: none;
            display: block;
            text-align: left;
          }
        }

HTML：

<!-- Header Navigation Menu -->
            <section id="header_nav">
                <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_nav">
                    <ul>
                        <li><a href="index"><p style="color:white">Home</p></a></li>
                        <li><a href=""><p style="color:white">Research</p></a></li>
                        <li><a href=""><p style="color:white">Game-dev</p></a></li>
                        <li><a href="photography"><p style="color:white">Photography</p></a></li>

                    </ul>
                </nav>
            </section>

CSS-创建响应式顶部导航菜单

2 个答案: