No seas cuadrado, quiebra fuera de tu caja aburrida y prueba con un círculo por tamaño. Hoy vamos a construir un menú de navegación circular que gira a diferentes puntos mientras el usuario se desplaza sobre un ancla.
A lo largo del camino, tendremos que superar varios obstáculos, como la forma de estructurar nuestro HTML para que sea propicio para un desplazamiento remoto y cómo colocar todos los elementos de forma correcta para que todo funcione. Es un desafío divertido y hay mucho que aprender, ¡comencemos!
Launch Demo - Descargar archivos
Paso 1: HTML estructural
Antes de escribir un solo carácter de HTML, tenemos que averiguar la estructura de lo que estamos construyendo. Para esto, podemos recurrir a Photoshop y hacer un boceto básico de cómo queremos que se vea el menú. Esto es lo que se me ocurrió:
Básicamente, cada uno de los rectángulos en la parte superior está atado a uno de los cuatro círculos pequeños dentro del círculo grande. Cuando se desplaza un rectángulo, su pequeño círculo correspondiente girará hasta la parte superior del menú. Una vez más, estamos haciendo uso del concepto de? Remoto? desplazarse porque el usuario interactúa con un área y afecta a otra.
Cada vez que intento sacar un control remoto, me toma algunos intentos para que la estructura sea la correcta. Esto se debe a la forma en que funcionan los selectores de CSS y, más específicamente, a la forma en que funciona la pseudo clase de desplazamiento. Considera lo siguiente:
Digamos que ponemos esta estructura en su lugar con la idea de que queríamos que se desplace el cursor sobre el ancla para cambiar el color del párrafo. Si tienes una idea básica de cómo funcionan los hovers remotos, podrías crear un CSS como este:
Como resultado, esto simplemente no funciona. En nuestro selector de CSS, tenemos que vincular el ancla que se desplaza con el párrafo sobre el que se debe actuar, pero nuestros elementos están en dos divs completamente separados. No hay una manera fácil de escalar tan lejos y cruzar el árbol DOM.
¿Asi que que hacemos? La respuesta está en la reestructuración de nuestro HTML. Esta vez lanzaremos los dos elementos al mismo nivel del árbol.
Ahora nuestro párrafo es un hermano de nuestro ancla, lo que significa que tenemos una forma clara de vincularlos en nuestro CSS. Así es como funciona:
En esta ocasión, le estamos diciendo al navegador que active un cambio de color en cualquier párrafo que sea el hermano inmediato de un ancla que se está desplazando.
Solicitud
Si aplicamos este conocimiento a nuestro escenario, podemos llegar a una estructura que funcione. Comience creando tres divs: envoltorio, menú y círculo. Nido menú dentro de envoltura y circulo dentro de menú.
Dentro del menú div, coloque cuatro anclas, cada una con una clase única. Dentro del círculo div, coloque una lista desordenada que contenga los números del uno al cuatro.
Puede que aún sea un poco confuso en cuanto a cómo se relacionan todas estas piezas con nuestro boceto anterior, así que vamos a actualizarlo con algunas indicaciones visuales para darle una idea de lo que hace todo.
Paso 2: Envoltorio CSS
El código anterior representa todo el HTML que necesitaremos para este pequeño proyecto. El resto de nuestro trabajo es todo CSS. Para empezar, vamos a establecer algunos códigos básicos de reenvío y posicionamiento:
No hay mucho de qué confundir aquí, simplemente estamos dibujando nuestra envoltura. Tenga en cuenta que el -webkit-backface-visibilidad bit es para evitar un error que hace que Webkit parpadee en las transiciones CSS.
Paso 3: Círculo CSS
A continuación vamos a pasar a codificar ese gran círculo. Hacer un círculo en CSS es bastante fácil, solo asegúrate de que la altura y el ancho sean iguales y que el radio del borde esté establecido en al menos el 50%. Todo lo demás aquí ayuda a posicionar todo muy bien.
Para hacer que el círculo parezca un poco más elegante, agreguemos una sombra insertada. Finalmente, lanzamos una transición para que el círculo anime la rotación que se produce más adelante.
Si echamos un vistazo a nuestra vista previa en vivo, deberíamos tener un buen círculo grande y algunos otros elementos dispersos que abordaremos a continuación.
Paso 4: Menú CSS
Para nuestro próximo truco, diseñaremos los elementos del menú. Para hacer esto, diríjase a los anclajes, agregue algunos márgenes y rellenos, establezca el ancho y el color, elimine la decoración de texto y aplique estilo a la fuente. A continuación, apunte el estado de desplazamiento y agregue un color de fondo. Aquí está el código:
Ahora, si revisamos nuestra vista previa en vivo, los enlaces en nuestro menú se verán mucho mejor. Sin embargo, los elementos de la lista aún están fuera de control, así que los atacaremos a continuación.
Paso 5: Little Circle CSS
Para crear los círculos pequeños, primero seleccionamos los elementos de la lista y los configuramos de manera muy similar al círculo grande: iguala la altura y el ancho y establece el radio del borde en 50%. También asegúrese de borrar los puntos de viñeta, establecer el fondo en blanco y el estilo de la fuente como se ve a continuación.
Aquí está la parte difícil. Arriba, le dimos a cada uno de los círculos un posicionamiento absoluto, por lo que ahora debemos colocarlos en su lugar. Podemos apuntar a cada círculo individual con nth-child, luego usar parte superior y izquierda para empujarlos hacia donde los queremos. Finalmente, queremos hacerlo de modo que la parte superior de cada número esté orientada hacia el borde exterior del círculo grande, de modo que cuando todo el elemento gire, el número de la parte superior esté siempre hacia arriba. Hacemos esto mediante el uso de una transformación CSS.
Si echamos un vistazo a nuestra vista previa ahora, todo está bastante bien. Hay una cosa que no está del todo bien?
Paso 6: Inner Circle CSS
Nuestro concepto original no era solo un gran círculo, también había un círculo interno centrado. Podemos lograr esto sin ningún tipo de marca HTML adicional utilizando nuestro viejo amigo antes de. Crear un elemento antes envoltura, configure el contenido en "DS", conviértalo en un círculo como los demás (130px esta vez), alinee y aplique un estilo al texto, muévalo a la parte superior con el índice zy colóquelo en su lugar con posición absoluta.
¡Eso se ve mucho mejor! Con eso, nuestro estilo visual está completamente terminado. Ahora todo lo que queda es dar vida a este lechón.
Paso 7: Hover Circle CSS
Para hacer que nuestro menú gire, tenemos que usar nuestro truco de desplazamiento remoto combinado con una transformación CSS. Cuando el usuario se desplaza sobre uno de los elementos del menú superior, todo el elemento del círculo girará para que el número correspondiente esté en la parte superior.
La parte más complicada de esto es averiguar el selector. Comenzamos en el nivel más alto que contiene tanto el círculo div como los elementos del menú. Esto es, por supuesto, el menú div. Luego, reducimos nuestras opciones a un elemento secundario específico del menú y lo seleccionamos en el hover. Finalmente, le decimos al navegador que queremos actuar. alguna hermano de ese elemento que está sobrevolando con una clase de "círculo". Esto es lo que parece en la práctica:
Es una bestia de un selector, pero hace el trabajo y es lo suficientemente bueno para nuestro pequeño experimento divertido. Ahora, como estamos apuntando al segundo círculo aquí, necesitamos rotar todo el div en 90 grados. Además, como queremos ir en sentido contrario a las agujas del reloj, el número será negativo:
Eso es todo lo que hay que hacer, ahora simplemente usamos esta técnica en los cuatro círculos. Comenzamos con una rotación de 0, luego -90, -180 y finalmente, -270.
¡Echar un vistazo!
Felicidades, has terminado! Ahora es el momento de revisar los frutos de nuestro trabajo duro. Aquí hay una demo.
Manifestación: Haga clic aquí para lanzar.
Como siempre, muchas gracias por leer y siéntase libre de dejar un comentario a continuación para hacerme saber lo que piensa. Hay muchas formas diferentes de abordar este proyecto, ¿cómo lo habría hecho de manera diferente?