0

Necesito que en tamaño mobile 768 px el boton de menu se active y active, popr el momento solo hay la opcion de activar.

function mobile(){

  var uno = 1;
  var element = document.getElementById("idMobile");
   
  if(uno > 0){
   document.getElementById("idMobile");
    element.classList.add("mobile");

  return uno;
  } else  {
  // document.getElementById("idMobile");
  element.classList.remove("mobile");
  }

}




   // alert("hola");
    // var mobile = document.getElementsByTagName("ul").style.display = "block";
    // document.getElementsByTagName("p");
    // .style.display = "block";
    // document.getElementById("myDiv").style.borderStyle = "solid";
body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
nav{
    width: 100%;
    background: #00316b;

}
ul{
    width: 80%;
    margin:  0 auto;
    padding: 0;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
ul li:hover{
    background: #e91e63;
}
ul li a{
    color: #fff;
    text-decoration: none;

}
.toggle{
    width:100%;
    padding: 10px 20px;
    background: #001f44;
    text-align: right;
    box-sizing: border-box;
    color: #fff;
    font-size: 30px;
    display: none;
}

@media (max-width:768px){
    .toggle{
        display: block;
    }
    ul{
        width: 100%;
        display: none;
    }
    ul li{
      
        text-align: center;
        display: block;
        
    }
    .mobile{
        display: block;
    }
    
}
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <script src="js.js"></script>
    <title>Menu</title>
</head>
<body>
    
<nav>
    <div class="toggle">
            <i class="fas fa-bars" onclick="mobile()"></i>
    </div>
    <ul id="idMobile">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>





</body>
</html>

2
  • No se entiende muy bien qué es lo que quieres conseguir, ¿quieres que al darle al icono de menú cuando es inferior a 768px, el menú se vuelva a esconder?
    – tevvek
    Commented el 4 abr. 2019 a las 15:04
  • en el tamaño 768 px hay un boton menu, quisiera al darle click me muestre los items y luego en un segundo click se oculte. Commented el 4 abr. 2019 a las 16:24

3 respuestas 3

2

Simplemente lo que deberías hacer en la función mobile seria algo asi:

function mobile(){
  document.getElementById("idMobile").classList.toggle("mobile");
}




   // alert("hola");
    // var mobile = document.getElementsByTagName("ul").style.display = "block";
    // document.getElementsByTagName("p");
    // .style.display = "block";
    // document.getElementById("myDiv").style.borderStyle = "solid";
body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
nav{
    width: 100%;
    background: #00316b;

}
ul{
    width: 80%;
    margin:  0 auto;
    padding: 0;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
ul li:hover{
    background: #e91e63;
}
ul li a{
    color: #fff;
    text-decoration: none;

}
.toggle{
    width:100%;
    padding: 10px 20px;
    background: #001f44;
    text-align: right;
    box-sizing: border-box;
    color: #fff;
    font-size: 30px;
    display: none;
}

@media (max-width:768px){
    .toggle{
        display: block;
    }
    ul{
        width: 100%;
        display: none;
    }
    ul li{
      
        text-align: center;
        display: block;
        
    }
    .mobile{
        display: block;
    }
    
}
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <script src="js.js"></script>
    <title>Menu</title>
</head>
<body>
    
<nav>
    <div class="toggle">
            <i class="fas fa-bars" onclick="mobile()"></i>
    </div>
    <ul id="idMobile">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>





</body>
</html>

2

Simplemente puedes hacer un toggle a la clase .toggle:

function mobile() {
  
  document.getElementById("idMobile").classList.toggle("toggle");
}
body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
nav{
    width: 100%;
    background: #00316b;

}
ul{
    width: 80%;
    margin:  0 auto;
    padding: 0;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
ul li:hover{
    background: #e91e63;
}
ul li a{
    color: #fff;
    text-decoration: none;

}
.toggle{
    width:100%;
    padding: 10px 20px;
    background: #001f44;
    text-align: right;
    box-sizing: border-box;
    color: #fff;
    font-size: 30px;
    display: none;
}

@media (max-width:768px){
    .toggle{
        display: block;
    }
    ul{
        width: 100%;
        display: none;
    }
    ul li{
      
        text-align: center;
        display: block;
        
    }
    .mobile{
        display: block;
    }
    
}
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <script src="js.js"></script>
    <title>Menu</title>
</head>
<body>
    
<nav>
    <div class="toggle">
            <i class="fas fa-bars" onclick="mobile()"></i>
    </div>
    <ul id="idMobile">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</body>
</html>

2

function mobile(){
  var element = document.getElementById("idMobile");
	element.classList.toggle("mobile");
}//end function mobile
body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
nav{
    width: 100%;
    background: #00316b;

}
ul{
    width: 80%;
    margin:  0 auto;
    padding: 0;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
ul li:hover{
    background: #e91e63;
}
ul li a{
    color: #fff;
    text-decoration: none;

}
.toggle{
    width:100%;
    padding: 10px 20px;
    background: #001f44;
    text-align: right;
    box-sizing: border-box;
    color: #fff;
    font-size: 30px;
    display: none;
}

@media (max-width:768px){
    .toggle{
        display: block;
    }
    ul{
        width: 100%;
        display: none;
    }
    ul li{
      
        text-align: center;
        display: block;
        
    }
    .mobile{
        display: block;
    }
    
}
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <script src="js.js"></script>
    <title>Menu</title>
</head>
<body>
    
<nav>
  <div class="toggle">
    <i class="fas fa-bars" onclick="mobile()"></i>
  </div>
  <ul id="idMobile">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portafolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

</body>
</html>
Saludos puedes usar toogle para agregar/remover la clase deseada, para mayor detalle te sugiero revisar: Toogle JavaScript

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.