Hamburger menu

26.01.2019

W tym przykładzie utworzymy tzw. hamburger menu, wyłącznie dla widoku mobilnego. Kod może jednak łatwo zostać użyty także dla pozostałych widoków w Landingach.

Otwórz edytor i przejdź do widoku mobilnego. Musisz utworzyć dwa elementy i ustawić ich widoczność wyłącznie na urządzeniach mobilnych:

  • Element przełączający menu (np. ikona)
  • Menu

Ikona menu jest potrzebna do włączania i wyłączania menu. Może to być dowolna ikona lub inny element. Ważne jest tylko dodanie odpowiedniej klasy dla widżetu. Nasz skrypt używa klasy „burger”.

Burger menu

Następnie należy utworzyć menu. Wystarczy użyć do tego widgetu tekstowego i nadać mu odpowiednią klasę. Nasz skrypt używa klasy „navimob”.

Burger menu

W następnej kolejności trzeba dodać regułę CSS dla menu. Standardowo używamy białego tła oraz padding na 25px, jednak możesz ostylować ten element dowolnie, według własnego uznania.

.navimob {
background: #fff;
padding: 25px;
}

1. W aplikacji przejdź do Dashboard -> Kody Javascript wybranego landinga i wklej poniższy kod w body bottom na stronie głównej.

<script>
$( ".navimob" ).hide();
$( ".burger" ).click(function() {
  $( ".navimob" ).toggle(500);
});
</script>

Od tego momentu na widoku mobilnym zobaczysz menu rozwijające się po naciśnięciu na odpowiednią ikonę.

Burger menu

Rozwijanie menu od góry

Jeśli wolisz, aby Twój element rozwinął się pionowo od góry do dołu, a następnie zwinął ku górze, możesz użyć innej funkcji jQuery – .slideToggle (), zamiast .toggle ().

Twój kod może wyglądać tak:

<script>
$( ".navimob" ).hide();
$( ".burger" ).click(function() {
  $( ".navimob" ).slideToggle(500);
});
</script>

Zwróć uwagę, że można zmienić długość czasu rozwijania i zwijania w obydwu funkcjach .toggle () i .slideToggle (). W tym celu należy ustawić czas w milisekundach. Wystarczy podać odpowiednią wartość liczbową w nawiasie, jak w powyższym kodzie.

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.