Animowana ikona „Hamburger” menu

tutoriale

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



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ż

Animacja w CSS – Transitions, czyli efekty p... Witam w kolejnym moim wpisie poświęconym animacją na stronach internetowych. Jak każdy wie jest to temat dość ciekawy i można o nim jeszcze bardzo duż...
Wyśrodkowanie obrazka lub tekstu w HTML i CSS Wyśrodkowanie tekstu lub ilustracji na stronie internetowej jest jedną z najpopularniejszych metod formatowania dokumentu.  Istnieje kilka sposobów...
Właściwość CSS user-select Właściwość user-select kontroluje możliwość kopiowania tekstu i wyboru obiektu przez użytkownika. Z pomocą tej właściwości można np. zablokować możli...
Właściwość CSS tab-size Właściwość CSS tab-size określa ilość spacji jakie zajmuje tabulator. W HTML znak tabulacji jest zwykle wyświetlany jako pojedynczy znak spacji, z wy...