Foros del Web » Creando para Internet » CSS »

Efecto cambiar botón al desplegar menú

Estas en el tema de Efecto cambiar botón al desplegar menú en el foro de CSS en Foros del Web. Hola a todos! Os consulto porque no se cómo hacer este efecto... Lo podéis ver en esta demo de un tema de wordpress aquí (he ...
  #1 (permalink)  
Antiguo 18/11/2015, 08:27
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Pregunta Efecto cambiar botón al desplegar menú

Hola a todos!

Os consulto porque no se cómo hacer este efecto... Lo podéis ver en esta demo de un tema de wordpress aquí (he visto varias webs con dicho efecto pero no encuentro ninguna ahora )

Si os fijáis cuando pulsa sobre el menú hace el cambio del icono de las barras por una "X" al desplegar el menú... supongo que será con CSS pero no consigo hacer la transición ni el cambio.

¿Alguno podría orientarme? Gracias!
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #2 (permalink)  
Antiguo 18/11/2015, 08:35
 
Fecha de Ingreso: enero-2013
Mensajes: 176
Antigüedad: 11 años, 3 meses
Puntos: 2
Respuesta: Efecto cambiar botón al desplegar menú

No se bien que es lo que quieres hacer, tal vez te sirvan estos ejemplos, o quizas puedes ser algo mas claro en lo que quieres....

Código CSS:
Ver original
  1. /* unvisited link */
  2. a:link {
  3.     color: green;
  4. }
  5.  
  6. /* visited link */
  7. a:visited {
  8.     color: green;
  9. }
  10.  
  11. /* mouse over link */
  12. a:hover {
  13.     color: red;
  14. }
  15.  
  16. /* selected link */
  17. a:active {
  18.     color: yellow;
  19. }

como puedes ver este ejemplo es con un link, pero tambien lo puedes usar en otros controles y dentro de cada uno, puedes cambiar las propiedades que tu necesites como color de letra, fondo, imagen etc...
__________________
Define tus intereses, se curioso, investiga, comete errores, aprende, practica, mejora, enseña y vuelve a comenzar....
  #3 (permalink)  
Antiguo 18/11/2015, 08:41
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Efecto cambiar botón al desplegar menú

Cita:
Iniciado por Paty_RR Ver Mensaje
No se bien que es lo que quieres hacer, tal vez te sirvan estos ejemplos, o quizas puedes ser algo mas claro en lo que quieres....

Código CSS:
Ver original
  1. /* unvisited link */
  2. a:link {
  3.     color: green;
  4. }
  5.  
  6. /* visited link */
  7. a:visited {
  8.     color: green;
  9. }
  10.  
  11. /* mouse over link */
  12. a:hover {
  13.     color: red;
  14. }
  15.  
  16. /* selected link */
  17. a:active {
  18.     color: yellow;
  19. }

como puedes ver este ejemplo es con un link, pero tambien lo puedes usar en otros controles y dentro de cada uno, puedes cambiar las propiedades que tu necesites como color de letra, fondo, imagen etc...
Hola Paty_RR gracias por responder tan rápido

Quizás no me expliqué muy bien en el mensaje...si entras en el enlace que ves el menú se presenta con las típicas barras de móvil.

Justo al hacer clic para activar el menú hace como un efecto en el que la X de cerrar el menú es como si "saliese" de dichas barras (como si se usasen las mismas barras iniciales para formar la X) no sé si me explico del todo bien
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #4 (permalink)  
Antiguo 18/11/2015, 09:29
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 9 meses
Puntos: 26
Respuesta: Efecto cambiar botón al desplegar menú

Ese tipo de icono es el famoso menú hamburguesa o algo así jaja búscalo como menu icon hamburger, en el sitio web de navnav.co encontrarás este menú y muchos más para ser utilizados, hay unos bonitos y otras opciones que te pueden llegar a ser de utilidad, también puedes buscar en codepen.io para que conozcas un poco más acerca de como hacer un menú de este tipo, saludos!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #5 (permalink)  
Antiguo 18/11/2015, 12:31
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Efecto cambiar botón al desplegar menú

Mira amigo, aqui nuestro amigo Fede iso un Tutorial sobre ese Tema, Leetelo y asi aprenderas como hacerlo ;)

http://www.heroesdelaweb.com/threads...to-arrow.1642/

Etiquetas: desplegar, efecto, todo
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:10.