Asidebar Menu Style01

<!DOCTYPE html>
<html>
<head>
	<title>Toggle Sidebar Using HTML/CSS | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Toggle Sidebar Using HTML/CSS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>        
<nav class="main-menu">      
    <div class="settings"></div>
    <div class="scrollbar" id="navbar-left">
        <ul>
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-home fa-lg"></i>
                    <span class="nav-text">Home</span>
                </a>
            </li>   
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-info-circle fa-lg"></i>
                    <span class="nav-text">About</span>
                </a>
            </li>  
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-cogs fa-lg"></i>
                    <span class="nav-text">Product</span>
                </a>
            </li>    
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-home fa-lg"></i>
                    <span class="nav-text">Home</span>
                </a>
            </li>   
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-info-circle fa-lg"></i>
                    <span class="nav-text">About</span>
                </a>
            </li>  
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-cogs fa-lg"></i>
                    <span class="nav-text">Product</span>
                </a>
            </li> 
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-home fa-lg"></i>
                    <span class="nav-text">Home</span>
                </a>
            </li>   
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-info-circle fa-lg"></i>
                    <span class="nav-text">About</span>
                </a>
            </li>  
            <li>                                   
                <a href="https://www.nglesson.com/">
                    <i class="fa fa-cogs fa-lg"></i>
                    <span class="nav-text">Product</span>
                </a>
            </li> 
        </ul>
    </div>
</nav>
<script src="script.js"></script>
</body>
</html>
body{
  margin:0px;
  padding:0px;
  font-family: "Open Sans", arial;
  background:#CCC;
  color:#fff;
  font-weight:300;
}
.settings { 
  height:73px; 
  float:left;
  background-repeat:no-repeat;
  width:250px;
  margin:0px;
  text-align: center;
  font-size:20px;
  font-family: 'Strait', sans-serif;
}
/* ScrolBar  */
.scrollbar{
    height: 90%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
.scrollbar:hover{
    height: 90%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Scrollbar Style */ 
#navbar-left::-webkit-scrollbar-track{
  border-radius: 2px;
}
#navbar-left::-webkit-scrollbar{
    width: 5px;
    background-color: #F7F7F7;
}
#navbar-left::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #BFBFBF;
}
/* Scrollbar End */ 
.fa-lg {font-size: 1em;}
.fa {
    position: relative;
    width: 55px;
    height: 36px;
    text-align: center;
    top:12px; 
    font-size:20px;
}
.main-menu:hover, nav.main-menu.expanded {
    width:250px;
    overflow:hidden;
    opacity:1;
}
.main-menu {
    background:#F7F7F7;
    position:absolute;
    top:0;
    bottom:0;
    height:100%;
    left:0;
    width:55px;
    overflow:hidden;
    -webkit-transition:width .2s linear;
    transition:width .2s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
    opacity:1;
}
.main-menu>ul {margin:7px 0;}

.main-menu li {
    position:relative;
    display:block;
    width:250px;
}
.main-menu li>a {
    position:relative;
    width:255px;
    display:table;
    border-collapse:collapse;
    border-spacing:0;
    color:#8a8a8a;
    font-size: 13px;
    text-decoration:none;
    -webkit-transform:translateZ(0) scale(1,1);
    -webkit-transition:all .14s linear;
    transition:all .14s linear;
    font-family: 'Strait', sans-serif;
    border-top:1px solid #f2f2f2;
    text-shadow: 1px 1px 1px  #fff;  
}

.main-menu .nav-text  {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:190px;
}
/* Logo Hover Property */
.settings:hover, settings:focus {
    -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}
.settings:active, settings:focus {  
    -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
    -moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
    -o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
    transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
}
a:hover,a:focus {
    text-decoration:none;
    border-left:0px solid #F7F7F7;
}
nav {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}
nav ul,nav li {
    outline:0;
    margin:0;
    padding:0;
    text-transform: uppercase;
}
.main-menu li:hover>a,
nav.main-menu li.active>a{
    color:#fff;
    background-color:#bb6a00;
    text-shadow: 0px 0px 0px; 
}

                                    
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Background overlay

Background overlay

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Card Profile Style01

Card Profile Style01

Create icon animate with svg

Create icon animate with svg

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Image hover 03

Image hover 03

Nav Menu style01

Nav Menu style01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Simple Table With UIKIT

Simple Table With UIKIT

texte animate css

texte animate css