como hago este tipo de menu?

[choquii]

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!

[pzin]

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.

[choquii]

muchas gracias, me sirvio la respuesta con el tema de los triangulos.. pero como organizo los divs?

[pzin]

Iniciado por choquii

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:

<nav>
  <ul>
    <li><a href="">Enlace</a></li>
    <li><a href="">Enlace</a></li>
    <!-- etc... -->
  </ul>
</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:

li.activo {
  position: relative;
  top: -20px;
}
 

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.

[choquii]

Muchas gracias voy a ver que logro hacer! saludos!