How to Create a Side Navigation Menu | Sidenav using Flexbox

byCodingFlicks -September 13, 2020

0

Today in this project, you will learn how to create a simple Side Navigation Menu or sidebar menu using only HTML and CSS. I use the technique of CSS flex layout to make this snippet. Previously I have shared another snippet based on how to create a fixed sidebar using flexbox. In this tutorial, the navbar I have created a side nav that will appear with sliding animation from left when we click on the hamburger icon. We often see the jquery to get the animation, but I used plain HTML and CSS to effect.

In almost every website design, we see the navbar on the top of the homepage, but some websites use the sidebar menu to look a bit different. Apart from nav items, other pieces of information are also included in the side nav, such as brief info about the company, logo, social media buttons, etc. here, I just have had a logo and nav items. You can include other things during the modification.

In the HTML part, I took a div element named 'wrapper' inside, which I took an input checkbox element. Underneath that, I took to label where I placed two hamburger font-awesome icons. One of them will appear when the side nav open, and the other one will appear when the side menu will be closed. Then I have taken some random text and a header text for the right content of the project. Besides, I also did the markup for the side nav inside a div element named 'side-menu.'

you may also like:

For the CSS part, after doing some basing styling for the layout, I used ': checked' CSS pseudo-class selector for getting our required animation of the side nav. So whenever we click on the label of data-function named 'animate,' the sidenav will be translated and appear, and the opposite will happen when we click it back.

To make this snippet your own, you need to create two files. These are HTML and CSS files. You then copy and paste the code below in your files and save it. Run the project in your browser and modify it according to your need.

HTML

<div class="wrapper">
  <input data-function="animate" id="animate" type="checkbox">
  <label data-function="animate" for="animate"></label>
  <label data-function="animate" for="animate"></label>

  <div class="content-area">
    <h1>
Sidebar Menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique blanditiis alias, doloremque quas magnam laboriosam cum esse, quis officia aliquam sapiente id aspernatur eius voluptatibus expedita earum explicabo libero laudantium accusamus nulla dignissimos, molestiae? Voluptates vel earum veniam tempore cum repudiandae reiciendis, quos atque aut. Sunt impedit expedita laborum odio ea quisquam, illum sapiente neque saepe quasi dolor labore fugiat placeat ipsa asperiores possimus facilis obcaecati atque voluptatum porro in tempore aspernatur. Est, necessitatibus, quod hic architecto, possimus impedit provident rem voluptate amet nihil officia obcaecati. Qui non, reiciendis facilis officia incidunt, earum ut architecto fugit consequatur accusantium modi nesciunt nisi iste quod numquam cum beatae, soluta unde corporis. Recusandae cum dolorum iste, commodi unde optio nostrum. Accusantium, ipsa, facere! Necessitatibus reiciendis eligendi quam quia maxime, nulla earum quas veritatis asperiores blanditiis. Facere, perspiciatis minus est aspernatur, sint at. Natus pariatur placeat mollitia quibusdam corrupti molestiae ad aut ipsum vitae delectus libero cum sequi quod maxime ipsa veniam officiis, culpa reiciendis dolorum. Autem tempore quis quisquam nemo earum nam dolore repellat, laboriosam ea mollitia in dolor ut minus assumenda animi sequi officia reprehenderit aperiam cum. In voluptatibus, nulla amet saepe enim id sapiente quidem, alias rem perspiciatis aperiam dignissimos beatae facere animi. Reiciendis itaque aliquid nobis totam aliquam error tempore cupiditate tenetur voluptatibus odio delectus sit quia earum ipsa soluta id, eaque iusto. Pariatur, ex, delectus? Ea cum cupiditate quis voluptate, expedita quia repellendus veniam, temporibus deserunt accusamus sapiente, atque placeat amet voluptatibus repudiandae pariatur ullam minus. Deserunt, obcaecati sint!<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, ipsam, distinctio? Pariatur placeat ducimus quisquam amet quasi ipsam laborum, vero fugit eligendi. Culpa velit repudiandae debitis fugit dolor animi sit sapiente mollitia id nemo consequatur, tempore atque perspiciatis minima quia voluptas ex impedit est architecto molestias, dolores commodi eveniet pariatur! Nemo vel rem, necessitatibus voluptate aperiam sequi in ullam, deleniti soluta vitae dolores obcaecati! Dolorem, veritatis error quasi reprehenderit maiores possimus nihil porro, ad vitae quo molestiae dolores quae ratione asperiores voluptatum ea deserunt dolor quod quisquam officiis ab dignissimos labore eum! Est, nostrum inventore dignissimos! Natus tenetur, doloribus consequuntur!</p>
</div>
<div class="side-menu">
   <p>
<a href="#" class="logo">codingflicks</a></p>
<nav class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</nav>
  </div>
</div>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font: 12px lato;
color: #222;
background: #ddd;
overflow-x: hidden;
}
.wrapper {
display: flex;
min-height: 100%;
}
input[data-function*='animate'] {
position: absolute;
opacity: 0;
}
label[data-function*='animate'] {
position: absolute;
font: 40px fontawesome;
text-align: center;
color: #333;
cursor: pointer;
transform: translate3d(0, 0, 0);
transition: transform .3s;
top: 30px;
left: 30px;
z-index: 1;
display: block;
width: 40px;
height: 40px;  
}

.content-area {
flex: 1;
padding: 80px 30px;
background: #ddd;
box-shadow: 0 0 5px black;
transform: translate3d(0, 0, 0);
transition: transform .3s;
}
input[data-function*='animate']:checked ~ .content-area {
transform: translate3d(300px, 0px, 0px);
}
input[data-function*='animate']:checked ~ .side-menu {
transform: translate3d(0px, 0px, 0px);
}
input[data-function*='animate']:checked ~ .side-menu .menu li {
width: 100%;
}
.side-menu {
transform: translate3d(-300px, 0px, 0px);
position: absolute;
width: 300px;
background: darkcyan;
color: #eee;
left: 0;
height: 100%;
transition: all .3s;
}

.side-menu p{
text-align: center;
font-size: 30px;
margin: 30px 0;
}
.side-menu p a {
text-decoration: none;
color: #fff;
border: 5px solid #fff;
padding: 5px 15px;
}
.menu {
padding-top: 20%;
}
.menu li {
padding: 10px;
list-style: none;
width: 0%;
}
.menu li a {
color: #fff;
font-size: 18px;
font-weight: 900;
display: block;
text-decoration: none;
padding: 15px 0;
margin: 0 20px;
border-bottom: 2px solid #fff;
text-transform: uppercase;
text-align: left;
}
.content-area h1,
.content-area p {
margin: 30px 0;
font-size: 50px;
}
.content-area p {
font-size: 17px;
padding-right: 20%;
}
label[data-function*='animate']:hover {
color: #263249;
}
input[data-function*='animate']:checked ~ label[data-function*='animate'] {
transform: translate3d(280px, 0, 0);
}
label[data-function*='animate']:checked {
display: block;
}
label:nth-child(2){
display: none;
}
input[data-function*='animate']:checked ~ label:nth-child(2){
display: block;
transform: translate3d(280px, 0px, 0px);
}
input[data-function*='animate']:checked ~ label:nth-child(3){
display: none;
}

I hope you find it useful. Please follow our social media profiles to keep yourself updated for a future post from this blog. Thanks for vising.

Please do not enter any spam link in the comment box.