Responsive Sidebar Menu using Flexbox

byCodingFlicks -September 06, 2020

0

Hello Friends. Today in this blog, I will create a snippet based on making simple responsive sidebar navigation using CSS flexbox. We will use CSS animation to get a nice transition effect when we click on the navigation menu's nav item. The navbar is an essential part of web design. We often see the navigation menu on the top of the homepage of any website. Besides, we also know some websites use sidebar navigation for their webpage. I have used plain HTML and CSS to create this simple-looking side navbar with CSS animation.

For the creation of this snippet, we have to produce three different files. The Initial one is the HTML File, the second one is the CSS file, and the last one is the js file. You need to copy the HTML, CSS, and js code given below and paste them to the appropriate files and save them. After that, run the project in your browser and modify according to your need.

HTML:

<div class="wrapper">
<nav class="nav-area">
<ul>
<li>
    <label>Home</label>
  </li>
<input type="radio" name="nav-area" id="about">
<li>
    <label for="about" class="title">About</label>
    <a href="#">Our History</a>
    <a href="#">Our Vision</a>
    <a href="#">Our Mission</a>
    <a href="#">Our Goal</a>
  </li>
<input type="radio" name="nav-area" id="services">
<li>
    <label for="services">Services</label>
    <a href="#">Graphics Design</a>
    <a href="#">Web Design</a>
    <a href="#">Web Developemnt</a>
    <a href="#">Digital Marketing</a>
  </li>
<input type="radio" name="nav-area" id="portfolio">
<li>
    <label for="portfolio">Portfolio</label>
    <a href="#">Project One</a>
    <a href="#">Project Two</a>
    <a href="#">Project Three</a>
    <a href="#">Project Four</a>
  </li>
<li>
    <label>Contact</label>
  </li>
</ul>
</nav>
<div class="left-content">
<h1>
Sidebar Menu</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

CSS:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Poppins;
}
.wrapper {
width: 100%;
height: 100%;
}
nav {
position: fixed;
display: flex;
align-items: flex-start;
width: 20%;
height: 100%;
background-color: black;
}
.left-content {
position: fixed;
right: 0;
width: 80%;
height: 100%;
background-color: #fff;
overflow: auto;
padding: 40px;
}
.left-content h1 {
font-weight: bold;
margin-bottom: 50px;
font-size: 55px;
text-align: center;
}

li, label, ul, a {
width: 100%;
color: #FFF;
display: block;
font-weight: bold;
}
.nav-area ul label {
height: 35px;
}
.nav-area ul li {
height: 35px;
overflow: hidden;
transition: all .3s;
display: block;
background-color: deepskyblue;
}

.nav-area label {
font-size: 14px;
background: black;
padding: 10px 15px;
cursor: pointer;
transition: all .25s;
}
.nav-area a{
font-size: 12px;
text-decoration: none;
color: #FFF;
display: block;
padding: 8px 25px;
transition: all .25s;
}
.nav-area a:hover {
background-color: #262626;
}

.nav-area input[type="radio"] {
display: none;
}
#about:checked + li, #services:checked + li, #portfolio:checked + li {
height: 180px;
}

@media screen and (max-width: 600px){
nav {
width: 100%;
position: relative;
}
.left-content h1{
font-size: 28px;
}
.left-content {
width: 100%;
position: relative;
}
}

Thanks for visiting the blog and keep visiting.

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