Graphisme et webdesign à Versailles Yvelines – création site internet

Burger menu without popup (right side column)

Creating a fully customizable burger menu (without popup) is possible directly in Elementor. And it only requires two things:

  • Be able to create a header (either with Elementor Pro or with plugins like « Elementor Header & Footer Builder »)
  • Some custom code

Step 1: Creating the template

Before being able to customize the elements of the menu, we must lay the foundations of the template that will be used, and define the ids and classes that will be necessary for its proper functioning:

  • Create a full width section with two columns and a minimum height of 10vh. Give it the ID « header-fix ».
  • Create a second full-width section, with two columns, a minimum height of 100vh, a « stretched » column position and a « middle » vertical alignment. Give it the ID « menu ».

Step 2: Placing the essential elements

Now that the bases of the template are defined, it is necessary to place the few elements needed to use the menu:

  • Select the right column of the « header » section, give it a « end » horizontal alignment and a « burger-container » CSS ID
  • In the « burger-container » column, place 2 images (the « burger » and « close » icons), give them an « inline (auto) » width and assign them the CSS IDs « toggle-open » and « toggle-close » respectively
  • Select the right column of the « menu » section and assign the CSS ID « menu-container » to it

Step 3: Adding CSS

To simplify things and avoid scattering the CSS everywhere, put all the CSS in a single « Custom CSS » (for example, in the page settings by clicking on the gear at the bottom left of the builder).

/*These CSS will make the header fixed on scroll*/
#header-fix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

/*These CSS allow you to display or hide each of the two images depending on the opening state of the menu*/
#burger-container .toggle-close {
    display: none;
    cursor: pointer;
}
#burger-container .toggle-open {
    cursor: pointer;
}
#burger-container.open .toggle-close {
    display: initial!important;
}
#burger-container.open .toggle-open {
    display: none;
}

/*These CSS override some of Elementor's styles and allow the menu to be shifted off the screen when closed and to return to the screen from the right when open*/
#menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 100vw!important;
    opacity: 0;
    z-index: 99;
    transform: translateX(100vw) !important;
    transition: all .5s ease-out;
}
#menu.open {
    opacity: 1;
    transform: translateX(0) !important;
    transition: all .5s ease-out;
}

/*These CSS allow the menu to be always visible in the builder*/
.elementor-edit-mode #menu-tuto {
    position: initial;  
    opacity: 1;  
    transform: translateX(0) !important;
}

Step 4: Adding Javascript

With the CSS styles in place, all that remains is to write the Javascript to make the buttons functional and to be able to reveal the menu. To do this, integrate an HTML widget in your template, after the buttons (in the « menu-container » column for example) and copy/paste this code :

<script>
//Adds the class="open" to the menu when clicking on the burger icon
var toggleBurger = document.getElementById('burger-container');
toggleBurger.addEventListener('click', function (e) {
    var menu = document.getElementById('menu');
    menu.classList.toggle('open');
    toggleBurger.classList.toggle('open');

    e.stopPropagation();
});

//Close the menu when click outside
window.addEventListener('click', function(e){  
    if (document.getElementById('menu-tuto').classList.contains('open')) {
        if (document.getElementById('menu-container').contains(e.target)){
            
            console.log('You clicked inside');
        } else{
            document.getElementById('menu-tuto').classList.toggle('open');
            toggleBurger.classList.toggle('open');
              
            console.log('You clicked outside');
        }
    }  
});
</script>

Step 5: Customize the menu

Now that the functional part is done, all that remains is to customize the menu by defining which widgets to display, the size of the columns, the colors, the fonts, etc.