desplegar menu emergente haciendo click en la imagen del enlace

[erfrancis]

Muy buenas a todos.

He hecho un menu desplegable sin usar javascript. Lo que ocurre es que este se despliega cuando situo el ratón encima de la imagen que tengo como menu. Está puesto la pseudoclase a:hover en su css, a lo que voy es, sabéis como desplegar el menú pero que sea haciendo click sobre la imagen y no solo con situar el puntero en ella??

Ya que estáis si me decís a la vez que también cuando pase el puntero por la imagen me la cambie por otra.

Bueno pues esas 2 dudas me quedan para terminar el menu desplegable, muchas gracias. Espero vuestras soluciones, espero no me hagan copypaste que ya leí bastante pero no di con la solución.


Aquí os dejo un código de un desplegable que se abre al pasar el puntero por encima, a ver que cambio del css para que sea como os comento.



<div id="menu">

<div class="buton">

<a href="URL">webs</a>

<div>

<ul>

<li>

<a href="URL">pasos</a>

</li>

<li>

<a href="URL">Crear</a>

</li>

<li>

<a href="URL">Colgar</a>

</li>

</ul>

</div>

</div>


EL CSS es este:

#menu {
width: 100%;
height: 30px;
margin: 0 auto;
background: url(imgagen.jpg) repeat-x; }

.buton {
width: 19.88%;
height: 30px;
float: left;
text-align: center;
margin-left: 1px;
background: url(imgagen.jpg) repeat-x;
font-weight: bold;
font-size: 75%;
line-height: 30px; }

.buton:hover { background: url(imagen.jpg) repeat-x; }

.buton a {
color: white;
text-decoration: none;
display: block; }

.boton a:hover { color: black; }


.buton div {
position: relative;
width: 94.5%;
background: url(img/desplegable3.png);
font-size: 100%;
visibility: hidden;
text-align: left;
padding: 10px 2px 10px 10px;
font: bold 100% arial; }

.buton:hover div { visibility: visible; }

.buton ul {
margin: 0 10px;
padding: 0;
list-style-image: url(imagen.png); }

.buton li a {
color: white;
text-decoration: none;
padding: 3px; }

.buton li a:hover { color: #fa6; }

gracias

[kseso?]

1º) En vez de usar la pseudoclase :hover para mostrarlo utilice la :active
2º) en el :hover al elemento en cuestión cambie el background

Código CSS:

.elemento {background: url(ruta.ext);}
.elemento:hover {background: url(ruta2.ext);}
 

[erfrancis]

Hola muy buenas, la 2ª duda ya la he corregido, pero con respecto a la primera sigo sin resolverla. He usado la pseudoclase a:active y funciona bien, el problema está que en el momento que hago click se despliega el menu pero si suelto el click el menu ya no sigue apareciendo, se muestra al hacer click pero no se queda fijo al soltar el botón del ratón, ya probe esto antes pero como me ocurria esta problema no supe resolverlo por eso pregunte, a ver si consigues decirme como resolverlo gracias..

[kseso?]

Lógico que mi sugerencia para la 1ª por sí sola no funcione.
Era sólo una indicación de por dónde entrarle. Necesitará complementar con el resto de propiedades.
Pásese por www.araudi.net por los menús que despliegan al :active y vea cómo lo consigue su autor, Mikmoro.
En esa misma página tiene otras realizaciones para mostrar contenido al clicar.

[erfrancis]

Le he estado echando un vistazo pero el menú vertical usando el a:active no se me llega a quedar bien del todo, ¿podrías usar el código que deje y modificar ese css para adaptarlo y resolver la 1ª?

[kseso?]

Iniciado por erfrancis

Le he estado echando un vistazo pero el menú vertical usando el a:active no se me llega a quedar bien del todo, ¿podrías usar el código que deje y modificar ese css para adaptarlo y resolver la 1ª?

Quizás pudiese. No lo se.
Pero lo que sí sé es que para solicitar la realización de trabajos a medida hay un foro específico.
Si no es su intención, o no puede, ofrecer compensación económica (en ese otro foro indicado), siempre le queda la posibilidad de encontrar un menú lo más parecido a sus necesidades y adaptarlo.
En las faq´s de css hay multitud de ejemplos de menús recopilados.

[Simon_Echecopar]

Tengo un codigo similar pero el ul es el que tiene el contiene el menu desplegable. Funciona similar?