Como se hace un menu desplegable con imagenes vectoriales usando solo css Antes de nada dire que soy muy novato y seguramente no es la mejor manera de hacerlo o incluso el codigo se pueda aprovechar de mejor manera, pero por ahora, esto es lo mejor que puedes encontrar, ya que no encontre ninguna informacion al respecto.
Por supuesto si alguien quiere mejorarlo, optimizarlo, o conoce alguna manera mejor que lo exponga.
Dejo aqui la etiqueta svg que hay que poner en linea en el html.
Código HTML:
Ver original
Dejo tambien el archivo css.
Código CSS:
Ver original
Seguro que direis que con javascript el codigo es mas corto e incluso funcionara mejor.
El porque usar css, es proque si es el menu de navegacion de la pagina, es mejor que sea con css, ya que si alguien tuviera el javascript deshabilitado, no podria navegar por nuestras paginas.
El ejemplo es muy simple, porque solo es una prueva.
Aqui uno de los problemas que pasan, es que hay que repetir algo de codigo en el html, puesto que css, no admite seleccionar hermanos de abajo arriba, tenemos que poner en el codigo, esos hermanos copiados debajo, para que asi css, pueda señalarlos.
Esto ultimo que he dicho no se si algunos lo entenderan, pero es asi ajjajaajajajajajajaajajaj, de echo es la clave, estas duplicidades.
Yo aqui para que se vea un poco, he cogido y estas copias las puese en otro color, para que cuando se cambie de un sitio a otro se vea que aparece la copia.
Pero la idea es que esa copia sea identica, con lo cual, cuando se hiziera el cambio no se notaria que ha cambiado.
Puedes desplazarte por todo el menu y volver desde el final al principio, viendo como aparecen cuando avanzas y como desaparecen cuando retrocedes.
Esto solo tiene un inconveniente, algo que aun no he podido subsanar, que tampoco se si sera normal o si se puede arreglar.
Al pasar el raton hay que hacerlo con cierta velocidad (lo tipico vamos), pero si por ejemplo lo pasas muy lento, puede ser que algun menu no se vea. Esto me ha sido imposible saber porque pasa y como se soluciona, aun asi, si lo haces normal funciona todo bien.
Bueno, como se ve, no es que sea, lo mejor de lo mejor, pero si que es verdad que se puede hacer, que eso ya es bastante, por lo menos para mi. teniendo este ejemplo, ya se pueden añadir mas submenus y entendiendo como funciona, crear las funciones de css y el codigo html.
Espero dos cosas, que a alguien le haya servido y haber si se puede solucionar ese pequeño fallo, del movimiento del raton, de alguna manera.
