Animate Mobile Menu Using Custom Code

Animate Mobile Menu Using Custom Code

Do you build sites with Joomla website builder Gridbox and want to impress your site visitors with an eye-catching animation for your mobile menu? Then you are in the right blog post! Because we have added a new tutorial to our box of tips & tricks. We're going to show you how to add attractive animation effects to your mobile menu using custom code.


The mobile menu is a small detail, but all navigation on your site depends on this element. Therefore, in this tutorial, we want to share with you techniques that will add smooth and nice animation to your mobile menu. Pick up one of four available animations and impress your site visitors. Build beautiful sites with Gridbox!


Fullscreen Bubble-In Menu


Fullscreen Bubble-In Menu - Animate Mobile Menu Using CSS


Fullscreen Scale-In Menu


Fullscreen Scale-In Menu - Animate Mobile Menu Using CSS


Skew-In Menu


Skew-In Menu - Animate Mobile Menu Using CSS


Fullscreen Fade-In Down Menu


Fullscreen Fade-In Down Menu - Animate Mobile Menu Using CSS



Custom Code for Mobile Menu

1. Fullscreen Bubble-In Menu

Class Suffix: fullscreen-bubble-in-menu

@media (max-width: 1024px) {
    .fullscreen-bubble-in-menu .main-menu{
        transition: none !important;
        box-sizing: border-box;
        width: 100%;
        right: -100vw;
    }
 
    .fullscreen-bubble-in-menu .main-menu:before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        border-radius: 50%;
        transition: all .7s ;
        width: 0;
        height: 0;
        background: #edbb1c;
    }
 
    .fullscreen-bubble-in-menu .main-menu.visible-menu:before {
        width: 300vh;
        height: 300vh;
        top: -150vh;
        right: -150vh;
        transition: all .7s;
    }
 
    .fullscreen-bubble-in-menu .ba-hamburger-menu .main-menu {
        background-color: transparent !important;
    }
 
    .fullscreen-bubble-in-menu .ba-hamburger-menu .main-menu > * {
        opacity: 0;
        transition: .3s;
    }
 
    .fullscreen-bubble-in-menu .ba-hamburger-menu .main-menu.visible-menu > * {
        transition: .3s .5s;
        opacity: 1;
    }
}

You can change the background color to any other color in CSS code.

  • background: #edbb1c;


2. Fullscreen Scale-In Menu

Class Suffix: fullscreen-scale-in-menu

