javascript - 对 Angular 导航

Question

我需要一些帮助，正在尝试开发如下图所示的对 Angular 导航，因为看起来很简单的东西我花了太多时间在上面。我想要发生的是，在单击汉堡菜单时，我需要菜单容器从右到左显示底层菜单内容。我认为我遇到的最大问题之一是处理导航栏更改的方式应该发生，以及菜单容器上的动画，菜单项应该在显示时就位还是应该从中滑出。

总结我的问题。

1. 我如何实现这个设计
2. 我应该复制导航栏部分吗
3. 应如何揭示底层内容

在此方面的任何帮助将不胜感激

下面是我试过的代码

.hamburger {
    z-index: 1001;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    #hamburger {
        z-index: 1;
        position: relative;
        top: 18px;
        left: 25px;
    }
    .line {
        width: 24px;
        height: 2px;
        background-color: #fff;
        display: block;
        margin: 6px auto;
        position: relative;
        z-index: 2;
        transition: all 0.3s ease-in-out;
    }
    &:hover {
        cursor: pointer;
    }
    &:after {
        width: 180px;
        height: 180px;
        display: block;
      
        background: black;
        content: '';
        right: 0;
        top: 0;
        transform: rotate(45deg) translate(-50%, -63%);
    }
}

#hamburger.is-active .line {
    z-index: 1001;
  &:nth-child(2) {
    opacity: 0;
  }
  &:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  &:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

.nav_container {
    width: 200%;
    height: 100%;
    background: black;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    transform: skew(45deg);
    transition: opacity 300ms ease-in-out;
    opacity: 0;
}

.nav_container.is-open {
    display: block;
    opacity: 1;
}

.navigation-menu {
    background-color: transparent;
    pointer-events: none;
    min-height: 100%;
    position: absolute;
    width: 100%;
    // transform: translateX(150%);
    transform: skew(-45deg);

    > * {
        pointer-events: auto;
    }
  
    &--open {
        transform: translateX(0);
        
        & .navigation-menu__bars {
          background-color: transparent;
          
          &::before,
          &::after {
            top: 0;
          }
        
          &::before {
            transform: rotate(45deg);
          }
    
          &::after {
            transform: rotate(-45deg);
          }
        }
        
        .menu-list__item {
          opacity: 1;
        }
        
        $menu-delay: 1s;
        @for $i from 1 through 12 {
          .menu-list__item:nth-child(#{$i}) {
            transition-delay: $menu-delay;
          }
          $menu-delay: $menu-delay + .25s;
        }
    }
}

<div class="hamburger">
    <div id="hamburger"><span class="line"></span><span class="line"></span><span class="line"></span></div>
</div>
<div class="nav_container">
    <nav class="navigation-menu js-nav-menu">
        <div class="navbar__menu">
            <ul>
                <li class='title'><a href="">Home</a></li>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
            </ul>
            <ul>
                <li class='title'><a href="">Home</a></li>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
            </ul>
        </div>
    </nav>
</div>

我的 css 在 scss 中，所以它不会编译，但它给出了我所做的事情的想法，有什么帮助吗？

Answer 1

只需使用 CSS 剪辑路径规则，您就可以为所欲为。 这是 Mozila documentation ，这里你有一个 clip path generator

和平