Animowana ikona „Hamburger” menu

tutoriale

Kategoria wpisu JavaScript, jQuery, Kurs CSS, Kurs HTML, Kursy Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (3 głosów, średnia: 5,00 z 5)
Loading...

Reading Time: 2 minutes

Obecnie tzw. Hamburgerowe menu jest najpopularniejszym rozwiązaniem stosowanym na responsywnych stronach internetowych.

Na wielu z tych stron nie pozostano jednak tylko na tym dodano także ciekawe animacje. Tą charakterystyczną ikonkę (3 linie z tond też porównanie do hamburgera) można wybrać z gotowego zbioru, ale również utworzyć samemu. Co zaprezentuje poniżej wraz z animacją polegającą na zamianie jej w literę „X”. Animacja będzie startować po kliknięciu w symbol rozwijanego menu – czyli za każdym razem gdy ktoś będzie chciał rozwinąć menu.

DEMO

Jak zbudować prostą ikonkę „Hamburgera”

Na początek zaczniemy od samego kodu HTML, który dzięki odpowiedniej oscylacji w CSS zamieni się w nabierze pożądanego przez nas kształtu.

W tej chwili nasza ikonka jest przezroczysta i w żaden sposób nie przypomina tego co jest nam potrzebne. W celu dodania koloru i kształtu przyda się poniższy kod CSS:

Teraz dopiero ikonka będzie wyglądała tak jak menu widywane w telefonach:

Jak widać w efekcie końcowym składa się ona z trzech linii – przypominających hamburgera. Teraz więc przechodzimy do następnego kroku.

Tworzenie animacji hamburgera

W celu uruchomienia animacji / zamiany w literę X po kliknięciu musimy dodać odpowiednią funkcję w JavaScript. W tym celu trzeba zmodyfikować linijkę:

W efekcie kod będzie wyglądał tak:

To na początek nam wystarczy. Jednak nadal musimy utworzyć sam mechanizm oraz zmieniony wygląd ikonki.

Zaczniemy więc od utworzenia wyglądu samej litery „X” z pomocą CSS

Do w pełni działającej zamiany brakuje nam jeszcze skryptu, który będzie wszystko uruchamiał

A tak prezentuje się gotowy kod w codepen

See the Pen change hamburger menu by Aura (@Julka85) on CodePen.0

Gotowy skrypt

Źródło: http://www.w3schools.com/howto/howto_css_menu_icon.asp

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *