놀라운 CSS3 육각형 메뉴 애니메이션 효과

黄舟
풀어 주다: 2017-01-17 17:30:39
원래의
2100명이 탐색했습니다.

간단한 튜토리얼

CSS3와 소량의 js 코드를 사용하여 만든 멋진 육각형 메뉴 애니메이션 효과입니다. 육각형 메뉴는 메뉴 위로 마우스를 이동하면 하이라이트 애니메이션 효과가 있으며, 메뉴를 클릭하면 각 메뉴 항목이 육각형의 각 측면을 따라 튀어나와 큰 육각형을 형성합니다.

사용방법

HTML 구조

육각형 메뉴는 를 사용하여 만들고, 메뉴 항목은 순서가 없는 목록을 사용하여 만듭니다

<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

육각형 메뉴는 소량의 js 코드를 사용하여 버튼의 마우스 클릭 이벤트를 수신하고 이에 해당하는 클래스를 추가 및 제거합니다.

var hexNav = document.getElementById(&#39;hexNav&#39;);
 
document.getElementById(&#39;menuBtn&#39;).onclick = function() {
    var className = &#39; &#39; + hexNav.className + &#39; &#39;;
    if ( ~className.indexOf(&#39; active &#39;) ) {
        hexNav.className = className.replace(&#39; active &#39;, &#39; &#39;);
    } else {
        hexNav.className += &#39; active&#39;;
    }              
}
로그인 후 복사

위 내용은 멋진 CSS3 육각 메뉴 애니메이션 효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