Question

我在代码笔中找到了一个菜单符号图标（用于手机）。

我尝试将此菜单图标与我的<nav>集成，但动画不起作用，也不与菜单内嵌。

这是我创建的codepen：http://codepen.io/anon/pen/ByygvO?editors=101

HTML：

<nav class="site-nav">
  <ul>
    <li>
      <a class="navicon-button x" ng-click="annimateMenu = !annimateMenu" ng-class="{true: 'open'}[annimateMenu]">
          <div class="navicon"></div>
      </a>
    </li>
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
  </ul>
</nav>

SASS / CSS：

.site-nav { 
    display: block;
        height: 48px;  
    background: #4169e1;  
    line-height: 3.0129;  
}
.site-nav li {
  display: inline-block;
  list-style-type: none; 
}
.site-nav li a {
  text-align: center;
  padding-right: 30px;
  padding-left: 30px;
  display: block;
  color: white;
  text-decoration: none; 
}
.site-nav a:hover {
  background-color: #FF6600;
  color: white;
  text-shadow: none; 
}

// Change to watch in slow motion
$duration: .5s;

$size : 100%;
$toggled-size : .75;

$bg : #449A88;
$nav-bg  : #2A2A2A;
$content-bg : #E7E6DD;

.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: $duration/2;
  cursor: pointer;
  user-select: none;
  opacity: .8;
  float: left;

  .navicon:before, .navicon:after {
    transition: $duration/2;
  }

  &:hover {
    transition: $duration;
    opacity: 1;

    .navicon:before, .navicon:after {
      transition: $duration/2;
    }

    .navicon:before { top: .825rem; }
    .navicon:after { top: -.825rem; }
  }
}

.navicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: $content-bg;
  transition: $duration;
  border-radius: 2.5rem;

  &:before, &:after {
    display: block;
    content: "";
    height: .3125rem;
    width: 2.5rem;
    background: $content-bg;
    position: absolute;
    z-index: -1;
    transition: $duration $duration/2;
    border-radius: 1rem;
  }

  &:before { top: .625rem; }
  &:after { top: -.625rem; }
}

.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
  top: 0 !important;
}

.open .navicon:before,
.open .navicon:after {
  transition: $duration;
}

.open.x {
  .navicon {
    background: transparent;

    &:before { transform: rotate(-45deg); }
    &:after { transform: rotate(45deg); }
  }
}

Answer 1

增加菜单图标上的z-index以阻止它被掩埋。

http://codepen.io/anon/pen/jEEgPg

.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: $duration/2;
  cursor: pointer;
  user-select: none;
  opacity: .8;
  float: left;
  z-index: 99;

  .navicon:before, .navicon:after {
    transition: $duration/2;
  }

  &:hover {
    transition: $duration;
    opacity: 1;

    .navicon:before, .navicon:after {
      transition: $duration/2;
    }

    .navicon:before { top: .825rem; }
    .navicon:after { top: -.825rem; }
  }
}

.navicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: $content-bg;
  transition: $duration;
  border-radius: 2.5rem;
  z-index: 99;

  &:before, &:after {
    display: block;
    content: "";
    height: .3125rem;
    width: 2.5rem;
    background: $content-bg;
    position: absolute;
    z-index: -1;
    transition: $duration $duration/2;
    border-radius: 1rem;
  }

  &:before { top: .625rem; }
  &:after { top: -.625rem; }
}

导航内部菜单动画不起作用

1 个答案: