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

                                    
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Arrows Defense Game

Arrows Defense Game

Asidebar Menu Style01

Asidebar Menu Style01

Carousel Bootstrap4

Carousel Bootstrap4

Css Page grid layout

Css Page grid layout

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Nav Menu style01

Nav Menu style01

Page 404 exemple 01

Page 404 exemple 01

Table Responsive with css 01

Table Responsive with css 01

Vidéo background en html5 style02

Vidéo background en html5 style02