Foros del Web » Creando para Internet » CSS »

desplegar menu emergente haciendo click en la imagen del enlace

Estas en el tema de desplegar menu emergente haciendo click en la imagen del enlace en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/02/2011, 19:49
 
Fecha de Ingreso: noviembre-2010
Mensajes: 58
Antigüedad: 7 años
Puntos: 0
desplegar menu emergente haciendo click en la imagen del enlace

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

Última edición por erfrancis; 16/02/2011 a las 20:03
  #2 (permalink)  
Antiguo 17/02/2011, 08:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: desplegar menu emergente haciendo click en la imagen del enlace

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:
Ver original
  1. .elemento {background: url(ruta.ext);}
  2. .elemento:hover {background: url(ruta2.ext);}
  #3 (permalink)  
Antiguo 17/02/2011, 23:54
 
Fecha de Ingreso: noviembre-2010
Mensajes: 58
Antigüedad: 7 años
Puntos: 0
Respuesta: desplegar menu emergente haciendo click en la imagen del enlace

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..
  #4 (permalink)  
Antiguo 18/02/2011, 07:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: desplegar menu emergente haciendo click en la imagen del enlace

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.
  #5 (permalink)  
Antiguo 18/02/2011, 14:27
 
Fecha de Ingreso: noviembre-2010
Mensajes: 58
Antigüedad: 7 años
Puntos: 0
Respuesta: desplegar menu emergente haciendo click en la imagen del enlace

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ª?
  #6 (permalink)  
Antiguo 19/02/2011, 08:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: desplegar menu emergente haciendo click en la imagen del enlace

Cita:
Iniciado por erfrancis Ver Mensaje
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.
  #7 (permalink)  
Antiguo 29/05/2012, 10:38
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: desplegar menu emergente haciendo click en la imagen del enlace

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

Etiquetas: desplegar, emergente, enlace
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:36.