Hamburger menu

Last Updated: 06 Mar 2020

The hamburger menu is a popular type of navigation, often found on mobile views. After clicking on the icon (three horizontal lines) the drop-down menu displays.

An example of implementation in Landingi platform:

https://landpage.co/burger-menu

You can download this landing page, import it on your account and customize the ready-to-use hamburger menu to your needs.

From this manual, you will learn how to create a simple hamburger menu on the mobile view of your landing page. It is possible also to create this menu type at the desktop view.

The exemplary implementation below:

hamgurgermenu_PL

How to create a hamburger menu on your landing page?

1. Log in to Landingi platform and go to the edition of chosen landing page. Enter the mobile view.
2. Add a new section on the top of your landing page.

3. Add an icon to this section – drag and drop the icon widget to the chosen place. Then select the icon and click on change.

hamburgermenu_EN1

4. From the list of available icons choose the ‘fa-bars’.

hamburgermenu_EN2

You can adjust, e.g., icon size or color by using the widget options on the right panel.

5. Make a navigation menu in the newly created section. You can create them from any elements and widgets. In our example, we used the text widget. Expanding and collapsing will be available after publication. Every menu position link to the landing page section or to the outside URL address. The section background will be the background for both the narrow bar at the top of your landing page (visible when the menu is collapsed) and the expanded menu.

hamburgermenu_EN5

6. Give your section the class ‘menu-section’.

hamburgermenu_EN3

7. Give your icon the class ‘trigger’.

hamburgermenu_EN4

8. Enter the Page Settings on the right panel and click on Custom CSS button.

9. Add the CSS code below; if you have also other codes here, add it above them, at the top (@import rule in our code cannot be placed below other CSS codes).

@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. Click on save and close and publish your landing page.

11. Leave the editor and go to the Dashboard > JavaScript codes of your landing page. Click on Add script.

12. Paste the JavaScript code below, on the body bottom position on the main page. More about custom JS codes you can find in the manual Your own JavaScript.

<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').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. Save the changes.

The hamburger menu already functions on your landing page. Enter your webpage on the mobile device and check if it displays correctly.

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.