CSS

【CSS】Pure CSSで作成されたレスポンシブナビゲーションメニューSlide Out Navigation Menu

February 5, 2017
Slide-Out Navigation Menu

Slide Out Navigation MenuはPure CSSで作成されたスムーズなスライドアウトエフェクトとドロップダウンアイテムを備えた簡単なレスポンシブナビゲーションメニュー。

<body>
    <!-- Mobile bar -->
    <input type="checkbox" id="toggle-nav" class="toggle-nav">
    <div class="mobile-bar">
        <label for="toggle-nav"></label>
    </div>
    
    <!-- Container -->
    <div class="container">
        
        <!-- Header -->   
        <header>
            <nav class="menu">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li class="parent">
                        <a href="#">Link 3</a>
                        <ul>
                            <li><a href="#">Link 3.1</a></li>
                            <li><a href="#">Link 3.2</a></li>
                            <li><a href="#">Link 3.3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </nav>
        </header> 

        <!-- Content -->
        <article class="content">
             <h1>Heading</h1>

             <p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit. Voluptate, cumque, perspiciatis. Corporis quod aut, et molestiae, dolore eveniet illum soluta necessitatibus doloribus sapiente, repellendus voluptatibus ipsum voluptate repudiandae perferendis. Delectus.</p>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, cumque, perspiciatis. Corporis quod aut, et molestiae, dolore eveniet illum soluta necessitatibus doloribus sapiente, repellendus voluptatibus ipsum voluptate repudiandae perferendis. Delectus.</p>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, cumque, perspiciatis. Corporis quod aut, et molestiae, dolore eveniet illum soluta necessitatibus doloribus sapiente, repellendus voluptatibus ipsum voluptate repudiandae perferendis. Delectus.</p>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, cumque, perspiciatis. Corporis quod aut, et molestiae, dolore eveniet illum soluta necessitatibus doloribus sapiente, repellendus voluptatibus ipsum voluptate repudiandae perferendis. Delectus.</p>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, cumque, perspiciatis. Corporis quod aut, et molestiae, dolore eveniet illum soluta necessitatibus doloribus sapiente, repellendus voluptatibus ipsum voluptate repudiandae perferendis. Delectus.</p>
         </article> 
     </div>  
</body>

MIT
Download