× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Animated hexagon menu with triangles

web-tiki
Apr 20, 2015
<p>I gave it a go too and made this pen :</p> <p><strong><a href="http://codepen.io/web-tiki/pen/vOBJXy">CSS Hexagon menu</a></strong></p> <p>and this is what it looks like :</p> <p><a href="http://codepen.io/web-tiki/pen/vOBJXy"><img src="http://i.stack.imgur.com/qSNFB.png" alt="CSS hexagon menu"></a></p> <p>Main features :</p> <ul> <li>responsive according to the width of the container</li> <li>CSS only : The menu is displayed when the burger is clicked with the <code>:checked</code> pseudo class.</li> <li>the burger animates to a cross on click with the same technique</li> <li>clicks are triggered only inside inside each triangle</li> <li>animations are handled with transitions on the transform and opacity properties</li> </ul> <p>I was originaly going to make it with SASS to shorten the code but the compiler failed on codepen so I made it in plain CSS. I haven't tested it crossbrowser either.</p> <p>Here is the full code (no vendor prefixes) :</p> <p><em>HTML :</em></p> <pre><code>&lt;nav id="wrap"&gt; &lt;input id="menuBtn" type="checkbox" name="s"/&gt; &lt;label id="burger" for="menuBtn"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt; &lt;ul id="hex"&gt; &lt;li class="tr"&gt;&lt;div class="clip"&gt;&lt;a href="#" class="content"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;li class="tr"&gt;&lt;div class="clip"&gt;&lt;a href="#" class="content"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;li class="tr"&gt;&lt;div class="clip"&gt;&lt;a href="#" class="content"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;li class="tr"&gt;&lt;div class="clip"&gt;&lt;a href="#" class="content"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;li class="tr"&gt;&lt;div class="clip"&gt;&lt;a href="#" class="content"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;li class="tr"&gt;&lt;div class="clip"&gt;&lt;a href="#" class="content"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p><em>CSS :</em></p> <pre><code>*{margin:0; padding:0;} html,body{height:100%;} body{background:url('https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg');background-size:cover;overflow:hidden;} ul{list-style-type:none;} #wrap { position: relative; width: 70%; padding-bottom: 70%; margin: 100px auto; overflow: hidden; } #burger { position: absolute; top: 47.11%; left: 45%; width: 10%; height: 5.65%; cursor: pointer; z-index: 2; box-shadow: inset 6px 0px 0px -3px #000, inset -6px 0px 0px -3px #000; } #burger:after, #burger:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inherit; } #burger:before { transform: rotate(-60deg) translatez(0px); } #burger:after { transform: rotate(60deg) translatez(0px); } #burger span { position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; padding: 8px 0; background-clip: content-box; background-color: #000; transform: translate(-50%, -50%); transition: background-color .5s ease-in-out; } #burger span:before, #burger span:after { position: absolute; background-color: #000; content: ''; width: 20px; height: 2px; transition: transform .5s ease-in-out; } #burger span:before { top: 0; } #burger span:after { bottom: 0; } #menuBtn { visibility: hidden; position:fixed; } #hex { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1) translatez(0); transition: transform .5s, opacity .5s; z-index: 1; } .tr { position: absolute; bottom: 50%; left: 50%; width: 36.5%; height: 40%; transform-origin: 0% 100%; transform: skewY(-30deg); background: teal; overflow: hidden; visibility: hidden; transition: transform .5s; } .clip { position: absolute; top: 0; left: 0; height: 100%; width: 115%; transform-origin: 0 0; transform: skewY(30deg) rotate(30deg); background: gold; overflow: hidden; } .content { position: absolute; top: -25%; left: -25%; height: 50%; width: 50%; padding:50%; visibility: visible; background-size: cover; } /*** Triangles ***/ .tr:nth-child(1) { transform: rotate(0deg) skewY(-30deg) translate(0, 0) translatez(0); } .tr:nth-child(1) .content { background-image: url("https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"); } #menuBtn:checked ~ #hex .tr:nth-child(1) { transform: rotate(0deg) skewY(-30deg) translate(10%, -10%) translatez(0); } .tr:nth-child(2) { transform: rotate(60deg) skewY(-30deg) translate(0, 0) translatez(0); } .tr:nth-child(2) .content { background-image: url("https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"); } #menuBtn:checked ~ #hex .tr:nth-child(2) { transform: rotate(60deg) skewY(-30deg) translate(10%, -10%) translatez(0); } .tr:nth-child(3) { transform: rotate(120deg) skewY(-30deg) translate(0, 0) translatez(0); } .tr:nth-child(3) .content { background-image: url("https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg"); } #menuBtn:checked ~ #hex .tr:nth-child(3) { transform: rotate(120deg) skewY(-30deg) translate(10%, -10%) translatez(0); } .tr:nth-child(4) { transform: rotate(180deg) skewY(-30deg) translate(0, 0) translatez(0); } .tr:nth-child(4) .content { background-image: url("https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"); } #menuBtn:checked ~ #hex .tr:nth-child(4) { transform: rotate(180deg) skewY(-30deg) translate(10%, -10%) translatez(0); } .tr:nth-child(5) { transform: rotate(240deg) skewY(-30deg) translate(0, 0) translatez(0); } .tr:nth-child(5) .content { background-image: url("https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg"); } #menuBtn:checked ~ #hex .tr:nth-child(5) { transform: rotate(240deg) skewY(-30deg) translate(10%, -10%) translatez(0); } .tr:nth-child(6) { transform: rotate(300deg) skewY(-30deg) translate(0, 0) translatez(0); } .tr:nth-child(6) .content { background-image: url("https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg"); } #menuBtn:checked ~ #hex .tr:nth-child(6) { transform: rotate(300deg) skewY(-30deg) translate(10%, -10%) translatez(0); } .tr:nth-child(1) .content { transform: rotate(-30deg); } .tr:nth-child(2) .content { transform: rotate(-90deg); } .tr:nth-child(3) .content { transform: rotate(-150deg); } .tr:nth-child(4) .content { transform: rotate(150deg); } .tr:nth-child(5) .content { transform: rotate(90deg); } .tr:nth-child(6) .content { transform: rotate(30deg); } /*** Display animation ***/ #menuBtn:checked ~ #hex { opacity: 1; transform: scale(1) translatez(0); } #menuBtn:checked + #burger span { background-color: transparent; } #menuBtn:checked + #burger span:before { transform: rotate(45deg) translate(5px, 6px); } #menuBtn:checked + #burger span:after { transform: rotate(-45deg) translate(5px, -6px); } </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29717765/Animated%20hexagon%20menu%20with%20triangles/29721362">Stack Overflow</a>.</p>
comments powered by Disqus