NAVIGATION MENU CSS left

Paste the following code under <style type="text/css">:

/*----- NAVIGATION MENU by borntobewildcodes (left) -----*/

/* You can change the placement of this box and set position value to fixed */

#navigation_menu{
position:absolute;
margin-top:10px;
margin-left:10px;
width:40px;
height:40px;
background:{color:Navigation menu background};
line-height:43px;
z-index:1000;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

/* Navigation icon */

#navigation_menu span{
color:{color:Navigation menu symbol};
font-size:15px;
}

#navigation_menu:hover span{
color:{color:Navigation menu link hover};
}

/* Navi box */

#navi{
position:absolute;
margin-top:0px;
margin-left:10px;
padding:7px;
padding-bottom:3px;
width:40px;
height:30px;
font-size:15px;
line-height:15px;
background:{color:Navigation box background};
z-index:1000;
opacity:0;
overflow:hidden;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

/* Navi box style when hovered. */

#navigation_menu:hover #navi{
margin-left:60px;
width:155px;
height:auto;
overflow:visible;
opacity:1;
}

/* Navi link style */

#navi a{
display:block;
padding:5px;
margin-bottom:5px;
width:40px;
height:auto;
color:{color:Navigation menu link};
background:{color:Navigation menu link background};
font-size:12px;
opacity:0.8;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

#navigation_menu:hover #navi a{
width:145px;
}

#navi a:hover{
color:{color:Navigation menu link hover}!important;
opacity:1;
}

/* Navi triangle */

#navitr{
position:absolute;
display: inline-block;
width:0;
height:0;
line-height:0;
border:10px solid transparent;
margin-left:-35px;
border-right:20px solid {color:Navigation box background};
top:10px;
}

/* Navigation menu ends */