CSS
【CSS】スライドダウンエフェクトを備えたレスポンシブナビゲーションメニューSimple Slide Down Navigation Menu
March 21, 2017
Simple Slide Down Navigation Menuはスムーズなスライドダウンエフェクトを備えたレスポンシブナビゲーションメニュー
HTML
<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
