Hamburger menu

Last updated: October 27, 2021 Written by: Avatar Justyna
share
Table of contents
share
Table of contents

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:

hamburger menu landing page

Hamburger menu on a landing page

1. Log in to your Landingi account and go to the editor of your landing page. Enter the mobile view.

2. Add a new section, e.g., 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 Change.

change icon landingi

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

choose hamburger icon

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

add links to hamburger menu

6. Select the section and in the right-side toolbar, find the Other tab. Enter menu-section in the Classes field.

7. Select the icon and in the right-side toolbar, find the Other tab. Enter trigger in the Classes field.

icon class hamburger menu

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

When editing, you can go back to Page Settings by clicking on the arrow:

9. In the Add custom styles field paste the CSS code indicated 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. Go to the Dashboard > JavaScript Codes of your landing page. Click Add script. You can also enter the JavaScript Codes tab directly from the editor.

dashboard javascript landingi

12. In the Content field, paste the JavaScript code indicated below, on the Body bottom position on the Main page. More about custom codes you can find in the manual about HTML, CSS, and JavaScript codes.

<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.12.0/underscore-min.js"></script>
<script>
  let editorHeight = $('.menu-section').height()
  let minHeight = ($('.trigger').position().top * 2) + $('.trigger').height()
  $('.menu-section .container').css('height', 'inherit')
  $('.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. Click Add to save the changes.

Enter your landing page on the mobile device and check if it displays correctly.

Logo next to the hamburger menu

If you want your logo to be visible in the same section as the hamburger menu, you have to add a class to it.

1. Click on the image (your logo) and in the right-side toolbar, find the Other tab. Type logo in the Classes field.

2. Publish your landing page again.

Now your logo will be visible when the hamburger menu is both collapsed and expanded.

share

Was this manual helpful?