Stunning CSS3 hexagon Menu animation effects

Brief tutorials

This is a cool Hexagon menu animation effect made with CSS3 and a small amount of JS code. The Hexagon menu has a high-gloss animation effect when the mouse is over, and when the menu is clicked, each menu item pops out along the sides of the hexagon, forming a large hexagon.

Use method

HTML structure

The Hexagon menu is made using a <svg>, and the menu item is made using an unordered list

<nav id= "Hexnav" > <div id= "menubtn" > <svg viewbox= "0 0" > <polygon points= "50 2 7 26 7 98 "fill=" Transparent "stroke-width=" 4 "stroke=" #585247 "stroke-dasharray=" 0, 0,300 "/> </svg> <span></span> </div> <ul id=" hex "> <li class=" tr "><di V class= "clip" ><a href= "#" class= "Content" >  

Javascript

The Hexagon menu uses a small amount of JS code to listen for mouse click events on the button, adding and removing the corresponding class class for it.

var Hexnav = document.getElementById (' Hexnav '); document.getElementById (' menubtn '). onclick = function () {    var className = ' + Hexnav.classname + ';    if (~classname.indexof (' active ')) {        hexnav.classname = classname.replace (' active ', ');    } else {        Hexnav . className + = ' active ';    }              }
Above is the super-dazzle CSS3 Hexagon Menu animation effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

