jQuery

【jQuery】jQueryとCSSを使用したアニメーションメニューHamburger Menu

December 24, 2016

Hamburger MenuはjQueryとCSSを使用してメニューを作成。

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.slim.min.js"></script>
<script src="script.js"></script>

HTML

<body>
    <div class="menu">
        <span class="menu-circle"></span>
        <a href="#" class="menu-link">
            <span class="menu-icon">
        		<span class="menu-line menu-line-1"></span>
            	<span class="menu-line menu-line-2"></span>
            	<span class="menu-line menu-line-3"></span>
            </span>
        </a>
    </div>
    <div class="menu-overlay">
        <a href="#">About</a>
        <a href="#">Portfolio</a>
        <a href="#">Contact</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

Download