Creating An Animated SideNav without JavaScript [A How To Guide]

One of the best ways to handle navigation on small screens is to use sidenavs. When it comes to creating that nav, the best was is not the JavaScript all the time.

Then what is the best formula to have fancy sidenav actions? Here comes the recipe;

Ingredients:

• A checkbox to imitate the click event,
• A label to associate the checkbox,
• A sidenav,
• Some content - Optional,
• A pinch of CSS with animation.

Preparation:

1- Create a checkbox in your HTML file with an "id", in our case we give it the id "toggler".

<input type="checkbox" id="toggler" />

2- Then create a label to associate the checkbox by using the "for" attribute. The "for" will be "toggler" to connect the label with the checkbox.

<label for="toggler" class="toggle-label">
  <i class="fas fa-chevron-circle-down"></i>
</label>

Now our button is ready to trigger the sidenav actions. In our example, I will put the label inside my sidenav to create a fancy button with the help of CSS animation. Also, I used a font-awesome arrow for the label icon.

3- Create a sidenav however you want. I added some links to create a sidenav. As I mentioned before I placed the label inside my nav.

<nav>
      <label for="toggler" class="toggle-label">
        <i class="fas fa-chevron-circle-down"></i>
      </label>
      <ul>
        <li><a href="https://twitter.com/safaerden">Twitter</a></li>
        <li><a href="https://www.instagram.com/safaerden">Instagran</a></li>
        <li><a href="https://github.com/SafaErden">Github</a></li>
        <li><a href="https://www.linkedin.com/in/safaerden/">Linkedin</a></li>
        <li><a href="https://www.mql5.com/en/users/safaerden">Mql5</a></li>
        <li><a href="mailto:[email protected] ">Mail</a></li>
        <li><a href="#">-By Safa ERDEN</a></li>
      </ul>
</nav>

4- Optionally you can add some content to your HTML file.

<main>
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum."
      </p>
</main>

Now we created our content but it is not functional right now. It is not even a good looking content without CSS. So let's begin to add some flavor to our content.

1- First of all we should hide the checkbox. We don't need to see it. We just need its pseudo-class selector ":checked".

#toggler {
  position: absolute;
  display: none;
}

2- Time to style the label which will be used as the checkbox. I gave my label "toggle-label" class. I position it to the top-left of my sidenav with "position: absolute" attribute. When my nav is not shown, I want my label is to be positioned outside of my nav, pointing left to indicate the sliding direction.

When my nav is shown, I want my label to be positioned inside of my nav pointing right to indicate the sliding direction. I use the "transform" attribute to rotate the arrow.

I use the "left" attribute to put the label inside and outside of the sidenav each time user click on it. I also change its color to make it look better between position changes. To make all these changes I use ":checked" pseudo-class. It enables me to trigger the animations. With "transition" property I set the duration for each animation.

.toggle-label {
  position: absolute;
  left: -55px;
  top: 5px;
  transform: rotate(90deg);
  transition: 1s transform, 1s left, 1s color;
}

#toggler:checked ~ nav .toggle-label {
  transform: rotate(270deg);
  left: 5px;
  color: #2c3e50;
}

3- Once you finished the label styling, you can begin styling the sidenav including animations rules. My nav has 500px width and it is pushed 500px right outside of my body to hide it when I do not need it. When I need to reveal my sidenav, I should move it back inside my body.

So I update it's "right" attribute to "0" to show it inside my body. For the "right" value transform, I set the transition duration 1 second. Also for the body, "overflow-x" property should be hidden to avoid horizontal scrollbar.

nav {
  position: fixed;
  background-color: rgba(256, 256, 256, 0.9);
  height: 100vh;
  width: 500px;
  max-width: 100%;
  right: -500px;
  top: 0;
  transition: right 1s;
  padding: 50px;
}

#toggler:checked ~ nav {
  right: 0;
}

4- Additionally you can style your main content to make it have a better look.

body {
  background-color: #2c3e50;
  color: white;
  font-size: 50px;
  font-weight: 900;
  overflow-x: hidden;
}

p {
  font-size: 30px;
  width: 75%;
  margin: 20px auto;
}

nav ul {
  list-style-type: none;
  margin-top: 100px;
  color: #2c3e50;
}

nav ul li a {
  text-decoration: none;
  color: #2c3e50;
}

Now your CSS-only, JavaScript-free sidenav is ready to serve,

Have a good appetite :)

To reach the source visit the repo. For live demo check this link.