Foros del Web » Creando para Internet » Diseño web »

como hago este tipo de menu?

Estas en el tema de como hago este tipo de menu? en el foro de Diseño web en Foros del Web. Hola estoy interesada en hacer este tipo de menu al estilo de cinta.. pero no se bien como se llaman y no encontre un tutorial.. ...
  #1 (permalink)  
Antiguo 13/02/2014, 15:02
 
Fecha de Ingreso: mayo-2010
Mensajes: 93
Antigüedad: 8 años, 7 meses
Puntos: 3
Pregunta como hago este tipo de menu?

Hola estoy interesada en hacer este tipo de menu al estilo de cinta.. pero no se bien como se llaman y no encontre un tutorial.. a ver si alguien me puede guiar o decir como se hace. (Solo me interesa la barra de menu, la seleccion a hover digamos no me interesa) Muchas gracias!


__________________
Mi web de estética www.estarmaslinda.com.ar
  #2 (permalink)  
Antiguo 14/02/2014, 04:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.481
Antigüedad: 16 años, 4 meses
Puntos: 2109
Respuesta: como hago este tipo de menu?

Piensa que ese efecto no son más que triángulos. Si lo piensas de forma abstracta y estructural, deberías de ver algo así:



Puedes usar imágenes para esos triángulos, o dibujarlos usando CSS con pseudo-elementos ::before y ::after.
  #3 (permalink)  
Antiguo 14/02/2014, 19:00
 
Fecha de Ingreso: mayo-2010
Mensajes: 93
Antigüedad: 8 años, 7 meses
Puntos: 3
Respuesta: como hago este tipo de menu?

muchas gracias, me sirvio la respuesta con el tema de los triangulos.. pero como organizo los divs?
__________________
Mi web de estética www.estarmaslinda.com.ar
  #4 (permalink)  
Antiguo 24/02/2014, 05:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.481
Antigüedad: 16 años, 4 meses
Puntos: 2109
Respuesta: como hago este tipo de menu?

Cita:
Iniciado por choquii Ver Mensaje
muchas gracias, me sirvio la respuesta con el tema de los triangulos.. pero como organizo los divs?
Uy, se me pasó tu respuesta.

Bueno la estructura, para ser semántica, sería algo así:

Código HTML:
Ver original
  1. <nav>
  2.   <ul>
  3.     <li><a href="">Enlace</a></li>
  4.     <li><a href="">Enlace</a></li>
  5.     <!-- etc... -->
  6.   </ul>
  7. </nav>

En principio creo que eso bastaría, ya que puedes usar ::before y ::after en cada elemento para crear pseudo-elementos, que para cuestiones decorativas son perfectos.

Entonces nav o ul podría ser el rectángulo negro con una posición relativa, y ahí añades dos pseudo-elementos, con posición absoluta en forma de triángulo. Para posicionarlos podrías poner por ejemplo top:100% y luego uno a la izquierda y otro a la derecha.

Luego para cada elemento del menú, es decir, cada li es fácil, no es más que texto negro. Para cuando esté activo, podrías simplemente sacarlo y hacerlo más grande, con algo tipo:

Código CSS:
Ver original
  1. li.activo {
  2.   position: relative;
  3.   top: -20px;
  4. }

Y cambiarle también la altura para que quede como quieras.

Finalmente para el triángulo pues haces algo parecido a los otros de antes.

Seguramente me deje algo.
  #5 (permalink)  
Antiguo 25/02/2014, 19:26
 
Fecha de Ingreso: mayo-2010
Mensajes: 93
Antigüedad: 8 años, 7 meses
Puntos: 3
Respuesta: como hago este tipo de menu?

Muchas gracias voy a ver que logro hacer! saludos!
__________________
Mi web de estética www.estarmaslinda.com.ar

Etiquetas: css, estilo
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 00:56.