自定义Boootstrap4.1Toggler动画

我正在尝试向Bootstrap 4.0的Navbar菜单添加自定义菜单切换。我使用的代码来自Codeply HERE。我正在尝试将X切换样式应用于网站的引导导航栏。这是我目前所拥有的。

我在这里做错了什么？在我添加自定义切换之前，这看起来像是狗屎表演，看起来还不错...不确定为什么为什么不起作用？

如果您使用的是最新的引导程序v4.0，则代码笔代码将无法正常工作，因为它使用的是引导程序v3.3。

bootstrap 4.0 navbar文档确实很棒。很多例子。

https://getbootstrap.com/docs/4.0/components/navbar/

当然，一切皆有可能，这是bootstrap 4解决方案。

见萨斯小提琴... https://jsfiddle.net/joshmoto/7syc3hfu/1/

/* remove navbar button stying */
.navbar-toggler {
  background: none;
  border: none;

  /* remove the blue outline when active or focused */
  &:active, &:focus {
    outline: 0;
  }

  /* basic styles for each icon bar */
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0 4px 0;
    transition: all 0.2s;

    /* custom .navbar-dark .icon-bar background */
    .navbar-dark & {
      background: #ffffff;

    }

    /* .navbar open top .icon-bar rotated down 45° */
    &:nth-of-type(1) {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }

    /* .navbar open middle .icon-bar invisible */
    &:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }

    /* .navbar open bottom .icon-bar rotated up 45° */
    &:nth-of-type(3) {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

  }

  /* styles for when .navbar is closed */
  &.collapsed {

    .icon-bar {

      /* .navbar closed top .icon-bar no rotation - straight */
      &:nth-of-type(1) {
          transform: rotate(0);
      }

      /* .navbar open middle .icon-bar visible */
      &:nth-of-type(2) {
          opacity: 1;
          filter: alpha(opacity=100);
      }

      /* .navbar open bottom .icon-bar no rotation - straight */
      &:nth-of-type(3) {
          transform: rotate(0);
      }

    }

  }

}

sass输出此css。

.navbar-toggler {
  background: none;
  border: none;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: 0;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin: 4px 0 4px 0;
  transition: all 0.2s;
}

.navbar-dark .navbar-toggler .icon-bar {
  background: #ffffff;
}

.navbar-toggler .icon-bar:nth-of-type(1) {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .icon-bar:nth-of-type(3) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
  transform: rotate(0);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
  transform: rotate(0);
}

如果您需要CSS版本，请参阅此小提琴。https://jsfiddle.net/joshmoto/9r8ux6p5/