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