@media (max-width: 1024px) {
    .fullscreen-scale-in-menu .ba-hamburger-menu >.main-menu {
        box-sizing: border-box;
        height: 100vh;
        left: 0;
        opacity: 0;
        overflow-y: hidden;
        pointer-events: none;
        right: 0%;
        top: 0;
        transition: none;
        width: 100vw;
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu >.main-menu.visible-menu-out {
        animation: close-custom-menu .3s .3s cubic-bezier(0.4,0,0.2,1) both !important;
    }
 
    @keyframes close-custom-menu {
        from {transform: scale(1); opacity: 1;height: 100vh;right: 0%; top: 0;width: 100vw;}
        to {transform: scale(.8); opacity: 0;height: 0;right: 50%;top: 50%;width: 0;left: 50%; padding: 0; }
    }
 
    @keyframes visible-custom-menu {
        from {transform: scale(.8); opacity: 0;height: 0;right: 50%;top: 50%;width: 0;left: 50%;}
        to {transform: scale(1); opacity: 1;height: 100vh; top: 0;width: 100vw; left: 0;right: 0;}
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu >.main-menu.visible-menu {
        animation: visible-custom-menu .5s cubic-bezier(0.4,0,0.2,1) both;
        height: 100vh;
        overflow-y: scroll;
        pointer-events: all;
        right: 0!important;
    }
 
 
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu .nav > li * {
        text-align: center !important;
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu.ba-collapse-submenu li.deeper > span,
    .fullscreen-scale-in-menu .ba-hamburger-menu.ba-collapse-submenu li.deeper > a {
        padding-right: 20px !important;
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu .nav > li ul {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
 
    @keyframes left-in{
        from {
            transform: translateX(-50px);
            opacity: 0;
        }
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu.visible-menu > *:not(.integration-wrapper),
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu.visible-menu .nav > li {
        animation: left-in .3s .5s cubic-bezier(0.4,0,0.2,1) both;
    }
 
    @keyframes right-in{
        from {
            transform: translateX(50px);
            opacity: 0;
        }
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu.visible-menu .nav > li:nth-child(2n){
        animation: right-in .3s .5s cubic-bezier(0.4,0,0.2,1) both;
    }
 
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu.visible-menu-out > *:not(.integration-wrapper),
    .fullscreen-scale-in-menu .ba-hamburger-menu .main-menu.visible-menu-out .nav > li  {
        animation: bounce-out .7s  cubic-bezier(0.4,0,0.2,1) both;
    }
 
    @keyframes bounce-out{
        0%,100%,20%,40%,60%,80%{animation-timing-function:cubic-bezier(.215,.61,.355,1)}
        0%{opacity:1;transform:scale3d(1,1,1)}
        20%{transform:scale3d(.90,.90,.90)}
        40%{transform:scale3d(1.05,1.05,1.05)}
        60%{transform:scale3d(.8,.8,.8)}
        80%{transform:scale3d(1.1,1.1,1.1)}
        100%{opacity:0;transform:scale3d(.3,.3,.3)}
    }
}


3. Skew-In Menu

Class Suffix: skew-in-menu

@media (max-width: 1024px) {
    .skew-in-menu .main-menu{
        transition: none !important;
    }
 
    .skew-in-menu .main-menu:before {
        content: "";
        position: fixed;
        top: 0;
        right: -200vw;
        transition: all .7s;
        width: 0;
        width: 100vw;
        height: 200vh;
        background: #ecff82;
        transform: skew(190deg, 0);
    }
 
    .skew-in-menu .main-menu.visible-menu:before {
        width: 100vw;
        height: 200vh;
        top: -100vh;
        right: 0;
        transition: all .7s;
    }
 
    .skew-in-menu .ba-hamburger-menu .main-menu {
        background-color: transparent !important;
        box-sizing: border-box;
        right: -100vw;
        width: 100%;
    }
 
    .skew-in-menu .main-menu > * {
        opacity: 0;
        transition: .3s;
        transform: translateX(-50px);
    }
 
    .skew-in-menu .main-menu .close-menu {
        transform: translateX(0);
    }
 
    .skew-in-menu .main-menu.visible-menu > * {
        transition: .3s .5s;
        opacity: 1;
        transform: translateX(0);
    }
 
    .skew-in-menu .main-menu .nav {
        transform: skew(190deg, 0);
        width: 90%;
    }
 
    .skew-in-menu .main-menu .nav > li {
        transform: skew(-190deg, 0deg);
    }
    .skew-in-menu .ba-menu-backdrop {
        background: transparent !important;
    }
}


4. Fullscreen Fade-In Down Menu

Class Suffix: fullscreen-fade-in-down-menu

@media (max-width: 1024px) {
    .fullscreen-fade-in-down-menu .ba-hamburger-menu >.main-menu {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 0;
        justify-content: center;
        opacity: 0;
        left: 0;
        right: auto !important;
        transform: translateY(-100vh);
        transition: transform 1s, height 1s, opacity 1s;
        width: 100vw;
    }

    .fullscreen-fade-in-down-menu .ba-hamburger-menu >.main-menu.visible-menu {
        opacity: 1;
        height: 100vh;
        transform: translateY(0);
        transition: transform 1s, height 1s, opacity 1s;
    }

    .fullscreen-fade-in-down-menu .ba-hamburger-menu >.main-menu > * {
        opacity: 0;
        transition: .75s;
    }

    .fullscreen-fade-in-down-menu .ba-hamburger-menu >.main-menu.visible-menu > * {
        opacity: 1;
        transition: .75s;
    }

    .fullscreen-fade-in-down-menu  .ba-hamburger-menu .main-menu .nav > li * {
        text-align: center !important;
    }

    .fullscreen-fade-in-down-menu  .ba-hamburger-menu.ba-collapse-submenu li.deeper > span, 
    .fullscreen-fade-in-down-menu  .ba-hamburger-menu.ba-collapse-submenu li.deeper > a {
        padding-right: 20px !important;
    }
  
    .fullscreen-fade-in-down-menu .ba-menu-backdrop {
        background: transparent !important;
    }
}


How To Animate Mobile Menu?

Step 1: Choose the effect you like

Choose one of the effects to add to your site.

Step 2: Copy JavaScript Code

Copy JavaScript code and paste to the Gridbox Code Editor.


Javascript CSS Editor - Joomla Website Builder Gridbox


document.addEventListener('DOMContentLoaded', function(){
    jQuery('.ba-menu-backdrop, .close-menu i').on('mousedown', function(){
        let $this = this.closest('.ba-item').querySelector('.main-menu');
        $this.classList.add('visible-menu-out');
        setTimeout(function(){
           $this.classList.remove('visible-menu-out');
        }, 750);
    });
});


Step 3: Copy Class Suffix

Copy Class Suffix and paste to the field "Class Suffix" of the Gridbox plugin Menu.

Step 4: Copy CSS Code

Copy CSS code and paste to the Gridbox Code Editor.


Gridbox CSS Editor - Joomla Website Builder Gridbox


Step 5: Save and Check

Save changes. Clear your browser cache and look at results on the frontend.