CSS
【CSS】スライドダウンエフェクトを備えたレスポンシブナビゲーションメニューSimple Slide Down Navigation Menu
March 21, 2017

Simple Slide Down Navigation Menuはスムーズなスライドダウンエフェクトを備えたレスポンシブナビゲーションメニュー
<body> <!-- Mobile bar --> <input type="checkbox" class="toggle-nav" id="toggle-nav"> <div class="mobile-bar"> <label for="toggle-nav"></label> </div> <!-- Container --> <div class="container"> <!-- Header --> <header class="header"> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </nav> </header> <!-- Content --> <section class="content"> <h1>Heading</h1> <p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit. Accusamus, deserunt eum modi voluptate laboriosam voluptates facere quo eius ullam est quas, facilis obcaecati! Commodi eveniet repellat omnis! Molestiae, aperiam, vel!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, deserunt eum modi voluptate laboriosam voluptates facere quo eius ullam est quas, facilis obcaecati! Commodi eveniet repellat omnis! Molestiae, aperiam, vel!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, deserunt eum modi voluptate laboriosam voluptates facere quo eius ullam est quas, facilis obcaecati! Commodi eveniet repellat omnis! Molestiae, aperiam, vel!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, deserunt eum modi voluptate laboriosam voluptates facere quo eius ullam est quas, facilis obcaecati! Commodi eveniet repellat omnis! Molestiae, aperiam, vel!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, deserunt eum modi voluptate laboriosam voluptates facere quo eius ullam est quas, facilis obcaecati! Commodi eveniet repellat omnis! Molestiae, aperiam, vel!</p> </section> <!-- Footer --> <footer class="footer"> <p>Developed by <a href="https://github.com/kaiquezimerer" target="_blank">Kaíque Zimerer.</a></p> </footer> </div>
MIT
Download