Question

我正在进行自定义下拉导航，但是当它切换徽标时，在蓝色div所代表的此codepen中，会转到导航的底部。我一直试图解决这个问题一段时间，并希望得到任何帮助。

这是我的代码：

HTML

<div class='container-fluid nav'>
  <div class='container'>
    <div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
      <div class = 'nav__btn bar1'></div>
      <div class = 'nav__btn bar2'></div>
      <div class = 'nav__btn bar3'></div>
    </div>
    <ul class = "nav__dropdown">
      <li>Home</li>
      <li>About</li>
      <li>Work</li>
      <li>Blog</li>
      <li>Contact</li>
    </ul>

    <div class='nav__brand u-inlineBlock'>
      logo
    </div>

  </div>
 </div>

CSS

.nav__dropdown {
  padding-left: 0;
  margin-top: 75px;
  list-style: none;
  text-align: center;
  box-sizing: border-box;
  display: none;
}

.nav__dropdown li {
  font-size: 20px;
  padding: 25px;
  width: 40%;
  background: white;
  border-bottom: 1px solid black;
}

.nav__dropdown li:last-child{
  border-bottom: none;
 }
.nav__dropdown li:hover{
  background: black;
  color: seashell
 }
.u-inlineBlock {
  display: inline-block;
}

JS

function toggleDropdown(x) {
    $('.nav__dropdown').slideToggle(500);
}

在此之后，我会尝试在右侧添加一个子菜单，所以如果你能指出我正确的道路，这将是伟大的

（请注意，这对我来说只是一个奖励，我不在乎你是否对我没有帮助，所以不要因为太宽泛或类似的东西而投票。我也看到了类似的东西。问题，但他们没有帮助）

提前致谢！

Answer 1

只需在ul之前移动徽标，然后从ul中删除margin-top。如果您希望切换按钮和子菜单与白色标题齐平，请删除.nav { height: 75px; }

function animateNavbarToggle(x) {
    x.classList.toggle("toggled");
}


function toggleDropdown(x) {
    $('.nav__dropdown').slideToggle(500);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
  background-color: pink;
  height: 2000px;
}

/*------------------------------------*\
  #NAVIGATION
\*------------------------------------*/
.nav {
  background-color: white;
  height: 75px;
}

.nav__brand {
  height: 68px;
  width: 227px;
  background-color: lightblue;
  text-align: center;
}

/**
 * Navigation dropdown button
 */
.nav__btn {
  width: 22PX;
  height: 3px;
  background-color: black;
  margin: 4px 0;
}

.nav__btn--toggle {
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 22PX;
  height: 3px;
  background-color: coral;
  margin: 4px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.toggled .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 5px);
  transform: rotate(-45deg) translate(-5px, 5px);
}

/* Fade out the second bar */
.toggled .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.toggled .bar3 {
  -webkit-transform: rotate(45deg) translate(-4px, -4px);
  transform: rotate(45deg) translate(-4px, -6px);
}

/**
* Navigation Dropdown
*/
.nav__dropdown {
  padding-left: 0;
  list-style: none;
  text-align: center;
  box-sizing: border-box;
  display: none;
}

.nav__dropdown li {
  font-size: 20px;
  padding: 25px;
  width: 40%;
  background: white;
  border-bottom: 1px solid black;
}

.nav__dropdown li:last-child {
  border-bottom: none;
}

.nav__dropdown li:hover {
  background: black;
  color: seashell;
}

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
.u-inlineBlock {
  display: inline-block;
}

.u-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
  <div class='container'>
    <div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
      <div class='nav__btn bar1'></div>
      <div class='nav__btn bar2'></div>
      <div class='nav__btn bar3'></div>
    </div>
    <div class='nav__brand u-inlineBlock'>
      logo
    </div>
    <ul class="nav__dropdown">
      <li>Home</li>
      <li>About</li>
      <li>Work</li>
      <li>Blog</li>
      <li>Contact</li>
    </ul>


  </div>
</div>

Answer 2

尝试将position: fixed添加到您的nav__dropdown CSS

.nav__dropdown {
  padding-left: 0;
  margin-top: 75px;
  list-style: none;
  text-align: center;
  box-sizing: border-box;
  display: none;
  position: fixed;
}

位置fixed基本上会删除文档窗口流中的内容，这样就不会导致与徽标进行任何交互。有关排名fixed here

的更多信息

下拉向下推动徽标

2 个答案: