Animowana ikona mobilnego menu “Hamburgera”

Czas czytania: 2 minut

Tematem jakim zajmę się dzisiaj będzie tzw. Hamburgerowe menu. Jest to menu składające się 3 leżących, równoległych do siebie kresek, przeważnie w ciemnym kolorze.

Obecnie tzw. Hamburgerowe menu stanowi najpopularniejsze rozwiązanie stosowane na responsywnych stronach internetowych. Spotykane jest głównie na urządzeniach mobilnych. W celu ukrycia dużego nie wygodnego menu dostępnego na desktopie.

Na niektórych stronach ikonka ta nie stanowi tylko formy chowanego menu, ale także formę dekoracji. I to właśnie zrobię dzisiaj.

Od czego zacznę!

Tą charakterystyczną ikonkę (3 linie stąd 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.

<div class="container">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

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:

.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

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. Dlatego teraz będziemy modyfikować linię:

<div class="container" onclick="myFunction(this)">

Po wprowadzaniu zmiany kod prezentuje się następująco:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

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

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

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

<script>
function myFunction(x) {
    x.classList.toggle("change");
}
</script>

A tak prezentuje się gotowy kod w codepen

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

Gotowy skrypt

Przykłady wykorzystania kodu:

Powyższy kod wykołatałam do stworzenia prostego chowającego się panelu.

Źródło:

http://www.w3schools.com/howto/howto_css_menu_icon.asp