Animated Side Navigation in pure HTML/CSS
Tags: html, css, tutorial
Published: 2022-01-25 12:57:21

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 :

{%youtube 0rTXMYAcG9s%}

##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:
```css
*, ::before, ::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

&nbsp;
##2. Create a nav in HTML.
Create a nav that contains a wrapper with a container and three dots:
```html
<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>
```

&nbsp;
Below it, add a nav-bloc, inside of which there’ll be a SVG icon:
```html
<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>
```

&nbsp;
Inside that bloc but below the SVG, add the sub-navigations with all the links:
```html
<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>
```

&nbsp;
##3. Style the navigation.
Start by adding a width to the SVG file so that it’ll no longer take up the whole page:
```css
svg {
	width: 20px;
}
```

&nbsp;
Let’s style the side-nav by putting it on the left-side of the screen with a fixed position:
```css
.side-nav {
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}
``` 

&nbsp;
Then, give the wrapper a lighter background and make it as high as the viewport:
```css
.wrapper {
  background: #333;
  height: 100vh;
  width: 75px;
}
```

&nbsp;
Style the dots container and the dots themselves so that you have three colored dots at the top of the navigation bar:
```css
.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;}
```

&nbsp;
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:
```css
.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);
}
``` 

&nbsp;
##4. Create the animation for the nav to slide from the left.
Style the sub-nav:
```css
.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;
}
```

&nbsp;
Now, whenever you hover the icon, you want to make the sub-nav slide to the right. In order to do that:
```css
.nav-bloc:hover .sub-nav {
  transform: translateX(75px);
}
```
(75pixels is the width of the wrapper)

&nbsp;
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.

&nbsp;
##5. Style the icon.
Replace the following code:
```css
svg{
	width: 20px;
}
```
with:
```css
.nav-bloc svg {
  width: 25px;
  fill: #f2f2f2;
  transition: fill 0.2s ease-in-out ;
}

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

&nbsp;
##6. Style the inside of the navigation.
Style the title and links of the navigation:
```css
.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;
}
``` 

&nbsp;
Now you can create other blocs for your navigation! Check out the [source code](https://www.ui-delivery.com/Side Nav) to see what this nav looks like with several blocs (and with some content next to it).

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

*See you soon!*

Enzo.