/* Estilos básicos para centrar y preparar el entorno de la navegación circular */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Ocupa toda la altura de la vista para centrar verticalmente */
margin: 0; /* Elimina márgenes por defecto */
background-color: #f4f4f4; /* Fondo suave para destacar la navegación */
}
/* Eliminamos estilos predeterminados de la lista y preparamos su estructura */
.navegacion {
list-style: none; /* Sin viñetas */
padding: 0;
margin: 0;
position: relative; /* Para posicionar elementos absolutamente en relación a este contenedor */
width: 400px; /* Ancho del área de la lista, ajustable según diseño */
height: 400px; /* Alta del área, también ajustable */
}
/* Estilo para cada elemento de la lista */
.navegacion li {
position: absolute; /* Posicionamiento absoluto para colocar en coordenadas precisas */
top: 50%; /* Centrado vertical respecto al contenedor */
left: 50%; /* Centrado horizontal respecto al contenedor */
transform-origin: 0 50%; /* Punto de rotación en el borde izquierdo medio */
/* Inicialmente, colocamos los elementos en el centro, rotándolos posteriormente */
transition: transform 0.5s ease; /* Transición suave para la rotación */
}
/* Estilo para los enlaces dentro de cada elemento */
.navegacion li a {
display: block; /* Para que toda la caja sea clickable */
padding: 12px 20px; /* Espaciado interno para mayor comodidad */
background-color: #3498db; /* Color de fondo azul */
color: #fff; /* Texto en blanco */
text-decoration: none; /* Sin subrayado */
border-radius: 25px; /* Bordes redondeados para un estilo moderno */
font-family: ‘Arial’, sans-serif; /* Fuente legible y moderna */
font-weight: bold; /* Texto en negrita para mayor visibilidad */
box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra sutil para profundidad */
transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}
/* Cambio de color y ligera escala al pasar el ratón por encima */
.navegacion li a:hover {
background-color: #2980b9; /* Azul más oscuro */
transform: scale(1.05); /* Ligero aumento para efecto interactivo */
}
/* Cuando el usuario pasa el ratón sobre un elemento de navegación, se realiza la rotación */
.navegacion li:hover {
transform: translate(-50%, -50%) rotate(360deg); /* Gira en torno a su origen en el centro */
}
/* Posiciones específicas para cada elemento para distribuirlos en círculo */
/* Se usan transformaciones en grados para distribuirlos uniformemente */
/* La lista puede extenderse o ajustarse en cantidad de elementos y posiciones */
Lista de Navegación Circular Interactiva en Revista Completa
// Aquí podemos agregar scripts para mayor interactividad, si fuera necesario.
// Sin embargo, para la base de la navegación circular, la interacción se logra con CSS.
