jQuery

【jQuery】フルスクリーンメニューを実装。Fullscreen navigation

January 7, 2017

Fullscreen navigationはフルスクリーンメニューを実装するプラグイン。

JS&CSS

    <!-- script -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- touch plugin (downloaded) -->
    <script src="js/jquery.touchSwipe.min.js"></script>

    <!--Custom stylesheet-->
    <link href="css/style.css" rel="stylesheet">

HTML

    <div class="nav-toggle">
        <a href="#"><i class="nav-toggle-m">&#9776;</i><i class="nav-toggle-a">&#8675;</i></a>
    </div>

    <nav class="nav-main">
        <ul>
            <li class='nav-header'>Navigation</li>
            <li><a href="#section1">Home</a></li>
            <li><a href="#section2">About us</a></li>
            <li><a href="#section3">Project</a></li>
            <li><a href="#section4">Contact</a></li>
        </ul>
    </nav>

    <div class="handler">
        <section id="section1" class="section-main section-animation section-active">
            <div class="inside">
                <h2>#section1 Home</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis, culpa ad atque eveniet praesentium nobis expedita similique beatae tenetur. Distinctio vel tenetur, id cum.</p>
            </div>
        </section><!--/.section1-->

        <section id="section2" class="section-main">
            <div class="inside">
                <h2>#section2 About us</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis, culpa ad atque eveniet praesentium nobis expedita similique beatae tenetur. Distinctio vel tenetur, id cum.</p>
            </div>
        </section><!--/.section2-->

        <section id="section3" class="section-main">
            <div class="inside">
                <h2>#section3 Project</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis, culpa ad atque eveniet praesentium nobis expedita similique beatae tenetur. Distinctio vel tenetur, id cum.</p>
            </div>
        </section><!--/.section3-->

        <section id="section4" class="section-main">
            <div class="inside">
                <h2>#section4 Contact</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis, culpa ad atque eveniet praesentium nobis expedita similique beatae tenetur. Distinctio vel tenetur, id cum.</p>
            </div>
        </section><!--/.section4-->
    </div><!--/.handler-->

    <!-- Custom script -->
    <script src="js/custom.js"></script>

Download