Question

每当我单击下拉菜单（3条）时，它都会打开一个菜单，但位置错误。我希望它在3个条的下面打开，而不是在屏幕较大时通常在导航所在的位置打开。

要检查我的代码，请考虑其3个以上的文件，而且我什至不知道错误可能在哪里，或如何解决，我将链接github存储库。 https://github.com/Realmm/James-Website

您必须缩小屏幕才能看到出现问题的条形图。

大屏幕：

小屏幕：

打开菜单：

Answer 1

我找到了一个W3 Schools示例，该示例似乎与您想要的示例相似：https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

该示例与您到目前为止所拥有的主要区别似乎在于该示例将下拉导航菜单嵌套在打开下拉菜单的按钮内。

我尝试将您的移动菜单元素嵌套到icon元素中，这确实使菜单在打开时显示在条形图标下方。您可能仍想修复一些样式细节，但这是否是正确的想法？

<i class="fa fa-bars">
    <nav class="mobile-menu">
      <p class="nav-box contact">Contact</p>
      <p class="nav-box services">Services</p>
      <p class="nav-box portfolio">Portfolio</p>
      <p class="nav-box about">About</p>
    </nav>
  </i>

编辑：我还向条形图标的CSS中添加了overflow: hidden;，这阻止了它在打开标头时扩展其高度。

由于此修复程序还使原始的导航链接在展开屏幕时不出现在标题的右侧，因此我进行了一次编辑，以为每个版本的导航链接添加一个单独的html元素，并添加了一个新的JavaScript中的$ mobileNavBar变量可跟踪下拉版本的打开和关闭。基本上，我添加了以下行：

let $mobileNavBox = $('.fa-bars .nav-box');

然后我更改了这一块：

on('click', () => {
  $navBox.slideToggle();
  $navBox.css('display', 'block');
  $navBox.css('position', '')

对此：

on('click', () => {
  $mobileNavBox.slideToggle();
  $mobileNavBox.css('display', 'block');
  $mobileNavBox.css('position', '')

这是一个有效的示例：

let $bar = $('.header .fa-bars');
let $navBox = $('.header .nav-box');
let $mobileNavBox = $('.fa-bars .nav-box');
let $window = $(window);

$bar.on('mouseenter', () => {
  $bar.css({
    cursor: 'pointer',
    color: '#368EC9'
  });
}).on('mouseleave', () => {
  $bar.css({
    color: '#FFF'
  });
}).on('click', () => {
  $mobileNavBox.slideToggle();
  $mobileNavBox.css('display', 'block');
  $mobileNavBox.css('position', '')
});

$navBox.on('mouseenter', event => {
  $(event.currentTarget).css({
    cursor: 'pointer',
    color: '#368EC9',
    backgroundColor: '#37393D'
  });
}).on('mouseleave', event => {
  $(event.currentTarget).css({
    color: '#FFF',
    backgroundColor: '#333'
  });
});

$window.resize(() => {
  if ($window.width() > 800) {
    $navBox.css('display', 'inline-block');
  } else {
    $navBox.css('display', 'none');
  }
});

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

mobile-menu {
  position: absolute;
  left: 0;
}

body {
  background-color: #414141;
  font-family: Montserrat, serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #333;
  color: #FFF;
  height: 50px;
}

.grid .header {
  display: grid;
  grid-template-columns: 30px minmax(400px) 400px 1fr 1fr;
  /* border: 1px solid #FFF; */
  grid-template-areas: 'title title empty empty nav';
}

.empty {
  grid-area: empty;
}

.header .title {
  grid-area: title;
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  /* border: 1px solid #FFF; */
  text-align: center;
  margin: auto 10px;
}

.header .nav-box {
  grid-area: nav;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  text-align: center;
  background-color: #333;

  display: inline-block;
  float: left;
  margin: auto 5px;
  padding-top: 12px;
  padding: 12px 4px 0px 4px;
  text-align: center;
  height: 38px;
  /* border: 1px solid #FFF; */
}

.header .fa {
  grid-area: bar;
  font-size: 32px;
  text-align: center;
  margin: auto 0px auto 10px;
  /* border: 1px solid #FFF; */
  display: none;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  .header .nav-box {
    display: none;
    float: none;
  }

  .header .fa {
    display: inline;
  }

  .grid .header {
    grid-template-areas: 'bar title title title title';
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>James Andrew</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div class="grid">
    <div class="header">
      <div class="empty"></div>
      <i class="fa fa-bars">
        <nav class="mobile-menu">
          <p class="nav-box contact">Contact</p>
          <p class="nav-box services">Services</p>
          <p class="nav-box portfolio">Portfolio</p>
          <p class="nav-box about">About</p>
        </nav>
      </i>
      <p class="title">James Andrew</p>
      <nav class="mobile-menu">
        <p class="nav-box contact">Contact</p>
        <p class="nav-box services">Services</p>
        <p class="nav-box portfolio">Portfolio</p>
        <p class="nav-box about">About</p>
      </nav>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="scripts/menu.js"></script>
</body>
</html>

如何将菜单列表放在下拉图标下方？

1 个答案: