분류 design

Pushy는 CSS 변환 및 전환을 사용하는 반응형 오프 캔버스 탐색 메뉴입니다

컨텐츠 정보

  • 조회 482 (작성일 )

본문

이 프로젝트는 Medium에서 볼 수 있는 캔버스 밖 탐색 메뉴에서 영감을 받았습니다.


Pushy는 많은 사이트에서 구현되었습니다. 확인해보십시오! 귀하의 웹 사이트 중 하나에서 Pushy를 사용하고 있는지 알려주십시오.


https://chrisyee.ca/pushy 


https://github.com/christophery/pushy 



<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <div class="pushy-content">
        <ul>
            <!-- Submenu -->
            <li class="pushy-submenu">
                <button>Submenu</button>
                <ul>
                    <li class="pushy-link"><a href="#">Item 1</a></li>
                    <li class="pushy-link"><a href="#">Item 2</a></li>
                    <li class="pushy-link"><a href="#">Item 3</a></li>
                </ul>
            </li>
            <li class="pushy-link"><a href="#">Item 1</a></li>
            <li class="pushy-link"><a href="#">Item 2</a></li>
        </ul>
    </div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
    <!-- Menu Button -->
    <button class="menu-btn">&#9776; Menu</button>
</div>