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