This website requires JavaScript to deliver the best possible experience.
How to Make an Animated Side bar using CSS and HTML?

How to Make an Animated Side bar using CSS and HTML?

We’re going to build a modern sidebar navigation menu that can serve as a landing or a portfolio page, or maybe just an inspiration for even cooler ideas.

HTML Structure

First, we’ll write the HTML for the side navigation bar as an unordered list, with each list element wrapped in a hyperlink:

<ul>
 <a href=#t1>
   <li class="icon fa fa-home" id="i1"></li>
 </a>
 <a href=#t2>
   <li class="icon fa fa-keyboard-o" id="i2"></li>
 </a>
 <a href=#t3>
   <li class="icon fa fa-coffee" id="i3"></li>
 </a>
 <a href=#t4>
   <li class="icon fa fa-bed" id="i4"></li>
 </a>
</ul>

Then, we’ll write the markup for the pages, wrapping each page in a <div> tag:

<div class="page" id="p1">
 <li class="icon fa fa-home">
   <span class="title">Home</span>
 </li>
</div>

<div class="page" id="p2">
 <li class="icon fa fa-keyboard-o">
   <span class="title">Type</span>
 </li>
</div>

<div class="page" id="p3">
 <li class="icon fa fa-coffee">
   <span class="title">Coffee</span>
 </li>
</div>

<div class="page" id="p4">
 <li class="icon fa fa-bed">
   <span class="title">Sleep</span>
 </li>
</div>

Then we’ll wrap both the sidebar and the pages in a section, and wrap that in a container <div> and that container in another container, so the <div> tags will be nested inside each other:

<div class="container" id="t1">
 <div class="container" id="t2">
   <div class="container" id="t3">
     <div class="container" id="t4">
       <section>
         <ul>
           <a href="#t1">
             <li class="icon fa fa-home" id="i1"></li>
           </a>
           <a href="#t2">
             <li class="icon fa fa-keyboard-o" id="i2"></li>
           </a>
           <a href="#t3">
             <li class="icon fa fa-coffee" id="i3"></li>
           </a>
           <a href="#t4">
             <li class="icon fa fa-bed" id="i4"></li>
           </a>
         </ul>
         <div class="page" id="p1">
           <li class="icon fa fa-home">
             <span class="title">Home</span>
           </li>
         </div>
         <div class="page" id="p2">
           <li class="icon fa fa-keyboard-o">
             <span class="title">Type</span>
           </li>
         </div>
         <div class="page" id="p3">
           <li class="icon fa fa-coffee">
             <span class="title">Coffee</span>
           </li>
         </div>
         <div class="page" id="p4">
           <li class="icon fa fa-bed">
             <span class="title">Sleep</span>
           </li>
         </div>
       </section>
     </div>
   </div>
 </div>
</div>

We make the basic setup for our pages, hiding overflow and also adding a transition effect.

Styling the pages

html,
body,
section,
.page {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 transition: all 1s cubic-bezier(0.5, -0.005, 0.2, 1) !important;
 -webkit-transition: all 1s cubic-bezier(0.5, -0.005, 0.2, 1) !important;
 color: #fff;
 background: #374046;
 overflow: hidden;
}

Now, we need to set the width for the section wrapping the pages to 400%. The trick here is to set the left property of each page as a ¼ fraction of the section.

Also, don’t forget to set the position of the page class to absolute:

section {
 width: 400%;
}

.page {
 position: absolute;
}

#p1 {
 left: 0;
}
#p2 {
 left: 100%;
 background: #ff5722;
}
#p3 {
 left: 200%;
 background: #593c1f;
}
#p4 {
 left: 300%;
 background: #593c56;
}

Using the transform property, we can slide each page to the left by translating them on the X-Axis in the negative direction:

#t1: target .page#p1 {
 transform: translateX(0);
}
#t2: target .page#p2 {
 transform: translateX(-90%);
}
#t3: target .page#p3 {
 transform: translateX(-190%);
}
#t4: target .page#p4 {
 transform: translateX(-290%);
}

We add a blur filter to each page icon for that cool out of focus effect:

#t2: target .page#p1 .icon,
#t3: target .page#p1 .icon,
#t4: target .page#p1 .icon {
 filter: blur(3px);
 -webkit-filter: blur(3px);
}

Styling the sidebar menu

Now we set the position of the list to fixed, set its height and width and center align its text content.

We also remove the text decorations from the hyperlinks and set the margin between each list item.

ul {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 height: 280px;
 width: 10%;
 padding: 0;
 text-align: center;
}

ul li {
 margin: 30px 0;
}

a {
 text-decoration: none;
 font-family: sans-serif;
}

To display the icons on top of each other, we set the display property to block, and we can also adjust their size:

.icon {
 color: #fff;
 font-size: 32px;
 display: block;
}

Don’t forget to add that cool hover effect!

ul .icon:hover {
 opacity: 0.6;
}

And why not add some scaling?

transform: scale(0.6);
transition-delay: 0.25s;

And there you have it, a stylish navigation component that could serve many purposes.

To obtain the full source code, check the repo at Baianat Github.

Comments

More Articles