간단한 튜토리얼
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('hexNav'); document.getElementById('menuBtn').onclick = function() { var className = ' ' + hexNav.className + ' '; if ( ~className.indexOf(' active ') ) { hexNav.className = className.replace(' active ', ' '); } else { hexNav.className += ' active'; } }
위 내용은 멋진 CSS3 육각 메뉴 애니메이션 효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!