Superbes effets d'animation de menu hexagonal CSS3

Bref tutoriel

Il s'agit d'un effet d'animation de menu hexagonal sympa réalisé à l'aide de CSS3 et d'une petite quantité de code js. Le menu hexagonal a un effet d'animation de surbrillance lorsque la souris glisse dessus. Lorsque vous cliquez sur le menu, chaque élément de menu apparaît de chaque côté de l'hexagone pour former un grand hexagone.

Utilisation de la méthode

Structure HTML

Le menu hexagonal est réalisé à l'aide d'un 486d7a50595533609bc98d44595dc670, et les éléments de menu sont créés à l'aide d'une liste non ordonnée

<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="img/1.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="img/2.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="img/3.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="img/4.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="img/5.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
    <li class="tr"><div class="clip"><a href="#" class="content">
      <img src="img/6.jpg" alt="" />
      <h2 class="title">Title</h2><p>Catch phrase</p>
    </a></div></li>
  </ul>
</nav>

JavaScript

Le menu hexagonal utilise une petite quantité de code js pour écouter l'événement de clic de souris du bouton, et ajouter et supprimer la classe correspondante.

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';
    }              
}

Ce qui précède est le contenu des superbes effets d'animation du menu hexagonal CSS3. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !