0

Verán estuve tratando de hacer uno,me dieron ejemplos aquí ,pero la forma en que funcionaban no la encuentro correcta.Lo que quiero decir,es que para volver a cerrar el menú hay que presionar el mismo lugar,o sino se utiliza la función Toggle.me gustaria algun tipo de ejemplo usando removeClass y addClass y que este menú se pueda cerrar clicando en cualquier área de la pagina.No quiero animaciones.tampoco diseño sino la funcionalidad(JQuery).He encontrado ejemplos online hasta los de Boostrap son buenos,pero quiero entender el codigo y que no sea complejo.no quiero Boostrap. Ayuda, Please!!!!

function showMenu(e){
  e.preventDefault();
  $("#menu").slideToggle("fast");
}

function hideMenu(){
  $("#menu").fadeOut("fast");
}

$(document).ready(function(){
  $("li").click(function(){
    $("#menu").hide();
  });
}); 
#menu{
  display: none;
}
.wrapper-menu{
  width: 210px;
  height: 310px;
}
#menu-content:before{
  position: absolute; 
  bottom: 100%; 
  content: ''; 
  height: 0px; 
  width: 0px; 
  border-width: 0 25px 20px 25px; 
  border-style: solid; 
  border-color: gray transparent;
  margin-left:0px; 
}
#menu-content{
  position: relative;
  width: 200px;
  height: 300px;
  background: white;
  box-shadow: 0 0 0.1em gray;
  z-index: 9999;
  margin: auto;
}
#menu-content li {
  list-style: none;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#" onclick="showMenu(event)" onblur="hideMenu(event)" >hola</a>
  <ul id="menu">
    <div class="wrapper-menu">
      <div id="menu-content">
        <li><a href="" >elem1</a></li>
         <li>elem2</li>
        <li>elem3</li>
        <li>elem4</li>
      </div>
    </div>
  </ul>
</div>

9
  • 1
    En mi opinión estás usando mal el sitio. Creo que lo que buscas es una mentoría y Stackoverflow en español no funciona de esa manera. Te recomiendo que visites el chat de manera regular para este tipo de cuestiones. También te invito a que edites tu pregunta e incluyas un ejemplo de tu código.
    – toledano
    el 3 sep. 2016 a las 21:29
  • @toledano Porque mal?hace tiempo me ayudaron con eso,pero me di cuenta que tambien queria esa opcion.
    – luis
    el 3 sep. 2016 a las 21:31
  • 1. ¿Esperas que escriban el código por tí? No hay ningún ejemplo de lo que estás haciendo para resolver tu problema. Atención, no me refiero a que copies el código que tienes, sino que muestres que estás haciendo para resolverlo. 2. Dices que has encontrado ejemplos online, pero no los incluyes, por lo que corres el riesgo de que los repitan. Se específico, no pierdas tu tiempo, ni lo hagas perder a los demás. 3. Es mi opinión, por supuesto si alguien quiere y puede ayudarte, lo hará (aunque mi intención también es ayudarte).
    – toledano
    el 3 sep. 2016 a las 21:36
  • @toledano Listo
    – luis
    el 3 sep. 2016 a las 21:57
  • Me pueden ayudar si o no?
    – luis
    el 4 sep. 2016 a las 4:09

1 respuesta 1

0
Buenas chicos,encontre un ejemplo en  

http://www.w3schools.com/howto/howto_js_dropdown.asp

Así era que estaba buscando uno,pero no imagine que tenia que llevar un código Javascript como ese.

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.