Last Updated:

Animated sidebar for CSS3 site

The site menu is undoubtedly the most important part of it, but often the navigation does not stand out at all on the site, which is why the site owner loses precious views of his site. But what if you want the navigation to always be in plain sight, while not visually loading the site, say this is not possible? - so you're wrong. In this tutorial, we'll walk through the process of creating just such a navigation that is minimized by default, but stands out well, and when you hover the cursor, a delightful animation will occur.

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

By default, we will have ten menu items, they will look like icons, in dark colors decorated on a white background, but when you hover the mouse cursor, each item will be painted in a separate color, with the appearance of labels and the effect of animation.

Step 1. HTML

 

The markup will consist of a block that will contain links with classes for each menu item, in addition, we add a text visualization:

<div id='snav' class='en'>
<ul>
<li>
<a href='#'>
<i class="fa fa-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-css3"></i>
<span>CSS3</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-camera"></i>
<span>My pictures</span>
</a>
</li>


<li>
<a href='#'>
<i class="fa fa-circle-o-notch"></i>
<span>Updates</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-envelope"></i>
<span>Contacts</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-music"></i>
<span>Music</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-quote-right"></i>
<span>Questions</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-rss"></i>
<span>RSS</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa fa-html5"></i>
<span>HTML5</span>
</a>
</li>
<li>
<a href='#'>
<i class="fa-video-camera"></i>
<span>Video</span>
</a>
</li>


</ul>
</div>

Each class will assign a color assigned to it, this will allow us to create a very contrasting navigation box that clearly will not leave the visitor without attention.

Step 2. CSS

 

Now the most interesting thing, we need to stylize our navigation, first we define the general parameters of navigation and styles, the orientation of navigation in space:

#snav.en {
left: 0;
text-align: left;
}
#snav.en li span {
left: -100px
}
#snav.en li a:hover span {
left: 35px;
}


/*General CSS settings */
#snav.ar {
right: 0;
text-align: right;
}
#snav.ar li span {
right: -100px;
}
#snav.ar li a:hover span {
right: 35px;
}


/* Navigation setup */
#snav {
position: fixed;
top:20%;
z-index: 9999;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
#snav ul {
list-style: none;
}
#snav*{
margin: 0;
padding: 0
outline: 0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#snav li a {
text-decoration: none;
color: #fff;
display:block;
position: relative;
}
#snav.fa {
vertical-align: middle;
font-size: 18px;
width: 35px
height: 35px;
line-height: 35px;
text-align: center;
position: relative;
z-index: 4;
}
#snav li span {
font-size: 15px;
vertical-align: middle;
height: 35px;
line-height: 35px;
width: auto;
white-space: nowrap;
overflow: hidden;
display:block;
padding: 015px;
position: absolute;
top: 0;
visibility: hidden;
z-index: 3;
}
#snav li a:hover .fa {
transform: rotate(720deg);
}
#snav li a:hover span {
visibility: visible;
}

Now we need to specify the color scheme, for each individual navigation case:

/*Color settings */


/* Options for a browser that supports :nth-child */
#snav li span {
background-color: #555;
}
/* Background color behind the icon*/
#snav li .fa {
background-color: #EEE;
color: #555
}
/* Icon color */
#snav li a:hover .fa {
color: #fff;
}
#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
background-color: #8350DD;
}
#snav li:nth-child(10n+2) span, #snav li:nth-child(10n+2) a:hover .fa {
background-color: #4EC5DB;
}
#snav li:nth-child(10n+3) span, #snav li:nth-child(10n+3) a:hover .fa {
background-color: #3DC25D;
}
#snav li:nth-child(10n+4) span, #snav li:nth-child(10n+4) a:hover .fa {
background-color: #99BE24;
}
#snav li:nth-child(10n+5) span, #snav li:nth-child(10n+5) a:hover .fa {
background-color: #38c;
}
#snav li:nth-child(10n+6) span, #snav li:nth-child(10n+6) a:hover .fa {
background-color: #ff0000;
}
#snav li:nth-child(10n+7) span, #snav li:nth-child(10n+7) a:hover .fa {
background-color: #000;
}
#snav li:nth-child(10n+8) span, #snav li:nth-child(10n+8) a:hover .fa {
background-color: #F1A111;
}
#snav li:nth-child(10n+9) span, #snav li:nth-child(10n+9) a:hover .fa {
background-color: #777;
}
#snav li:nth-child(10n+10) span, #snav li:nth-child(10n+10) a:hover .fa {
background-color: #30555C;
}

In the course of simple manipulations, we get a fairly attractive menu that your visitors will clearly like.