jQuery

【jQuery】フルページオーバーレイナビゲーションjQuery Overlay Menu

February 16, 2017
jquery overlay menu

jQuery Overlay MenuはフルページオーバーレイナビゲーションjQueryプラグイン。

CSS

<link type="text/css" rel="stylesheet" href="overlay.css">

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="overlay.js"></script>

HTML

    <header>
        <div class="navbar-header">
            <div class="toggle-button" id="toggle">
                <span class="bar top"></span>
                <span class="bar middle"></span>
                <span class="bar bottom"></span>
            </div>
        </div>
        <nav class="overlay" id="overlay">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

Download