Hamburger menu

Ostatnia aktualizacja: 28.11.2019

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 tej instrukcji dowiesz się, jak zrobić proste menu hamburgerowe na widoku mobilnym Twojego landinga. Możesz je stworzyć analogicznie również na widoku desktopowym.

Poniżej przykładowa implementacja:

hamgurgermenu_PL

Jak stworzyć hamburger menu na swoim landingu?

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

2. Dodaj nową sekcję u samej góry swojego landinga.

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

hamburgermenu_PL1

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

hambuergermenu_PL2

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 za pomocą widgetu tekst (możesz wybrać opcję listy). Rozwijanie i zwijanie menu będzie dostępne po publikacji. Każdą pozycję w menu podlinkuj albo do wybranej sekcji landinga, albo do zewnętrznego adresu URL.

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

hamburgermenu_PL5

6. Nadaj sekcji klasę “menu-section”.

hamburgermenu_PL3

7. Nadaj ikonie hamburgera klasę “trigger”.

hamburgermenu_EN4

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

9. Dodaj poniższy kod CSS; 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. Wyjdź z edytora i wejdź w Dashboard > Kody JavaScript danego landing page’a. Kliknij w Dodaj skrypt.

12. Wklej poniższy skrypt na stronie głównej, na pozycji Body – na dole (body bottom). Więcej na ten temat znajdziesz w instrukcji JavaScript – dodawanie własnych skryptów.

<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script>
<script src='https://underscorejs.org/underscore-min.js'></script>
<script>
  let editorHeight = $('.menu-section').height()
  let minHeight = ($('.trigger').position().top * 2) + $('.trigger').height()
  $('.menu-section').height(minHeight)
  $('.menu-section > div > div').children().not('.trigger').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-section').animate({height: minHeight})
    }
  }
  var burger = _.throttle(burgerControl, 650)
  $('.trigger').click(burger)
</script>

13. Zapisz zmiany.

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

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.