Question

之前我读过Elijah Manor关于CSS Animated Hamburger Icon的博客，建议您使用 Fontawesome bars 。幸运的是我总是使用Fontawesome但不幸的是，我使用fa-bars来制作动画汉堡包图标让我感到困难，而我现在使用的CSS汉堡包图标是我要求的previously。我怎么能用fa-bars作为动画汉堡包图标？

Answer 1

我使用HTML，CSS和Jquery。有点凌乱。

＆＃13;

$(".hamb").click(function(){
  $(".menu").toggleClass("active");
  $(".spanf ").toggleClass("span1 ");
  $(".spans ").toggleClass("span2 ");
  $(".spant ").toggleClass("span3 ");
});

＆＃13;

.hamb {
  background: #f0f0f0;
  width: 100px;
  height: 100px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.hamb span i {
  width: 50px;
  height: 10px;
  background: black;
  position: absolute;
  left: 25%;
}

.span1 .span2 .span3 i {
  position: absolute;
}

.hamb .spanf:nth-child(1) i {
  top: 20%;
}

.hamb .spans:nth-child(2) i {
  top: 40%;
}

.hamb .spant:nth-child(3) i {
  top: 60%;
}

.span1:nth-child(1) i {
  top: 40% !important;
  transform: rotate(45deg);
}

.span2:nth-child(2) i {
  left: 130px;
}

.span3:nth-child(3) i {
  top: 40% !important;
  transform: rotate(-45deg);
}

.menu {
  position: relative;
  left: -150px;
  top: -17px;
  transition: left 0.3s ease-in-out;
}
.menu ul {
  list-style-type: none;
  position: absolute;
}
.menu ul li {
  font-size: 18pt;
  background: #f0f0f0;
  padding: 5px 10px;
}
.menu ul li:hover {
  background: black;
  color: white;
}

.active {
  left: -40px;
  top: -17px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamb"><span class="spanf"><i></i></span><span class="spans"><i></i></span><span class="spant"><i></i></span></div>
<div class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

＆＃13;

Answer 2

请使用以下css

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

并使用以下jquery

运行它

 $("#nav-toggle" ).click(function(){
this.classList.toggle( "active" );

});

如何使用Fontawesome酒吧动画汉堡包图标

2 个答案: