Hamburger menu

Zaktualizowano: 2 sierpnia, 2022 Autor: Patrycja Szurgacz
share
Spis treści
share
Spis treści

Menu typu hamburger 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. 

4. Wyszukaj menu i wybierz jedną z ikon (możesz też wybrać zupełnie inną ikonę).

Możesz tutaj również dostosować wielkość oraz kolor ikony. Więcej o ikonach dowiesz się z tej instrukcji.

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 zarówno tłem 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ę menu 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 Dodaj własny CSS.

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

9. Wklej poniższy kod CSS w zakładce Strona główna. 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 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?