Cambiar funcion de Menu de CSS a JS o JQuery

[andoencombi]

Hola amigos, necesito que me ayuden en esto.

Tengo un menu en css que funciona a la perfeccion, funciona de la siguiente manera, esta una imagen de una lupa siempre visible, cuando posiciono el cursor sobre la imagen aparecen 2 opciones, buscador de documentos y buscador de fotos, cuando paso por encima de alguna de estas dos opciones aparece otro submenu.

Como lo dije anteriormente funciona a la perfeccion, lo que quiero es que las opciones no aparezcan hasta que el usuario de clic sobre las opciones, me podrian ayudar de favor??

el css es este:

Código PHP:

  .nav{ 
    font-family: Arial, sans-serif; 
    list-style:none; 
    font-size:11px; 
    margin:0; 
padding:0; 
} 
 
.nav > li { 
float:left; 
list-style:none; 
height:25px; 
} 
 
.nav li a { 
font-family: Arial, Helvetica, sans-serif; 
background-color: #e6d6ba; 
color:#741e07; 
display:block; 
padding:0px 5px; 
text-decoration:none; 
} 
 
.nav li .flecha{ 
font-size: 9px; 
padding-left: 10px; 
display: none; 
} 
 
.nav li a:not(:last-child) .flecha { 
display: inline; 
} 
 
.nav li a:hover { 
background-color: #e6d6ba; 
color:#876830; 
text-decoration:none; 
} 
 
.nav li { 
position:relative; 
} 
 
.nav li ul { 
font-family: Arial, Helvetica, sans-serif;     
display:none; 
position:absolute; 
min-width:200px; 
list-style:none; 
margin:0; 
padding:0; 
left:-145px; 
} 
 
.nav li:hover > ul { 
color:#876830; 
display:block; 
background-color:#f4eee4; 
} 
 
.nav li ul li ul { 
left:-286px; 
top:0; 
}  
   

y el codigo del menu es este:

Código PHP:

  <div id="buscarmas"> 
  <ul class="nav" style="z-index:100; position:absolute;"> 
    <li><a href="#"><img src="imagenes/lupamas.gif" width="20" height="20" border="0" /></a> 
      <ul> 
        <li style="padding:10px 0px 10px 0px;"><a href="#" style="padding-top:10px; padding-bottom:10px;">Busqueda avanzada Fotografía</a> 
          <ul> 
            <li>Opcion de Fotografias</li> 
          </ul> 
        </li> 
        <li style="margin:0px 0px 10px 0px;"><a href="#"  style="padding-top:10px; padding-bottom:10px;">Busqueda avanzada Documentos</a> 
          <ul> 
            <li>Opcion de documentos</li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
  </ul> 
</div>  
   

[pzin]

Para eso tendrías que usar JavaScript, no CSS. Con CSS podrías hacerlo, técnicamente, pero de forma práctica no sirve de nada y romperías con toda semántica.

[andoencombi]

ok, ya me lo imaginaba pero pense que alomejor podria hacerse con css, muchas gracias lo pondre en el tema correcto

[pzin]

Iniciado por andoencombi

ok, ya me lo imaginaba pero pense que alomejor podria hacerse con css, muchas gracias lo pondre en el tema correcto

Te lo muevo a ese foro mejor.

[Alexis88]

Supongo que la línea que deseas trasladar a JavaScript es esta:

Código CSS:

.nav li:hover > ul { 
    color: #876830; 
    display: block; 
    background-color: #f4eee4; 
}
 

Si en lugar de mostrar el <ul> con el evento hover (que en JavaScript nativo sería mouseover), quieres hacerlo al darle un clic, simplemente tienes que aplicarle el evento click.

Código Javascript:

Array.prototype.forEach(document.querySelectorAll(".nav li"), function (li){
    li.addEventListener("click", function (){
        var ul = this.getElementsByTagName("ul")[0];
 
        //A partir de aquí, aplicas los mismos estilos de la hoja de estilos
        ul.style.color = "#876830";
        ul.style.display = "block";
        ul.style.backgroundColor = "#f4eee4";
    }, false);
});
 

Saludos