0

Resulta que tengo este problema introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

si utedes notan cuando le doy mouseleave al submenú todo el nav se desproporciona. Pero cuando abro la página por primera vez trabaja bien. El problema es cuando abro primero modo movil y le doy click al boton para que el menu se despliegue y trabajo dicho evento en modo movil y luego lo redomensiono a pantalla grande es que me ocurre eso.

$(document).ready(function(){

	
		if($(window).width() <=768){

			var contador=1;

			$('.menu-bar').on('click',function(event){
				event.preventDefault();
				if (contador==1) {
					$("nav").animate({
						left: '0'
					});
					contador = 0;
				} else {
					contador = 1;
					$("nav").animate({
						left: '-100%'
					});
				}
			});
		 
			// Mostramos y ocultamos submenus
			
			$('.submenu').click(function(even){
				event.preventDefault();
				event.stopPropagation();
				$(this).children('ul').slideToggle(700);
			});
		
		
	}
	

	
		
	


	
	
});
html{
    box-sizing: border-box;
}

*,*::before,*::after{
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

.clearfix::before,.clearfix::after{
    content: '';
    display: table;
}

.clearfix::after{
    clear: both;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
}

div.menu-bar{
    display: none;
}

header{
    width: 100%;
}

header nav{
    background-color: #023859;
    width: 95%;
    margin: 0 auto;
    max-width: 1100px;
}

header nav ul li{
    display: inline-block;
    position: relative;
}

header nav ul li ul{
    display: none;
}

header nav ul li a{
    display: block;
    padding: 20px;
    color: #fff;
}

header nav ul li:hover{
    background: #E6344A;
} 

header nav ul li i{
    margin-right: 10px;
}

header nav ul li:hover .hijos{
    display: block;
    position: absolute;
    background: #023859;
    width: 100%;
    z-index: 1;
}

header nav ul .submenu li{
    display: block;
}

@media only screen and (max-width:768px){
    body{
        padding-top: 80px;
    }
    div.menu-bar{
        display: block;
        background-color: #E6344A;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    a.btn-menu{
        display: block;
        padding: 25px;
        color: #fff;
        font-size: 25px;
    }
    
    a.btn-menu i{
        float: right;
    }
    header nav{
        height: calc(100% - 80px);
        position: fixed;
        left: -100%;
    }
    
    header nav ul li{
        display: block;
        border-bottom: 1px solid rgba(255,255,255,.5);
    }
    
    header nav ul li:hover .hijos{
        position: relative;
        display: none;
    }
    
    header nav ul li .hijos a{
        margin-left: 30px;
    }
}
<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="script.js"></script>
   
    <title>Document</title>
</head>
<body>
  <header>
      <div class="menu-bar">
          <a href="" class="btn-menu"><i class="fas fa-bars"></i>Menu</a>
      </div>
      <nav>
          <ul>
              <li><a href=""><i class="fas fa-home"></i>Inicio</a></li>
              <li><a href=""><i class="fas fa-shopping-bag"></i>Trabajos</a></li>
              <li class="submenu">
               <a href=""><i class="fas fa-project-diagram"></i>Proyectos <i class="fas fa-angle-down caret"></i></a>
               <ul class="hijos">
                   <li><a href="#">Submenu #1</a></li>
                   <li><a href="#">Submenu #2</a></li>
                   <li><a href="#">Submenu #3</a></li>
               </ul>
              </li>
              <li><a href=""><i class="fas fa-globe-americas"></i>Servicios</a></li>
              <li><a href=""><i class="fas fa-envelope"></i>Contactos</a></li>
          </ul>
      </nav>
  </header>
   
</body>
</html>

Intenté trabajarlo con un condicional que ejecute el evento click solo si el ancho del documento es mayor a 768 pero no funciona. Alguien tiene idea como puedo corregirlo?

1
  • ¿Cuáles serían los pasos para reproducir el problema en el ejemplo mínimo verificable proporcionado? He intentado haciendo click en modo móvil y luego redimensionando pero no consigo replicar el error.
    – Alvaro Montoro
    el 27 nov. 2018 a las 2:57

1 respuesta 1

0

debes colocar el estado siempre a .hijos como position:absolute; no solo cuando se le haga hover
nota: el efecto hover se va a cancelar con el click por el slideToggle

$(document).ready(function(){

	
		if($(window).width() <=768){

			var contador=1;

			$('.menu-bar').on('click',function(event){
				event.preventDefault();
				if (contador==1) {
					$("nav").animate({
						left: '0'
					});
					contador = 0;
				} else {
					contador = 1;
					$("nav").animate({
						left: '-100%'
					});
				}
			});
		 
			// Mostramos y ocultamos submenus
			
			$('.submenu').click(function(even){
				event.preventDefault();
				event.stopPropagation();
				$(this).children('ul').slideToggle(700);
			});
		
		
	}
	

	
		
	


	
	
});
html{
    box-sizing: border-box;
}

*,*::before,*::after{
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

.clearfix::before,.clearfix::after{
    content: '';
    display: table;
}

.clearfix::after{
    clear: both;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
}

div.menu-bar{
    display: none;
}

header{
    width: 100%;
}

header nav{
    background-color: #023859;
    width: 95%;
    margin: 0 auto;
    max-width: 1100px;
}

header nav ul li{
    display: inline-block;
    position: relative;
}

header nav ul li ul{
    display: none;
}

header nav ul li a{
    display: block;
    padding: 20px;
    color: #fff;
}

header nav ul li:hover{
    background: #E6344A;
} 

header nav ul li i{
    margin-right: 10px;
}
.hijos{    position: absolute;}
header nav ul li:hover .hijos{
    display: block;
    background: #023859;
    width: 100%;
    z-index: 1;
}

header nav ul .submenu li{
    display: block;
}

@media only screen and (max-width:768px){
    body{
        padding-top: 80px;
    }
    div.menu-bar{
        display: block;
        background-color: #E6344A;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    a.btn-menu{
        display: block;
        padding: 25px;
        color: #fff;
        font-size: 25px;
    }
    
    a.btn-menu i{
        float: right;
    }
    header nav{
        height: calc(100% - 80px);
        position: fixed;
        left: -100%;
    }
    
    header nav ul li{
        display: block;
        border-bottom: 1px solid rgba(255,255,255,.5);
    }
    
    header nav ul li:hover .hijos{
        position: relative;
        display: none;
    }
    
    header nav ul li .hijos a{
        margin-left: 30px;
    }
}
<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="script.js"></script>
   
    <title>Document</title>
</head>
<body>
  <header>
      <div class="menu-bar">
          <a href="" class="btn-menu"><i class="fas fa-bars"></i>Menu</a>
      </div>
      <nav>
          <ul>
              <li><a href=""><i class="fas fa-home"></i>Inicio</a></li>
              <li><a href=""><i class="fas fa-shopping-bag"></i>Trabajos</a></li>
              <li class="submenu">
               <a href=""><i class="fas fa-project-diagram"></i>Proyectos <i class="fas fa-angle-down caret"></i></a>
               <ul class="hijos">
                   <li><a href="#">Submenu #1</a></li>
                   <li><a href="#">Submenu #2</a></li>
                   <li><a href="#">Submenu #3</a></li>
               </ul>
              </li>
              <li><a href=""><i class="fas fa-globe-americas"></i>Servicios</a></li>
              <li><a href=""><i class="fas fa-envelope"></i>Contactos</a></li>
          </ul>
      </nav>
  </header>
   
</body>
</html>

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.