How to Create a Side Navigation Menu | Sidenav using Flexbox

How to Create a Side Navigation Menu

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.



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.

Post a Comment

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

Post a Comment (0)

Previous Post Next Post