Menú Css en hexágono con zona activa del enlace sin sobrepasar su perímetro 16.3.15
Tutorial paso a paso para construir un menú con enlaces en forma de hexágonos en los que la zona activa no se extiende más allá de los límites de cada hexágono.
Menú Css en hexágono con zona activa del enlace sin sobrepasar su perímetro
Tutorial para lograr los enlaces en forma de hexágono. No sólo a la vista o apariencia, también funcional: el área sensible al ratón es sólo el hexágono. Los enlaces no se extienden más allá de las aristas de cada figura.
Menú en hexágonos
En esta demo la dificultad no está en los códigos empleados y su complejidad. Son de lo más sencillos. El mérito, ver los créditos al final, radica en la imaginación y la capacidad de ver lo evidente.
La imagen siguiente es el resultado final de este tutorial, los items del menú formados por hexágonos, obtenido sólo con Css.
Menú hexagonal: el Html
En este caso es una simple lista. Observa que utilizo un span dentro de cada enlace. La finalidad es doble: ayuda a conformar el hexágono y a centrar verticalmente el texto del enlace en él. La razón de su presencia cuando llegue a su Css asociado. Podría prescindir de él en favor de un pseudoelemento ::before en aras de la semántica, pero obligaría a extender y complicar el css y el funcionamiento del enlace.
<ul>
<li class="hexagon">
<a class="hexagon-in1" href="#"><span class="hexagon-in2">Blog</span></a>
</li>
<li class="hexagon">
<a class="hexagon-in1" href="#"><span class="hexagon-in2">Kseso</span></a>
</li>
<li class="hexagon">
<a class="hexagon-in1" href="#"><span class="hexagon-in2">Css</span></a>
</li>
<li class="hexagon">
<a class="hexagon-in1" href="#"><span class="hexagon-in2">Demo</span></a>
</li>
<li class="hexagon">
<a class="hexagon-in1" href="#"><span class="hexagon-in2">Code</span></a>
</li>
</ul>
Los estilos del hexágono
Como te decía, son de lo más sencillos. Los comentarios indican de qué elemento se trata, identificado por el color que tienen en la imagen posterior.
.hexagon { /* rectángulo negro */
width: 100px;
height: 200px;
transform: rotate(120deg);
}
.hexagon-in1 { /* rectángulo blanco */
display: block;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.hexagon-in2 { /* rectángulo rojo */
display: block;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
Estilos básicos: tamaños y formas:
Como puedes ver en la imagen adyacente, hemos creado tres cajas anidadas del mismo tamaño, ancho y alto. Las dos interiores (hexagon-in1 y hexagon-in2) se declaran como bloques porque son aplicadas a elementos de línea (un enlace y un span).
A la vez se giran transform: rotate cada una con un valor diferente. Observa que en hexagon-in2 el giro que hereda de su padre hexagon se anula. Vuelve a ser cero. Esto facilita que el texto del enlace se muestre horizontal (sin giro).
En la imagen están identificadas por el color del borde para que las visualices. También he rellenado de rojo la zona que comparten las tres cajas, que es el hexágono que deseamos crear.
Recortando sobrantes
El siguiente paso es deshacernos del sobrante para que sólo se vea la figura del hexágono y que a su vez tengamos un área sensible al cursor de la misma forma. Vamos con su css:
.hexagon {
visibility: hidden;
overflow: hidden;
}
.hexagon-in1 {
overflow: hidden;
}
.hexagon-in2 {
visibility: visible;
}
overflow: hidden
Con overflow recortamos las zonas que desbordan a las cajas para dejar sólo visible la zona común que da lugar al hexágono.
visibility: hidden
Ocultamos a la vista estas cajas (los li´s y a´s de cada opción del menú) y a todo lo que contiene. No se puede usar display: none por una diferencia muy importante, entre otras: visibility:hidden se puede anular en los hijos sin tener que hacer visible a su caja padre. Con display: none no es posible.
También serviría el valor collapse por no ser una tabla o elemento de tabla.
Ponte guapo
Con lo anterior ya tenemos nuestro menú con sus items en forma de hexágonos. Ya sólo nos quedan un par de detalles para que luzca bien y otro más para mejorar la experiencia del usuario.
ul {text-align: center;}
.hexagon {
display: inline-block;
list-style-type: none;
}
.hexagon-in2 {
background-image: url(ruta/fractal25.jpg);
line-height: 200px;
font-family: Courgette, sans-serif;
font-size: 40px;
color: #CCFF66;
text-shadow: 1px 1px #000;
transition: 1.5s ease-out;
}
Para alinear los items al centro horizontalmente utilizamos text-align: center; ya que los li´s los declaramos como inline-block. En este ejemplo nos viene bien la separación entre ellos que crea este valor. Así puedes anularlo.
Al hexágono lo hacemos visible al ojo con la imagen del fondo y el texto de cada enlace. Del resto de las propiedades sólo es reseñable cómo se alinea el texto en la vertical con la propiedad line-height: 200px;. El valor es exáctamente el mismo que la altura del elemento. Si necesitas otra forma de centrarlo te remito a este artículo.
La propiedad transition ya sabes para qué la utilizo.
En movimiento
Ya sólo nos resta una pizca para rematar nuestro menú con hexágonos: posicionar el fondo, background-position, y animarlo un poco al hacer :hover sobre cada enlace.
li:nth-child(1) span {
background-position: -15px center;
}
li:nth-child(2) span {
background-position: -115px center;
}
li:nth-child(3) span {
background-position: -215px center;
}
li:nth-child(4) span {
background-position: -315px center;
}
li:nth-child(5) span {
background-position: -415px center;
}
.hexagon-in2:hover {
background-position: -565px center;
color: #FCE001;
}
A continuación la imagen utilizada en el background. Como ves está sin recortar para optimizar, pero como es una demo y quizás quieras aumentar el tamaño de los li´s la dejo tal cual.
Sobre este Css poco hay que comentar. Sólo un par de detalles. Con la imagen utilizada en el background por el posicionamiento se consigue un efecto óptico de continuidad de un item a otro.
La porción de la imagen que se muestra al :hover está en el lateral derecho.
El tiempo de transition es el mismo para todos los elementos del menú, 1.5s.
Todo esto hace que la velocidad en el cambio del fondo sea distinta en cada opción del menú.
Demo del menú hexagonal y créditos
Y todo lo anterior es para llegar a lograr lo que ves en la siguiente demo:
See the Pen Menú Hexagonal by Kseso (@Kseso) on CodePen.
Créditos
La idea original del hexágono en puro css no es mia. La vi en codepen.io realizado por dmac37:
See the Pen CSS Hexagon by dmac37 (@dmac37) on CodePen.
La imagen que encabeza el artículo es una composición propia de varias de internet archive book images
Artículo publicado originalmente en Agosto de 2012. Revisado y actualizado en Marzo de 2015.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Nice...thanks'..
ResponderEliminarEs fantástico esto! Justo lo que necesitaba, mil, millones de gracias, un espectáculo la explicación.
ResponderEliminarSaludos.
A mi lo que mas me ha maravillado es saber que podemos hacer invisible a un "padre" y hacer visible al "hijo". Creo que tiene mucho juego.
ResponderEliminarNota para Kseso: Que decepción, ¿Esto es del 2012? Desde hace cuanto sabes esto? y yo porque no lo sabía? No me puedo creer que este viendo esto en 2015 y yo que pensé que ya había visto todos los tesoros escondidos en tu blog. ¿Exactamente que actualizaste? Estoy en negación.
Saludos.
La revisión fue únicamente de redacción y marcado de algunas partes del artículo. Nada significativo que afectase al contenido del post.
EliminarDe hecho una pequeña variación de este menú ya estuvo en este blog allá por 2012 en el menú superior
[img]http://1.bp.blogspot.com/-qHjAchyJ4-c/VQiQd5PKKPI/AAAAAAAAK0E/18UlrGJcxDc/s800/hexag.jpg[/img]