Huge Performance Improvements, CSS Units and More
Huge Performance Improvements, CSS Units and More
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!
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.
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)}
}
}
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;
}
}
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;
}
}
Choose one of the effects to add to your site.
Copy JavaScript code and paste to the Gridbox Code Editor.
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);
});
});
Copy Class Suffix and paste to the field "Class Suffix" of the Gridbox plugin Menu.
Copy CSS code and paste to the Gridbox Code Editor.
Save changes. Clear your browser cache and look at results on the frontend.