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.

Przykładową realizację w platformie Landingi zobaczysz tutaj:

https://landpage.co/burger-menu

Mozesz pobrać tego landinga, a następnie zaimportować go na swoim koncie i dostosować gotowe menu hamburgerowe do swoich potrzeb.

Z instrukcji poniżej 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. 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 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').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. Zapisz zmiany.

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

share

Czy ta instrukcja była pomocna?