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~~