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?