3 menús construidos con círculos

Con la propiedad border-radius resulta fácil crear elementos circulares con la ventaja añadida de que actualmente es una instrucción soportada por casi todos los navegadores (hasta IE la interpreta bien a partir de su versión 9). Si a esto le unimos las técnicas habituales para crear menús con elementos de listas, podemos diseñar algunos modelos que realmente redondeen nuestro sitio.

En esta entrada veremos cómo se construye un menú básico con estas formas y posteriormente un par de variantes. Cuando el navegador no soporte la creación de círculos el menú funcionará igual, pero con formas cuadradas.


Al margen del estilo de fuentes y fondos, lo principal es aplicar en el sitio adecuado ese border-radius y la propiedad display. La segunda tiene que estar en los elementos de la lista (li) con el valor inline. De esta manera quedarán en horizontal uno junto al otro. Cuando la ventana sea menos ancha que el espacio que ocupen los círculos, estos seguirán centrados ocupando las líneas que sea necesario.

Sin embargo, para conseguir que tengan una forma circular necesitamos que tengan la propiedad de bloque. Para no perder esa horizontalidad lo que haremos será añadir un inline-block al enlace hijo de los elementos de lista. Como ya tenemos nuestros bloques, ahí mismo es dónde aplicamos para obtener los círculos, un alto, un ancho y un border-radius. Este último mayor tiene que ser mayor que las medidas definidas para que sea totalmente redondo.

ul.circulos {
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px arial;
text-transform: uppercase;
}
ul.circulos li {
display: inline;
margin: 0;
padding: 0;
}
ul.circulos li a {
display: inline-block;
text-decoration: none;
color: white;
background: black;
padding: 5px;
width:120px;
height:120px;
border-radius: 200px;
}
ul.circulos a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.circulos a:hover {
background: #990000;
}

Habréis visto que hemos añadido propiedades a un span dentro de los enlaces y es porque necesitamos un apoyo para que el texto que sirve de link no se sitúe en la parte superior del círculo. Eso lo conseguimos con el position: relative y un valor para top. De esta manera la lista tendrá que incluir esa etiqueta dentro del enlace. Así sería la parte HTML:

<ul class="circulos">
<li><a href="#"><span>Enlace 1</span></a></li>
<li><a href="#"><span>Enlace 2</span></a></li>
<li><a href="#"><span>Enlace 3</span></a></li>
</ul>

Y el resultado sería este:

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

---

Una pequeña variación sería esta siguiente en la que se añade un efecto de rotación junto con una transición, que se activaría al hacer hover. También hemos cambiado el tamaño del círculo, los colores y el tamaño de fuente:

ul.circulos2 {
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px arial;
text-transform: uppercase;
}
ul.circulos2 li {
display: inline;
margin: 0;
padding: 0;
}
ul.circulos2 li a {
display: inline-block;
text-decoration: none;
color: white;
background: green;
padding: 5px;
width:80px;
height:80px;
border-radius: 200px;
transition:all .5s ease-out;
}
ul.circulos2 a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.circulos2 a:hover {
background: limegreen;
transform: rotate(360deg);
transition:all .8s ease-out;
}

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

Estos dos códigos los tenéis ampliados en este Dabblet, incluyendo propiedades compatibles con versiones antiguas de los navegadores.

---

Y ahora la versión más compleja -no mucho- pero quizás más espectacular.

En este caso mostramos un solo circulo que con el hover se despliega mostrando las distintas opciones. Por el efecto añadido del círculo principal que vuela hacia arriba, hasta me ha parecido ideal para sitios relacionados con los deporte ;)


Para hacer esto vamos a jugar con :nth-of-type para poder controlar individualmente cada elemento de lista. Al último enlace que será el inicialmente visible, le daremos una opacidad total y el resto los haremos invisibles. Al hacer hover simplemente intercambiaremos estos valores. Lo demás lo conseguimos con un posicionamiento también individual creado con distintos valores para margin y unos efectos de transición.

ul.circulos3 {
position: relative;
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px arial;
}
ul.circulos3 li {
display: inline;
margin: 0;
padding: 0;
}
ul.circulos3 li a {
position: absolute;
opacity: 0;
display: inline-block;
left: 50%;
margin-left: -50px;
text-decoration: none;
color: white;
background: darkblue;
width:100px;
height:100px;
-o-border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-ms-border-radius: 200px;
border-radius: 200px;
transition: all .8s ease-out;
}
ul.circulos3 li:last-of-type a {
opacity: 1;
}
ul.circulos3 a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.circulos3:hover li a {
color: black;
background: blue;
opacity: 1;
transition: all .8s ease-out;
}
ul.circulos3:hover li:nth-of-type(1) a {
margin-left: -250px;
}
ul.circulos3:hover li:nth-of-type(2) a {
margin-left: -150px;
}
ul.circulos3:hover li:nth-of-type(3) a {
margin-left: -50px;
}
ul.circulos3:hover li:nth-of-type(4) a {
margin-left: 50px;
}
ul.circulos3:hover li:nth-of-type(5) a {
margin-left: 150px;
}
ul.circulos3:hover li:last-of-type a {
opacity: 0;
top: -1000px;
}

• Inicio
• Portfolio
• Bio
• Galería
• Contacto
• MENU

Aquí este mismo código incluyendo los kits de compatibilidad.


A partir de aquí podéis hacer las variaciones que gustéis. Por ejemplo, sólo cambiando la posición de los discos de enlace...

ul.circulos3:hover li:nth-of-type(1) a {
top: 80px;
margin-left: -170px;
}
ul.circulos3:hover li:nth-of-type(2) a {
top: 30px;
margin-left: -120px;
}
ul.circulos3:hover li:nth-of-type(3) a {
margin-left: -50px;
}
ul.circulos3:hover li:nth-of-type(4) a {
top: 30px;
margin-left: 20px;
}
ul.circulos3:hover li:nth-of-type(5) a {
top: 80px;
margin-left: 70px;
}

• Inicio
• Portfolio
• Bio
• Galería
• Contacto
• MENU

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter