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 supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Card Profile Style01

Card Profile Style01

Carousel Bootstrap4

Carousel Bootstrap4

Chercher un mot sur la liste

Chercher un mot sur la liste

Form Création de compte style animée

Form Création de compte style animée

Form login 02

Form login 02

Header Aside Footer Admin

Header Aside Footer Admin

Image hover 05

Image hover 05

Image hover style border top

Image hover style border top

Timeline style03

Timeline style03

Vers le haut

Vers le haut

toggle switch style03

toggle switch style03