Hamburger menu

Zaktualizowano: 24 stycznia, 2022 Autor: Avatar Justyna
share
Spis treści
share
Spis treści

Menu hamburgerowe to popularna forma nawigacji, spotykana najczęściej na widokach mobilnych. Po kliknięciu w ikonę (zazwyczaj są to trzy poziome kreski) wyświetla się rozwijane menu.

Z instrukcji poniżej dowiesz się, jak zrobić proste menu hamburgerowe na widoku mobilnym Twojego landing page'a. Możesz je stworzyć analogicznie również na widoku desktopowym.

Hamburger menu na landing page'u

1. Zaloguj się do platformy Landingi i przejdź do edytora landing page’a. Wejdź w widok mobilny.

2. Dodaj nową sekcję, np. u samej góry strony.

3. Dodaj ikonę do tej sekcji, przeciągając widget ikony w wybrane miejsce. Zaznacz ikonę, a następnie kliknij Zmień. 

4. Z listy dostępnych ikon wybierz fa-bars.

landingi wybierz ikone

Możesz dostosować m. in. wielkość oraz kolor ikony, korzystając z opcji widgetu w panelu po prawej.

5. W nowo utworzonej sekcji stwórz swoje menu nawigacyjne. Możesz je stworzyć z dowolnych elementów i widgetów. W naszym przykładzie wykorzystaliśmy widget Tekst. Rozwijanie i zwijanie menu będzie dostępne po publikacji. Każdą pozycję w menu podlinkuj albo do wybranej sekcji landing page'a, albo do zewnętrznego adresu URL.

Tło sekcji będzie tłem zarówno dla wąskiej belki u góry landing page'a (kiedy menu jest “zwinięte”), jak i tłem rozwijanego menu.

6. Zaznacz sekcję i w toolbarze po prawej stronie odszukaj zakładkę Inne. Wpisz menu-section w polu Klasy.

7. Zaznacz ikonę hamburgera i w toolbarze po prawej stronie odszukaj zakładkę Inne. Wpisz trigger w polu Klasy.

8. Wejdź w Ustawienia strony w panelu bocznym po prawej stronie, a następnie kliknij w przycisk Własny CSS.

W trakcie edycji do Ustawień strony wrócisz, klikając na strzałkę:

9. Wklej poniższy kod CSS w polu Dodaj własne style. Jeśli masz tam również inne kody, dodaj go nad nimi, u samej góry (reguła @import użyta w naszym kodzie nie może się znajdować pod innymi kodami CSS).

@import 'https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/animate.css';
.trigger {
	cursor: pointer !important;
}

.animated {
	-webkit-animation-duration: .35s !important;
	animation-duration: .35s !important -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

10. Kliknij w Zapisz i zamknij, a następnie opublikuj landing page’a.

11. Rozwiń menu edytora po lewej stronie i przejdź do zakładki Kody JavaScript.

12. Wklej poniższy skrypt w polu Treść na Stronie głównej, w pozycji Body – na dole. Więcej na ten temat znajdziesz w instrukcji o dodawaniu własnych kodów HTML, CSS i JavaScript.

<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.12.0/underscore-min.js"></script>
<script>
  let editorHeight = $('.menu-section').height()
  let minHeight = ($('.trigger').position().top * 2) + $('.trigger').height()
  $('.menu-section .container').css('height', 'inherit')
  $('.menu-section').height(minHeight)
  $('.menu-section > div > div').children().not('.trigger').not('.logo').addClass('menu wow')
  $('.menu').hide()
  new WOW().init()
  function burgerControl() {
    $('.trigger').toggleClass('fa-bars fa-times')
    if ($('.trigger').hasClass('fa-times')) {
      $('.menu-section').animate({height: editorHeight})
      $('.menu').removeClass('bounceOutLeft')
      $('.menu').fadeIn()
      $('.menu').addClass('fadeInLeftBig')
    } else {
      $('.menu').removeClass('fadeInLeftBig')
      $('.menu').addClass('bounceOutLeft')
      $('.menu').hide()
      $('.menu-section').animate({height: minHeight})
    }
  }
  var burger = _.throttle(burgerControl, 650)
  $('.trigger').click(burger)
</script>

13. Kliknij Dodaj, aby zapisać zmiany.

Wejdź na swoją stronę na urządzeniu mobilnym i sprawdź, czy menu hamburgerowe wyświetla się prawidłowo.

Logo w menu hamburgerowym

Jeżeli chcesz, aby w sekcji, w której znajduje się menu hamburgerowe, było widoczne także Twoje logo, musisz nadać mu odpowiednią klasę.

1. Kliknij w obraz, który jest Twoim logo, i w toolbarze po prawej stronie odszukaj zakładkę Inne. Wpisz logo w polu Klasy.

2. Ponownie opublikuj landing page'a.

Dzięki temu logo będzie cały czas widoczne, niezależnie od tego, czy menu jest zwinięte czy rozwinięte.

share

Czy ta instrukcja była pomocna?