News

Build a CSS3 hexagonal menu

Employ CSS3 transforms and the nth-child pseudo-selector to create a hexagonal menu

main-image-composite

Deep down we all want to be a little different, stand out from the crowd, do something new, exciting or just better. Brighton’s boutique web agency Buffalo tick all these boxes, from the crazy ASCII art in their source code (do check this out) to their fresh, responsive and innovative interface design.

The agency’s website not only showcases their visual design aesthetic, it demonstrates an impressive command of contemporary web technology savvy. Their elegantly minimal design is actually delivered using over 1,000 lines of Sass. This workshop couldn’t attempt to work through the sophistication of Buffalo’s interface, but it has provided our inspiration to try something a bit different in the shape department.

The building blocks

This code creates a basic rectangle and then uses pseudo-elements to add a triangle before and after the rectangle to complete the hexagon shape. You can scale the size of the menu to suit your own needs by proportionately adjusting the 104px and 60px sizes (and a couple of other adjustments you are sure to find).

001 ul.hex {padding:0; margin:300px auto; list-style:none; width:104px; height:60px; position:relative;} 
 002 ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0; z-index:100; text-align:center; text- decoration:none; font:normal 18px/60px “Arial”; color:#ddd;
 003 }
 004 ul.hex li a:before {display:block; content:””; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
 005 -webkit-transform: rotate(60deg);
 006 -moz-transform: rotate(60deg);
 007 -ms-transform: rotate(60deg);
 008 -o-transform: rotate(60deg);
 009 transform: rotate(60deg);
 010 }
 011 ul.hex li a:after {display:block; content:””; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
 012 -webkit-transform: rotate(-60deg);
 013 -moz-transform: rotate(-60deg);
 014 -ms-transform: rotate(-60deg);
 015 -o-transform: rotate(-60deg);
 016 transform: rotate(-60deg);
 017 }

First and not first

This code sets the non-hover and hover colours for the first hexagon and, in the language of the technique, ‘not the first hexagons’. This allows for the central hexagon to be styled differently from the surrounding hexagons. The hover text colours are also set here.

001 ul.hex li:nth-child(1) a,
 002 ul.hex li:nth-child(1) a:before,
 003 ul.hex li:nth-child(1) a:after {background:#ee6557;
 004 }
005 ul.hex li:nth-child(1) a:hover,
 006 ul.hex li:nth-child(1) a:hover:before,
 007 ul.hex li:nth-child(1) a:hover:after {background-color:#edaba5; color:#000;
 008 }
009 ul.hex li:not(:first-child) a,
 010 ul.hex li:not(:first-child) a:before,
 011 ul.hex li:not(:first-child) a:after {background-color:#16a6b6;
 012 }
 013 ul.hex li:not(:first-child) a:hover,
 014 ul.hex li:not(:first-child) a:hover:before,
 015 ul.hex li:not(:first-child) a:hover:after {background- color:#86b2b7; color:#000;
 016 }

Right first

For economy of coding, the hexagon on the right-hand side is rendered first, followed by the central hexagon.

001 ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
 002 -webkit-transform-origin: -54px 30px;
 003 -moz-transform-origin: -54px 30px;
 004 -ms-transform-origin: -54px 30px;
 005 -o-transform-origin: -54px 30px;
 006 transform-origin: -54px 30px;
 007 }
 008 ul.hex li:nth-child(1) {left:0;}
×