Hamburger menu

Zaktualizowano: 8 czerwca, 2021 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.

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

https://landpage.co/burger-menu

Możesz pobrać ten landing page, 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 landing page'a. Możesz je stworzyć analogicznie również na widoku desktopowym.

Poniżej przykładowa implementacja:

hamburger menu landing page

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ę 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ń. 

ikona hamburgera landing page

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.

podlinkuj hamburger menu

6. Zaznacz sekcję i nadaj jej klasę “menu-section”.

nadaj sekcji klasę menu

7. Zaznacz ikonę hamburgera i nadaj jej klasę “trigger”.

nadaj klasę ikonie

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. Wejdź w Dashboard > Kody JavaScript danego landing page’a. Kliknij w Dodaj skrypt. Do Kodów JavaScript możesz przejsć także bezpośrednio z poziomu edytora.

dashboard javascript landingi

12. Wklej poniższy skrypt na Stronie głównej, w pozycji Body – na dole. 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://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.

share

Czy ta instrukcja była pomocna?