oversu
/
html5-css3-sidebar-menu-without-javascript


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure HTML5/CSS3 Sidemenu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="checkbox" id="toggle-sidebar" hidden>
    <input type="checkbox" id="toggle-dark-mode" hidden>

    <nav class="sidebar close">
        <label for="toggle-sidebar" class="toggle">☰</label>

        <div class="menu top-menu">
            <ul>
                <li><a href="#"><img src="logo.png" alt="Logo NNS" width="28"></a></li>
                <li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
                <li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
				<li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
				<li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
            </ul>
        </div>

        <div class="menu bottom-menu">
            <ul>
				<li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
				<li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
				<li><a href="#"><i class="fa fa-commenting-o"></i><span>Link</span></a></li>
                <li><a href="#"><img src="logo.png" alt="Logo OverSu" width="28"></a></li>
            </ul>
        </div>
    </nav>

    <section class="content">
        <h1>Title h1</h1>
        <p>Paragraph here</p>
    </section>
</body>
</html>