Stunning CSS3 hexagonal menu animation effects

Brief Tutorial

This is a cool hexagonal menu animation effect made using CSS3 and a small amount of js code. The hexagonal menu has a highlight animation effect when the mouse slides over it. When the menu is clicked, each menu item pops out along each side of the hexagon to form a large hexagon.

Using method

HTML structure

The hexagonal menu is made using a

<nav id="hexNav">
  <div id="menuBtn">
    <svg viewbox="0 0 100 100">
      <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="transparent"
                          stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/>
    </svg>
    <span></span>
  </div>
  <ul id="hex">
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"   alt="" />
      <h2 id="Title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

JavaScript

The hexagonal menu uses a small amount of js code to listen to the mouse click event of the button, and add and remove the corresponding 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';
    }              
}

The above is the content of the stunning CSS3 hexagonal menu animation effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!