DEV Community

Cover image for Animated Side Navigation in pure HTML/CSS
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

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;
}
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 
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>
Enter fullscreen mode Exit fullscreen mode

 
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>
Enter fullscreen mode Exit fullscreen mode

 

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;
}
Enter fullscreen mode Exit fullscreen mode

 
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;
}
Enter fullscreen mode Exit fullscreen mode

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

.wrapper {
  background: #333;
  height: 100vh;
  width: 75px;
}
Enter fullscreen mode Exit fullscreen mode

 
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;}
Enter fullscreen mode Exit fullscreen mode

 
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);
}
Enter fullscreen mode Exit fullscreen mode

 

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;
}
Enter fullscreen mode Exit fullscreen mode

 
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);
}
Enter fullscreen mode Exit fullscreen mode

(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;
}
Enter fullscreen mode Exit fullscreen mode

with:

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

.nav-bloc:hover svg {
  fill: #50bddf;
}
Enter fullscreen mode Exit fullscreen mode

 

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;
}
Enter fullscreen mode Exit fullscreen mode

 
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.

Discussion (0)