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; 
}

                                    
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Bootstrap4 datepicker

Bootstrap4 datepicker

Card Bootstrap4 02

Card Bootstrap4 02

Card Profile Style01

Card Profile Style01

Carousel Bootstrap4

Carousel Bootstrap4

Form Création de compte style animée

Form Création de compte style animée

Form login 03

Form login 03

Google Style Login

Google Style Login

Loading Style snake

Loading Style snake

Simple Table With UIKIT

Simple Table With UIKIT

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

input radio checkbox b4 style

input radio checkbox b4 style