Animated Side Navigation in pure HTML/CSS

Hey fellow creators

You want to add an animated side navigation to your website? Here’s how to do it in pure HTML & CSS!

If you prefer to watch the video version, it's right here :

1. The basic files.

Start with the usual HTML "head" tags and with an empty body for now.

For the CSS file, start with a simply reset and select a dark color for the background of the body:

*, ::before, ::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #222;
    font-family: Raleway, Helvetica, sans-serif;
    position: relative;
}

2. Create a nav in HTML.

Create a nav that contains a wrapper with a container and three dots:

<nav class="side-nav">
      <div class="wrapper">
        <div class="three-dots-container">
          <div class="dot d1"></div>
          <div class="dot d2"></div>
          <div class="dot d3"></div>
        </div>
      </div>
</nav>

Below it, add a nav-bloc, inside of which there’ll be a SVG icon:

<nav class="side-nav">
      <div class="wrapper">
        <div class="three-dots-container">
          <div class="dot d1"></div>
          <div class="dot d2"></div>
          <div class="dot d3"></div>
        </div>
                <div class="nav-bloc">
          <svg
            aria-hidden="true"
            focusable="false"
            data-prefix="far"
            data-icon="file"
            class="svg-inline--fa fa-file fa-w-12"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 384 512"
          >
            <path
              d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"
            ></path>
          </svg>
                </div>
      </div>
</nav>

Inside that bloc but below the SVG, add the sub-navigations with all the links:

<div class="nav-bloc">
        ...
        <div class="sub-nav">
            <h2>Subtitle 1</h2>
            <ul>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
            </ul>
     </div>
</div>

3. Style the navigation.

Start by adding a width to the SVG file so that it’ll no longer take up the whole page:

svg {
    width: 20px;
}

Let’s style the side-nav by putting it on the left-side of the screen with a fixed position:

.side-nav {
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}

Then, give the wrapper a lighter background and make it as high as the viewport:

.wrapper {
  background: #333;
  height: 100vh;
  width: 75px;
}

Style the dots container and the dots themselves so that you have three colored dots at the top of the navigation bar:

.three-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.dot {
  flex-shrink: 0;
  margin: 10px 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
}

.d1 {background: crimson;}
.d2 {background: yellow;}
.d3 {background: lightgreen;}

Next, create a design for each bloc inside the nav (even though for now, the nav only has one bloc), along with some effects upon hover:

.nav-bloc {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f21e;
}

.nav-bloc:hover {
  background: rgb(24, 24, 24);
}

4. Create the animation for the nav to slide from the left.

Style the sub-nav:

.sub-nav {
  padding: 0px;
  width: 200px;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  z-index: -1;
  color: white;
  /* Hidden at the left side */
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
  border-right: 2px solid #000;
  border-left: 2px solid #000;
}

Now, whenever you hover the icon, you want to make the sub-nav slide to the right. In order to do that:

.nav-bloc:hover .sub-nav {
  transform: translateX(75px);
}

(75pixels is the width of the wrapper)

Here’s how it works: the sub-nav, which is the child of the nav-block, will have a new stacking context (with the z-index: -1): it will try to refer to the oldest element with a stacking context, which is the side-nav since it has a fixed position (which also creates a new stacking context).

Therefore, the sub-nav will refer to the side-nav, meaning it’ll go behind the nav-bloc and the wrapper.

5. Style the icon.

Replace the following code:

svg{
    width: 20px;
}

with:

.nav-bloc svg {
  width: 25px;
  fill: #f2f2f2;
  transition: fill 0.2s ease-in-out ;
}

.nav-bloc:hover svg {
  fill: #50bddf;
}

6. Style the inside of the navigation.

Style the title and links of the navigation:

.sub-nav h2 {
  font-family: open sans, sans-serif;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}
.sub-nav ul {
  list-style-type: none;
}
.sub-nav li {
  padding: 15px 20px;
}
.sub-nav li:hover {
  background: rgba(160, 160, 160, 0.555);
}
.sub-nav li a {
   color: #f2f2f2;
   text-decoration: none;
}

Now you can create other blocs for your navigation! Check out the source code to see what this nav looks like with several blocs (and with some content next to it).

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Blog