Teoría
Teoría

Menú circular: añadir opciones

Esta es la técnica completa para crear un menú circular:

Movemos el eje de rotación de las opciones a una esquina con transform-origin y hacemos coincidir esa esquina con el centro del menú.

Inclinamos y giramos las opciones con estas fórmulas:

[ángulo del sector] = 360° / [cantidad de opciones previstas]
[rotación de la opción n] = (n - 1) * [ángulo del sector]
[ángulo de inclinación] = 90° - [ángulo del sector]

Deshacemos la inclinación y giramos el contenido de las opciones:

[inclinación del contenido] = -1 * [inclinación de la opción]
[ángulo de rotación] = -1 * (90° - ([ángulo del sector] / 2))

Desplazamos el contenido de las opciones hacia el centro del círculo.
Redondeamos el contenedor con border-radius y recortamos lo que sobra con overflow: hidden.

Después podemos añadir otros detalles: fondos diferentes para cada opción, un borde para el contenedor y lo que se nos ocurra.

Conservando los seis sectores previstos, añadiremos una tercera opción y formaremos un semicírculo. Su ángulo de rotación será 120°:

Esta serie de ejercicios está inspirada en el artículo Building a Circular Navigation with CSS Transforms. Los ejemplos se adaptaron y simplificaron para estos ejercicios.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Menú circular: añadir opciones</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="circle-menu"> <div class="center"></div> <ul> <li><a href="#">monitor</a></li> <li><a href="#">apertura</a></li> </ul> </nav> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; } .circle-menu { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: white; box-shadow: 0 0 3px #cccccc; } .circle-menu ul { position: absolute; width: 300px; height: 300px; margin: 50px; padding: 0; list-style: none; border-radius: 50%; overflow: hidden; } .circle-menu .center { position: absolute; top: 195px; left: 195px; z-index: 1000; border: 5px solid #34495e; border-radius: 50%; box-shadow: 0 0 3px #cccccc; } .circle-menu li { position: absolute; top: -10px; left: -10px; width: 160px; height: 160px; transform-origin: 100% 100%; overflow: hidden; } .circle-menu li:nth-child(1) { transform: rotate(0deg) skew(30deg); } .circle-menu li:nth-child(2) { transform: rotate(60deg) skew(30deg); } .circle-menu li a { display: block; width: 160px; height: 160px; margin-top: 40px; margin-left: 40px; font-size: 0; background: rgba(241, 196, 15, 0.5) url("icons/monitor-4x.png") no-repeat 50% 40%; transition: background-color 0.5s; transform: skew(-30deg) rotate(-60deg); } .circle-menu li:nth-child(even) a { background-color: rgba(241, 196, 15, 0.75); } .circle-menu li a:hover { background-color: rgba(241, 196, 15, 1); } /* Íconos */ .circle-menu li:nth-child(2) a { background-image: url("icons/aperture-4x.png"); } .circle-menu li:nth-child(3) a { background-image: url("icons/audio-4x.png"); } .circle-menu li:nth-child(4) a { background-image: url("icons/battery-empty-4x.png"); } .circle-menu li:nth-child(5) a { background-image: url("icons/bluetooth-4x.png"); } .circle-menu li:nth-child(6) a { background-image: url("icons/browser-4x.png"); }

ObjetivosRealizado

Añade al menú un tercer elemento de lista con un enlace dentro.
Gira el tercer elemento de la lista 120°.
Después inclínalo 30°.

Completa el menú hasta que tenga 6 opciones.