Menú de ancho completo con Elementor Pro
Imagina el menú principal de tu sitio web con un ancho completo, es decir, que abarca toda tu pantalla y que al acercar el mouse a cada elemento del menú, éste cambie la imagen de presentación de esa sección en específico, piensa en las inmensas posibilidades y pongámonos manos a la obra.
Antes de continuar debes tener presente que todo lo que aprenderás en este artículo solo podrás aplicarlo bajo una licencia de Elementor PRO, al ser cliente en Nodored, obtendrás precios especiales si deseas adquirir la licencia, conoce nuestros planes de hosting.
¿Por qué crear un menú de ancho completo con elementor?
Los menús tradicionales aunque siguen siendo muy útiles, tienden a ser aburridos y no permiten presentar la ifnormación relevante de tu sitio web de forma atractiva.
Si deseas que tu marca transmita alegría, creatividad y confianza, el tipo de menú que abarca toda la pantalla es un gran elemento para lograrlo.
Por ejemplo, si tienes una una tienda en línea puedes utilizar esta funcionalidad para destacar los elementos más importantes de tu eCommerce o si por el contrario ofreces servicios, sería mucho más fácil presentar la información en una sección interactiva completamente llamativa.
Código css y JavaScript para crear un menú de ancho completo con elementor
Fragmento de código CSS en el contenedor del menú (mdw-image-menu):
selector{
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
--h: var(--min-height);
}
selector.showing{
opacity: 1;
pointer-events: auto;
}
selector .elementor-widget-icon-list ul li{
opacity: 0;
transform: translateY(30px) scaleY(1.1) skewY(10deg);
}
selector.showing .elementor-widget-icon-list ul li{
opacity: 1;
transform: none;
transition: all 0.5s ease-in-out calc(0.2s + var(--index,1)*0.1s);
}
selector .mdw-menu-right,
selector .mdw-menu-close{
opacity: 0;
}
selector.showing .mdw-menu-right,
selector.showing .mdw-menu-close{
opacity: 1;
transition: all 0.5s ease-in-out 0.3s;
}
.mdw-menu-open,
.mdw-menu-close{
cursor: pointer;
}Fragmento de código JavaScript para el menú de ancho completo:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
function hoveDefault(){
$('.mdw-menu-left .elementor-icon-list-text').eq(0).trigger('mouseover')
}
function openMenu(){
$('.mdw-image-menu').addClass('showing')
}
function closemenu(){
$('.mdw-image-menu').removeClass('showing')
setTimeout(hoveDefault, 500)
}
$('.mdw-image-menu').find('.elementor-widget-icon-list ul li').each(function(){
var index = $(this).index()+1
$(this).css('--index', index)
})
$('.mdw-menu-open').on('click', openMenu)
$('.mdw-menu-close').on('click', closemenu)
/* If Link is #id then Close Menu */
$('.mdw-menu-left a').on('click', function(e){
var link = $(this).attr('href')
if(link){
if(link == '#'){
e.preventDefault()
}
if( link.length > 1 && link.startsWith('#') ){
closemenu()
}
}
})
/* Image and Color Change on Menu Item Hover */
$('.mdw-menu-left .elementor-icon-list-text').hover(function(e){
var $this = $(this),
index = $this.closest('.elementor-icon-list-item').index(),
currentImage = $('.mdw-menu-right .elementor-widget-spacer').eq(index),
color = currentImage.find('.elementor-widget-container').css('background-color')
$this.closest('.mdw-image-menu').css('background-color', color)
if(!currentImage.length) return
$this.closest('.elementor-icon-list-items').find('.elementor-icon-list-text').removeClass('active')
if(e.originalEvent){ $this.addClass('active') }
currentImage.siblings('.elementor-widget-spacer').removeClass('active')
currentImage.addClass('active')
}, function(){})
hoveDefault()
})
/* Adjust alignment of Left side Menu */
$(window).on('load resize', function(){
$('.mdw-menu-left').each(function(){
var containerHeight = $(this).height(),
menuHeight = $(this).find('.elementor-widget-icon-list').outerHeight()
if( menuHeight > containerHeight ){
$(this).addClass('overflow')
}else{
$(this).removeClass('overflow')
}
})
})
</script>Fragmento de código CSS en el contenedor derecho del menú (mdw-menu-right):
selector .elementor-widget-spacer{
opacity: 0;
transition: all 0.4s ease-in-out;
}
selector .elementor-widget-spacer:nth-child(1),
selector .elementor-widget-spacer.active{
opacity: 1;
}
.mdw-menu-close .elementor-widget-divider{
width: 100% !important;
flex-grow: 0;
}
@media(max-width:767px){
selector{
position: absolute;
height: 100%;
z-index: 0;
}
}
Fragmento de código CSS en el widget de lista de iconos:
selector{
--hover-color: #ffffff;
--mobile-color: #000000;
--mobile-background: #ffffff;
}
selector .elementor-icon-list-text{
transition: all 0.3s ease-in-out;
}
selector .elementor-icon-list-text.active{
color: var(--hover-color, #fff);
}
selector a:focus{
outline: none;
}
@media (max-width: 767px){
selector .elementor-icon-list-text{
background: var(--mobile-background, #fff);
padding: 8px 10px;
}
selector .elementor-icon-list-text,
selector .elementor-icon-list-text.active{
color: var(--mobile-color, #000) !important;
}
}
Fragmento de código CSS en el contenedor izquierdo del menú (mdw-menu-left):
selector{
height: var(--h);
}
selector.overflow::-webkit-scrollbar {
display: none;
}
selector.overflow{
justify-content: flex-start;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
selector .elementor-widget-html{
display: none;
}Si has seguido los pasos del video entonces acabas de lograr un menú de ancho completo muy bonito, interactivo, responsivo, de grandes proporciones y alcances.
Te invito a continuar practicando y ver el turorial cuantas veces sea necesario, recuerda que practicando es como lograrás aprender y fortalecer el conocimiento que acabas de adquirir.
Si tienes preguntas recuerda que estoy siempre dispuesto a responder a todas tus preguntas en nuestro foro de WordPress.
