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".

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

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;
}

Na koniec należy dodać poniższy kod JavaScript do zakładki JavaScript w ustawieniach landinga.

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

Od tego momentu w widoku mobilnym powinno działać menu, rozwijające się po naciśnięciu na odpowiednią ikonę.

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.

Did this answer your question?