Animowana ikona „Hamburger” menu

tutoriale

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



Reading Time: 1 minute

Jak zapewne każdy z was zauważył, że na niektórych stronach internetowych (głównie mobilnych) menu pokazuje się dopiero po kliknięciu w ikonę (trzy linie).

Ikonkę taką (zwaną przez niektórych hamburgerem) można wybrać z gotowego zbioru, ale również utworzyć samemu co z pewnością ułatwi dodanie efektu animacji czyli zamiana jej w literę „X”. Będzie ona następować po kliknięciu w symbol rozwijanego menu.

DEMO

Jak zbudować ikonkę „Hamburgera”

Na początek zaczniemy od samego kodu HTML, który dzięki odpowiedniej oscylacji w CSS zamieni się w nasz obrazek

 

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

Ikonka będzie wyglądała w następujący sposób:

Jak widać w efekcie końcowym składa się ona z trzech lini – przypominających hamburgera. Z tond wzięła się potoczna nazwa Hamburger menu.

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.

Na początek wygląd litery „X” w CSS

 

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

 

Gotowy skrypt

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

Przeczytaj również

Właściwość CSS empty-cells Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dan...
Grafika w Bootstrap 3 Bootstrap podobnie jak w przypadku przycisków posiada różne gotowe wzorce wyświetlania się ilustracji. Znaleźć w nich można nie tylko dodanie efekt...
Własność CSS word-spacing word-spacing jest własnością CSS określającą wielkość odstępów pomiędzy wyrazami występującymi w danym tekście. Może przyjmować zarówno wartości dodat...
Mieszanie kolorów z selektorem mix-blend-mode Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim. Efekt końcowy jest pod...

Dodaj komentarz

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