1

Sucede que estoy haciendo un menú el cual tiene dos subniveles, donde en pantallas mayores a 800px el evento que aplico para mostrarlo es hover y si la pantalla es menor a 800px el evento será click.

Hice un código que funciona parcialmente es decir si al cargar el menú el viewport es mayor a 800px se aplica el evento hover pero si luego se redimensiona el viewport a menos de 800px el evento ya no cambia hasta que se recargue la página, lo mismo sucede si hago el proceso inverso.

Para solucionar esto estuve probando con el método resize() para desencadenar el evento de acuerdo al tamaño del viewport pero sucede que este no se ejecuta hasta que no cambie el tamaño de pantalla del navegador.

Ahora cuando uso resize y cambio el viewport a más de 800px se aplica el evento hover tanto para escritorio como para móvil y al redimensionar supuestamente debería cambiar al evento click pero no lo hace sino por el contrario los submenú se descontrolan, creo que el problema se encuentra en los if ya que realiza una comparación por cada px que cambia el viewport estoy investigando pero no logro dar con la solución.

El código funciona pero solo recargando la página cada vez, si se descomenta las líneas de ambos extremos se ejecutará el método resize pero se altera el funcionamiento de los submenu.

Asimismo dejo el enlace del menú que hice para que puedan probar a detalle lo que menciono líneas arriba. Espero alguien pueda iluminarme aquí el enlace del código.

1 respuesta 1

1

Una forma mas simple de resolver este problema es tener 2 navbar, uno lo muestras en dispositivos móviles y otro en escritorio, y así en lugar de usar código jquery puedes mostrar y ocultar elementos solo con css con:

@media screen and (max-width: 800px)

para resoluciones pequeñas menores a 800px y

@media screen and (min-width: 800px)

para resoluciones mayores a 800px.

Estos navbar los puedes diferenciar con un id, y también habrá que diferenciar las clases de los elementos que contienen (para esto vasta con agregar un "2") y habrá que hacer los respectivos ajustes en el css, pero luego el código jquery queda mas simple.

Puedes ver y comprobar el resultado del código funcionando:

$(document).ready(function (){

  /*HABILITAMOS EL TOGGLE DEL MENÚ*/
  $('.toggle').click(function () {
      $('#nav1').slideToggle();
  });
  /*ESTE ES EL EVENTO CLICK QUE QUIERO APLICAR EN MÓVIL*/
    $('.sub').click(function () {
        $('.submenu').slideDown();
        $(this).mouseleave(function () {
            $('.submenu').slideUp();
        });
    });
    $('.sub-sub').click(function () {
        $('.sub-submenu').slideToggle();
        $(this).mouseleave(function () {
            $('.sub-submenu').slideUp();
        });
    });
/*ESTE EVENTO HOVER LO QUIERO APLICAR SOLO PARA ESCRITORIO PORQUE
    EN MÓVIL NO SE PUEDE SELECCIONAR EL PROYECTO 3 */
    /*SEGUNDO NIVEL*/
    $('.sub2').mouseenter(function () {
        $('.submenu2').slideDown();
    });
    $('.sub2').mouseleave(function () {
        $('.submenu2').slideUp();
    });
    /*TERCER NIVEL*/
    $('.sub-sub2').mouseenter(function () {
        $('.sub-submenu2').slideDown();
    });
    $('.sub-sub2').mouseleave(function () {
        $('.sub-submenu2').slideUp();
    });
})
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.logo {
    display: none;
    justify-content: space-between;
    padding: 1em;
    background: rgb(65, 138, 243);
}
.empresa {
    font-size: 1.5em;
    font-weight: bold;
}
.toggle {
    width: 25px;
    cursor: pointer;
}
ul {
    list-style: none;
}
.menu {
    background: rgb(62, 208, 44);
    display: flex;
    line-height: 2;
}
li {
    flex: auto;
    text-align: center;   
}
.sub, .sub-sub,.sub2, .sub-sub2 {
    position: relative;
}
.submenu, .submenu2 {
    display: none;
    position: absolute;
    background: rgb(212, 52, 186);
    width: 100%;
}
a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 1.3em;
    display: block;
}
a:hover {
    background: rgb(243, 176, 65);
}
/*SUB-SUBMENU NIVEL 3*/
.sub-submenu, .sub-submenu2 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: rgb(44, 208, 186);
    width: 80%;
}
@media screen and (max-width: 800px) {
    #nav1 {
        display: none;
    }
    #nav2 {
         display: none;
    }
    .logo {
        display: flex;
    }
    ul {
        flex-direction: column;
    }
    .menu > li, .menu > li:hover {
        border-bottom: 1px solid red;
    }
    .submenu {
        width: 100%;
        position: static;
    }
    .submenu li:first-child {
        border-bottom: 1px solid red;
    }
    .submenu li:nth-child(2) {
        border-bottom: 1px solid red;
    }
    .sub-submenu {
        width: 100%;
        position: static;
    }
}
@media screen and (min-width: 800px) {
    #nav1{
         display: none;
         visibility: hidden;
    }
    #nav2{
         display: block;
    }
    .logo {
        display: none;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<header>
            <div class="logo">
                <div class="empresa">Diego Gallo</div>
                <span><img src="https://i.postimg.cc/Sxh0mCp8/toggle.png" alt="toggle" class="toggle"></span>
            </div>
            <nav id="nav2">
                <ul class="menu">
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Quienes Somos</a></li>
                    <li class="sub2">
                        <a href="#">Proyectos</a>
                        <ul class="submenu2">
                            <li><a href="#">Proyecto 1</a></li>
                            <li class="sub-sub2">
                                <a href="#">Proyecto 2</a>
                                <ul class="sub-submenu2">
                                    <li><a href="#">HTML5</a></li>
                                    <li><a href="#">CSS3</a></li>
                                    <li><a href="#">Javascript</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Proyecto 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
            <nav id="nav1">
                <ul class="menu">
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Quienes Somos</a></li>
                    <li class="sub">
                        <a href="#">Proyectos</a>
                        <ul class="submenu">
                            <li><a href="#">Proyecto 1</a></li>
                            <li class="sub-sub">
                                <a href="#">Proyecto 2</a>
                                <ul class="sub-submenu">
                                    <li><a href="#">HTML5</a></li>
                                    <li><a href="#">CSS3</a></li>
                                    <li><a href="#">Javascript</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Proyecto 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
            
        </header>
</body>
</html>

Espero que resuelva tu problema, saludos.

1
  • 1
    Genial funciona de maravilla, aunque había contemplado esa opción pensé que era buena idea hacerlo solo con un menú y jQuery pero creo que fue un lío innecesario, gracias por tu tiempo. Commented el 7 ago. 2019 a las 4:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.