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

                                    
Timeline style07

Timeline style07

Timeline style06

Timeline style06

Table bootstrap with Datatable

Table bootstrap with Datatable

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Loading style book loader

Loading style book loader

Lightbox gallery style01

Lightbox gallery style01

Image hover style border top

Image hover style border top

Image hover effects style

Image hover effects style

Form login b4 01

Form login b4 01

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bloc resizable with jquery

Bloc resizable with jquery