Animowana ikona „Hamburger” menu

tutoriale

Kategoria wpisu Efekty i skrypty CSS, JavaScript, jQuery, 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ż

Osobne style CSS do Google Chrome Ogólnie przyjmuje się że przeglądarki internetowe takie jak Chrome i Firefox mają takie same albo bardzo podobne style CSS. Czasem jednak zdarza się ż...
Gradient z wykorzystaniem CSS3 jako tło strony Słowo gradient kojarzy nam się zwykle z obrazkiem posiadającym bardzo ciekawą kolorystykę np. przechodzącym z jednej barwy w drugą. Jeszcze niedawn...
Efekt karteczki z dziurką dla Tagów na blogu ̵... Jak pewnie już zauważyliście, albo i nie na moim blogu tagi umieszczone są na takich małych żółtych (symbolicznie) karteczkach z dziurką. Efekt ten je...
Właściwość white-space – działania na spacja... Dzięki właściwości CSS white-space mamy możliwość określić sposób interpretowania przez przeglądarkę internetową "białych znaków" (ang. whitespace) od...