3 menús construidos con círculos | Oloblogger Con la propiedad border-radius resulta fácil crear elementos circulares con la ventaja añadida de ...

31 de mayo de 2012

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:



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;
}


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;
}


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;
}


¿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
Copy URL

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

follow us in feedly

17 comentarios :

  1. ¿Magia? No, son las increíbles entradas de Oloblogger.

    ResponderEliminar
  2. ¡Que buena entrada!, te felicito Oloman. Siempre brindandonos aportes ingeniosos.

    ResponderEliminar
  3. Me dejaste mágicamente embelezada :)

    ResponderEliminar
  4. Me encanta, voy a tratar de probarlos en mi blog :)

    ResponderEliminar
  5. Hola Oloblogger:
    Pues en mi página tengo un blog y tengo muchooooos codigos metidos un lios y como hago para quitar todo eso...?
    Es decir quiero tener html de nuevo de cero.. ¿Como lo hago?

    ResponderEliminar
    Respuestas
    1. Pues si tienes un gran lío lo mejor es instalar una nueva plantilla de las que lleva de serie Blogger y luego "restaurar artilugios".

      Eliminar
  6. Muito legal esses menus, muito obrigado por compartilhar conosco, Abaços

    ResponderEliminar
  7. Una pregunta se puede hacer con imagenes?

    ResponderEliminar
    Respuestas
    1. Sí, pero la gracia era hacerlo todo con CSS.

      Eliminar
  8. ERE MAGNIFICO ESTO ME ENCABNTO TIO UN DIA VAMOS A TOMAR UYN CAFE TE LO MERECES CUANDO VENGAS A VIGO

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Hola de nuevo!! Esta entrada me ha sevido de inspiración para programar un menú en un blog que colaboro: http://tecladosyteclistas.blogspot.com.
    Al ser un blog musical buscaba un efecto de rotación para simular unos potenciómetros/knobs como se encuentran en numerosos instrumentos/amplificadores.

    Con un pequeño diseño realizado en 3D y las instrucciones de "transform" (rotate) y "transition" y un poquito de javascript he conseguido un primer resultado. Aún quedaría añadir más CSS para conseguir unos efectos mejores jejeje
    Gracias Oloblogger!!

    ResponderEliminar
  11. como puedo hacerle para agregar un submenu a una de esas bolitas

    ResponderEliminar
    Respuestas
    1. Con dificultad Lau, con mucha dificultad. No pensé en eso de los submenús cuando propuse estas ideas, así que el código no está preparado para ello.

      Eliminar