WORDPRESS

menú efecto animado, wordpress 203, tutorial español

En SYSPA SOCIAL veremos como crear un menú animado increíble, donde tanto el botón de acceso, como el propio menú y sus opciones tienen animaciones increíbles.

Este impresionante menú tiene animación tanto en el botón de apertura, como en el propio menú, también en los objetos que lo componen, toda una maravilla!.

No te lo podes perder, solo mira el tutorial, paso a paso y realiza este impresionante componente para tu pagina web.

Principales puntos del tutorial wordpress menú efecto animado

  • generamos la estructura básica del menú.
  • Incorporamos los botones para abrir y cerrar el menu.
  • Insertamos los objetos dentro del menu.
  • Pegamos el código para generar la animacion.
  • Probamos todo lo realizado.

Videos relacionados con wordpress menú efecto animado

🖐️ como hacer efecto paralax en elementor free, Parallax Effect, wordpress 80, tutorial español.

Aprenderemos como crear fácilmente el efecto paralax utilizando elementor gratis, dentro de nuestra pagina web wordpress.

WP 080 1024px WEBP 2 efector paralax elementor - syspa social

🖐️ Como hacer efecto Neón con elemetnor free, wordpress 95, tutorial o curso español.

Aprenderemos como crear el efecto neón con elementor dentro de tu pagina web wordpress.

1024PX wp 095 efeto neon elementor free wordpress syspa V1

🖐️ Como hacer efecto agua en elementor free, wordpress 96 tutorial o curso en español.

Aprenderemos como hacer un espectacular efecto agua en elementor para que que puedas usarlo en tu pagina web wordpress.

1024px WP 096 efeto agua elementor free wordpress syspa v1

🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.

Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y dominio gratis.

1024px WP 35 mejor hosting wordpress sered - syspa

Código Utilizado

Menú animado

