soy Kseso y esto EsCSS

Menú Css en hexágono con zona activa del enlace sin sobrepasar su perímetro

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

·Por Kseso ✎ 5
Menú Css en hexágono con zona activa del enlace sin sobrepasar el 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.

Hexágonos en puro Css
Imagen del menú css en hexágonos

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.

Imagen, de origen desconocido, usada en el menú hexagonal

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.

Ver Demo a Full

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.

avatar del Editor del blog

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