So verwenden Sie Fontawesome Bars für animierte Hamburger Icon

Zuvor habe ich den Blog von Elijah Manor über CSS Animated Hamburger Icon gelesen und es wird empfohlen, dafür Fontawesome bars zu verwenden. Glücklicherweise verwende ich immer Fontawesome, aber leider ist es schwierig für mich, Fa-Bars für animierte Hamburger-Symbol zu verwenden, stattdessen benutze ich jetzt das CSS-Hamburger-Icon, das ich previously fragen kann. Wie könnte ich Fassadenbars als animiertes Hamburger-Icon verwenden?So verwenden Sie Fontawesome Bars für animierte Hamburger Icon

Quelle

2017-05-09 Anonymous

Hallo TechGirl. Kannst du hier einen JSFiddle Link einfügen? Im Elijah Manor Blog sind die Animationen in CSS und JS. Beim Klicken fügen Sie eine Klasse hinzu. Active mit css propriérties. – Alfr3d

Verwenden Sie die Funktionsleisten nicht, um ein animiertes Symbol zu erstellen. Wie in [dem Blog-Post, den Sie verlinken] (http://elijahmanor.com/css-animated-hamburger-icon/) erklärt, benötigt die Animation die 3 Balken als separate Elemente (erstellt mit CSS). Das einzelne statische Fa-Bars-Symbol gibt Ihnen nicht die Möglichkeit, seine separaten Teile zu animieren. – phillchill

Ich habe keine Codes mit Fontawesome Bars jetzt statt ich benutze die Codes unter http://StackOverflow.com/Questions/43864619/How-to-Animate-Css-animated-Hamburger-Icon-on-Mouseover. –

freundlich verwenden CSS folgende

#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); 
}

und führen Sie es mit jquery folgenden

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

});

Quelle

2017-05-09 09:04:02 Asfand

Ich verwendete HTML, CSS und JQuery. Irgendwie chaotisch.

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

.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; 
 
}

<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>

Quelle

2017-05-09 20:08:23

So verwenden Sie Fontawesome Bars für animierte Hamburger Icon

Antwort

Verwandte Themen