Question

我正在尝试开发一个响应式的顶级导航菜单，但是我在汉堡菜单上遇到了一些麻烦。当我调整浏览器大小并单击“汉堡包”图标时，它什么也不会做。我的html上有jquery，但由于某种原因调整了浏览器的大小时，我无法调低菜单。任何帮助将不胜感激。

这是我的代码：

$('.nav-toggle').click(function() {
  if ($('.top-nav-links').css('margin-top') == '-225px') {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(window).resize(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(document).ready(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f8f8f8;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/* TOP NAVIGATION CSS */

.top-nav {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.logo:link {
  color: red;
  text-decoration: none;
  font-size: 26pt;
  margin: 10.5px 0;
  display: inline-block;
  float: left;
  font-weight: bold;
}

.logo:visited {
  color: red;
  text-decoration: none;
}

.top-nav-links {
  display: inline-block;
  margin: 0;
  float: right;
}

.top-nav-links li {
  display: inline-block;
  margin: 0 10px;
  padding: 15px 0;
}

.top-nav-links li:first-of-type {
  margin-left: 0;
}

.top-nav-links li:last-of-type {
  margin-right: 0;
}

.top-nav-links li a:link {
  color: red;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.top-nav-links li a:visited {
  color: red;
  text-decoration: none;
  font-size: 18px;
}

.top-nav-links li a:hover {
  color: red;
}

.nav-toggle {
  float: right;
  font-size: 30px;
  margin: 8.2px 0;
  color: red;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  display: none;
}

.nav-toggle:hover {
  color: red;
}

@media all and (max-width: 730px) {
  .top-nav-links {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: -255px;
    display: none;
  }
  .top-nav-links li {
    display: block;
    margin: 0;
    text-align: center;
  }
  .nav-toggle {
    display: inline-block;
  }
}

<html>

<head>
  <title>TopNav</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <!-- SCRIPTS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="functions.js">
  </script>
</head>

<body>
  <!-- TOP NAVIGATION -->
  <div class="top-nav clearfix">
    <a href="index.html" class="logo">TopNav</a>
    <div class="nav-toggle">
      <i class="icon ion-md-menu"></i>
    </div>
    <ul class="top-nav-links">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Shop</a>
      </li>
      <li>
        <a href="#">About Us</a>
      </li>
      <li>
        <a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</body>

</html>

Answer 1

您的nav-toggle click函数中存在一些问题。

在这种情况下，您需要将margin-top的{{1}}值与-225px的其他地方-255px进行比较。
在max-width: 730px屏幕上，您将display: none添加到top-nav-links类中。您还需要在nav-toggle click函数中进行切换。

您最终的nav-toggle click函数可能类似于：

    $('.nav-toggle').click(function () {
        if ($('.top-nav-links').css('margin-top') == '-255px') {
            $('.top-nav-links').css('margin-top', '0').css('display', 'inline-block');
        } else {
            $('.top-nav-links').css('margin-top', '-255px').css('display', 'none');
        }
    });

为什么我的下拉菜单在导航栏中不起作用？

1 个答案: