Hamburger menu

Last Updated: 11.03.2019

In this example, a hamburger menu will be created for mobile viewport only. However, it can be used for every viewport in Landingi, with ease.

Open the editor and go to mobile view. You need to create two elements, and set their visibility to mobile only:

  • Menu icon
  • Menu itself

The menu icon is required to toggle the menu in and out. It can be every icon you want or some other element as well. The key to making it work is to add an appropriate class for the widget. Our script uses “burger” class name.

Burger menu

Next, you need to create a menu. It is enough simply to use the text widget, and again, a class is required. Here we use “navimob” class.

Burger menu

Now it is time to add a CSS rule for the menu. Feel free to modify the rule as you please. As a default, I use a white background and padding of 25px.

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

1. In the app, go the Dashboard -> Javascript codes tab of the chosen landing page, add a new script and paste the code below in the body bottom of the main page.

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

From now on, the menu should be hidden by default and click on a hamburger icon should unfold it or hide it.

Burger menu

Unfolding from above

If you prefer your element to unfold vertically from the top to the bottom and then fold back to the top, you can use another jQuery function – .slideToggle(), instead of .toggle().

Your code should look like the script below.

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

Please notice that you can change the time length of unfolding and folding in both .toggle() and .slideToggle() functions. You need to set time in milliseconds to do so. Just input adequate numerical value into the bracket, like in my example code.

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.