jQuery

【jQuery】CSS3とjQueryを使ったフルスクリーンナビゲーションFull Screen Nav

February 5, 2017
Full Screen Nav

Full Screen NavはCSS3 と jQueryを使ったフルスクリーンナビゲーション。

Demo

HTML

<body class="step-start">
    <div class="navbar">
        <p class="logo">Full Screen Nav</p>
        <div class="navbar__buttons">
            <button class="button" type="button" name="button">SIGN IN</button>
            <span><img class="open-menu" src="images/menu.svg" alt=""/></span>
        </div>
    </div>
    <!--/. Navbar -->

    <div class="overlay">
        <h2 class="nav-title">Navigation</h2>
        <nav class="overlay-menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><img class="close-menu" src="images/close.svg" alt=""/></li>
            </ul>
        </nav>
    </div>
    <!--/. overlay -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js" charset="utf-8"></script>
    <script src="js/app.js"></script>
</body>

Download