Cómo crear un menú circular con sólo CSS3

Yo sé que les gustan mucho los menús de navegación, y en el tutorial del día vamos a hacer uno más. El día de hoy vamos a hacer un curioso menú circular usando sólo CSS3. En este tutorial vamos a poner en práctica algunas cosas para la edición de nuestros elementos HTML y veremos que sin necesidad de usar javascript podemos crear un menú funcional y con un aspecto bastante decente.

Es interesante este menú porque muchas de las cosas que se ven en él son capas, y nada más usamos imágenes para poner el título en el centro y los íconos alrededor, lo demás es puro código.

Demo del tutorial

Archivos para descargar

HTML

En esta ocasión nuestro HTML es más o menos complejo. Lo que trata es que como siempre tenemos una capa que envuelve todo el contenido, pero lo importante es meter dentro del hipervínculo la capa con el título de la sección y nuestra imagen. Algo que hay que recalcar es que como es un menú circular tenemos que tener cuidado de saber el número de elementos que le vamos a poner, ya que en base a eso dividiremos el círculo en partes más o menos iguales, para lograr simetría.

CSS

La base de todo es hacer los círculos perfectos, y por tal motivo necesitamos que todos nuestros elementos (a excepción de la capa del título) tengan un tamaño cuadrado. En este tutorial el círculo centrar es de 300x300 px, y los elementos son de 100x100 px.

Nuestro elemento por el momento solo tiene la configuración de la imagen y el color; la posición inicial es en el centro y lo colocamos absolute para poder hacerlo flotante en relación con los demás elementos, y así poder hacer que se muevan libremente sin que afecten la línea del documento.

Nuestro título es también muy sencillo de configurar, basta con posicionarlo arriba de nuestro .item para que sobresalga cuando se le hace hover al .item, no al .titulo.

Esto es lo más importante, y es donde mezclamos varios selectores para poder hacer funcionar esto. Primero recordemos que usamos los nth-child() para dirigirnos específicamente a un elemento de un conjunto de elementos, para ahorrar tener que ponerle ids a cada elemento, y en este caso es igual.

Lo principal es saber que el efecto se activa cuando el mouse está sobre #centro, no sobre .item. Usamos el nth-child() para aplicarle un margen y así moverlos a su posición final. Fíjense que las medidas no son al aventón nada más, son simétricas y en parte se relacionan con 72° de distancia, con una diferencia de 50px por el tamaño del mismo elemento.

Este es el paso más cansado creo yo, pero es muy bueno porque si lo acabas adecuadamente ya debería estar funcionando tu nuevo menú circular hecho con CSS3.

Demo del tutorial

Archivos para descargar