<style>
.mdw-side-menu-area{
    --hide-on-scroll: true;
    --hide-on-scroll-amount: 100;
    --menu-icon-width: 48px;
    --menu-icon-gap: 15px;
}
.mdw-side-menu-area .mdw-hide-on-scroll{
    transition: all 0.3s ease-in-out;
}
.mdw-side-menu-area .mdw-hide-on-scroll.hide{
    opacity: 0;
    pointer-events: none;
}
.mdw-side-menu-area .mdw-side-menu-button{
    cursor: pointer;
    height: var(--min-height,45px);
    overflow: hidden !important;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button{
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.mdw-side-menu-area.open .mdw-side-menu-button .elementor-widget-button{
    transform: translateY(-100%);
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button{
    height: var(--min-height,45px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-icon{
    margin: 0;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-content-wrapper{
    perspective: 6em;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-text:nth-child(1){
    transform-origin: top;
    transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(1){
    opacity: 0;
    transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-text:nth-child(2){
    position: absolute;
    opacity: 0;
    transform: rotateX(-90deg) scaleX(.9) translate3d(0, 10px, 0);
    transform-origin: bottom;
    transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(2){
    opacity: 1;
    transform: rotateX(0deg) scaleX(1) translateZ(0);
    transition: transform .75s cubic-bezier(.645,.045,.355,1), opacity .35s linear .3s;
}
.mdw-side-menu-area:not(.open-arrow) .mdw-side-menu{
    pointer-events: none;
}
.mdw-side-menu-area .mdw-side-menu:before{
    top: 0;
    right: 0;
    left: unset;
    transition: all 0.75s cubic-bezier(.76,0,.24,1);
}
.mdw-side-menu-area:not(.open) .mdw-side-menu:before{
    height: var(--button-height,45px);
    width: var(--button-width,110px);
    transform: translate(calc(-1*var(--button-right,25px)), var(--button-top,25px));
}
.mdw-side-menu-area:not(.anim) .mdw-side-menu:before{
    transition: none;
    opacity: 0;
}
.mdw-side-menu-area .mdw-side-menu .e-con::-webkit-scrollbar,
.mdw-side-menu-area .mdw-side-menu .e-container::-webkit-scrollbar{
    display: none;
}
.mdw-side-menu-area .mdw-side-menu .e-con,
.mdw-side-menu-area .mdw-side-menu .e-container{
    overflow-y: auto;
    max-height: calc(100vh - 20px - var(--margin-block-start,113px));
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item,
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item a{
    perspective: calc(3*48px);
    perspective-origin: bottom;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item{
    margin-top: 0 !important;
    padding-top: var(--padding-top);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:first-child{
    padding-top: 0;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item a{
    outline: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon{
    width: var(--menu-icon-width,48px);
    height: calc(0.6*var(--menu-icon-width,48px));
    align-items: center;
    padding-right: var(--menu-icon-gap,15px);
    overflow: hidden;
    opacity: 0;
    box-sizing: content-box;
}
.mdw-side-menu-area.open-arrow .mdw-side-menu .elementor-icon-list-icon{
    opacity: 1;
    transition: all 0s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + 0.55s);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i{
    width: 100% !important;
    height: 0.1em;
    background: currentColor;
    position: relative;
    margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
    transition: all .65s cubic-bezier(.215,.61,.355,1) !important;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon svg{
    display: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:hover .elementor-icon-list-icon i{
    margin-left: -0.07em;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:before,
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:after{
    content: "";
    position: absolute;
    width: 40%;
    transform: rotate(45deg) translateX(0.05em);
    transform-origin: right center;
    height: 0.1em;
    background: currentColor;
    right: 0;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:after{
    transform: rotate(-45deg) translateX(0.05em);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-text{
    transform: rotateX(90deg) translate3d(0,60px,0);
    opacity: 0;
    transition: transform 0s linear .45s, opacity 0.3s linear !important;
    transform-origin: center bottom;
    padding-left: 0 !important;
    max-width: calc(100% - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon + .elementor-icon-list-text{
    margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:hover .elementor-icon-list-text{
    margin-left: 0;
}
.mdw-side-menu-area.open-instant .mdw-side-menu .elementor-icon-list-text{
    transform: rotateX(0deg);
    opacity: 1;
    transition: transform .65s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + .55s), opacity .35s linear calc(var(--index,0) * .1s + .55s), margin-left .65s cubic-bezier(.215,.61,.355,1) !important;
}
.mdw-side-menu-area .mdw-side-menu-social{
    display: block;
    background: none;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-widget-empty-icon{
    display: none;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item{
    width: 47%;
    float: left;
}
.mdw-side-menu-area .mdw-side-menu-social a{
    display: inline-block;
    width: auto;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-text{
    transform: translate3d(0,100%,0);
    transition: transform 0s linear .45s, opacity 0.3s linear;
    max-width: 100%;
}
.mdw-side-menu-area.open-instant .mdw-side-menu-social .elementor-icon-list-text{
    transition: opacity .45s linear 0s, transform .65s cubic-bezier(.215,.61,.355,1) 0s !important;
    transition-delay: calc(var(--index)*.1s + .7s) !important;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-text:after{
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: currentColor;
    transform: scaleX(0%);
    transform-origin: left;
    transition: all 0.75s cubic-bezier(.645,.045,.355,1);
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item:hover .elementor-icon-list-text:after{
    transform: scaleX(100%);
}

@media (max-width:767px){
.mdw-side-menu-area{
    --menu-icon-width: 38px;
    --menu-icon-gap: 10px;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item {
    width: 50%;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!MDWNonce108){
var MDWNonce108 = true
var $ = jQuery
$(document).ready(function(){

function getCSS(el, property){
    return getComputedStyle(el.get(0)).getPropertyValue(property)
}

function setCSS(el, property, value){
    el.each(function(i){
        el.get(i).style.setProperty(property, value)
    })
}

function setSmallState($this){
    var button = $this.find('.mdw-side-menu-button'),
        mainMenu = $this.find('.mdw-side-menu'),
        buttonRight = (parseFloat(getCSS(button, 'right')) - parseFloat(getCSS(mainMenu, 'right'))) + 'px',
            buttonTop = (parseFloat(getCSS(button, 'top')) - parseFloat(getCSS(mainMenu, 'top'))) + 'px',
        buttonHeight = button.height(),
        buttonWidth = button.width()
        
    setCSS($this, '--button-right', buttonRight)
    setCSS($this, '--button-top', buttonTop)
    setCSS($this, '--button-height', buttonHeight + 'px')
    setCSS($this, '--button-width', buttonWidth + 'px')
    
    $this.find('.mdw-side-menu .elementor-widget-icon-list').each(function(i){
        var paddingBottom = getCSS($(this).find('.elementor-icon-list-item').eq(0), 'padding-bottom')
        setCSS($(this).find('.elementor-icon-list-item'), '--padding-top', paddingBottom)
    })
}

$(window).on('load resize', function(){
$('.mdw-side-menu-area').each(function(){
    setSmallState($(this))
})
})

$('.mdw-side-menu-area').each(function(){

    var $this = $(this)
    setSmallState($this)
    setTimeout(function(){
        $this.addClass('anim')
    },100)
    
    $(this).find('.mdw-side-menu .elementor-icon-list-item').each(function(i){
        setCSS($(this), '--index', i)
        var icon = $(this).find('.elementor-icon-list-icon')
        if(icon.length && !icon.find('i').length){
            icon.append('<i aria-hidden="true" class="fas fa-arrow-right"></i>')
        }
    })
})

$('.mdw-side-menu-button .elementor-widget-button').each(function(){
    var wrapper = $(this).find('.elementor-button-content-wrapper'),
    text = $(this).find('.elementor-button-text')
    text.clone().appendTo(wrapper)
})

var clickLock = false

$('.mdw-side-menu-button').on('click', function(){
    if(clickLock) return
    var $this = $(this),
        menu = $this.closest('.mdw-side-menu-area'),
        button = $this.find('.elementor-widget-button')
        clickLock = true
    if(menu.hasClass('open')){
        button.eq(1).removeClass('open')
        menu.removeClass('open-arrow')
        setTimeout(function(){ menu.removeClass('open-instant') },300)
        setTimeout(function(){ menu.removeClass('open') },500)
        setTimeout(function(){ button.eq(0).removeClass('open') },750)
    }else{
        button.eq(0).addClass('open')
        setTimeout(function(){ menu.addClass('open open-instant open-arrow') },500)
        setTimeout(function(){ button.eq(1).addClass('open') },750)
    }
    setTimeout(function(){ clickLock = false },750)
})

$('.mdw-side-menu-button a').on('click', function(e){
    e.preventDefault()
})

$('body').on('click', function(e){
    $('.mdw-side-menu-area').each(function(){
        if($(this).hasClass('open-instant') && !$(e.target).closest('.mdw-side-menu').length && !$(e.target).closest('.mdw-side-menu-button').length){
            $(this).find('.mdw-side-menu-button').trigger('click')
        }
    })
})

$(window).on('scroll', function(){
    $('.mdw-hide-on-scroll').each(function(){
        var offset = isNaN(parseFloat(getCSS($(this), '--hide-on-scroll-amount'))) ? parseFloat(getCSS($(this), '--hide-on-scroll-amount')) : 100
        if(getCSS($(this), '--hide-on-scroll').trim() == 'true'){
            if($(window).scrollTop() > offset){
                $(this).addClass('hide')    
            }else{
                $(this).removeClass('hide')
            }
        }
    })
})
})
}
</script>
suscribete syspa

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.

Tutoriales WordPress