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

Fullscreen navigationはフルスクリーンメニューを実装するプラグイン。
<!-- 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">
<div class="nav-toggle"> <a href="#"><i class="nav-toggle-m">☰</i><i class="nav-toggle-a">⇣</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>