6+ CSS Sidebar Menu Examples

This post contains a total of 6+ Hand-Picked CSS Sidebar Menu Examples with Source Code. All these Sidebar Menus are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Sidebar Menu Examples

1. By Joshua Ward

Made by Joshua Ward. Fixed CSS Sidebar Menu with Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-smooth: auto;
  font-weight: 300;
  line-height: 1.5;
  color: #444;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 3.125rem;
  height: 100%;
  z-index: 999;
}
nav .nav-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.25rem 0.625rem;
  background-color: white;
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.2);
}
nav .nav-wrap .hamburger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.125rem;
  cursor: pointer;
}
nav .nav-wrap .hamburger span {
  position: relative;
  display: block;
  width: 100%;
  height: 0.125rem;
  background-color: #3498db;
}
nav .nav-wrap .hamburger span:before, nav .nav-wrap .hamburger span:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.125rem;
  background-color: #3498db;
}
nav .nav-wrap .hamburger span:before {
  transform: translateY(-0.375rem);
  animation: burger1 250ms linear;
}
nav .nav-wrap .hamburger span:after {
  transform: translateY(0.375rem);
  animation: burger2 250ms linear;
}
@keyframes burger1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px) rotate(0deg);
  }
}
@keyframes burger2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px) rotate(0deg);
  }
}
nav .nav-wrap .menu-bg {
  position: fixed;
  top: 0;
  left: -3.125rem;
  width: 0%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  z-index: -1;
}
nav .nav-wrap .menu-bg a {
  position: relative;
  display: flex;
  align-items: center;
  width: 0%;
  height: 25vh;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: width 0.75s ease;
  color: white;
  font-size: 2.25rem;
  font-weight: bold;
  text-decoration: none;
}
nav .nav-wrap .menu-bg a:nth-of-type(2) {
  transition-delay: 0.5625s;
}
nav .nav-wrap .menu-bg a:nth-of-type(3) {
  transition-delay: 0.375s;
}
nav .nav-wrap .menu-bg a:nth-of-type(4) {
  transition-delay: 0.1875s;
}
nav .nav-wrap .menu-bg a:hover {
  background-color: #3498db;
  transition: background-color 500ms linear !important;
}
nav .nav-wrap #hamburger {
  display: none;
}
nav .nav-wrap #hamburger:checked ~ .hamburger span {
  display: block;
  width: 100%;
  background-color: white;
}
nav .nav-wrap #hamburger:checked ~ .hamburger span:before, nav .nav-wrap #hamburger:checked ~ .hamburger span:after {
  background-color: #3498db;
  transform-origin: center center;
}
nav .nav-wrap #hamburger:checked ~ .hamburger span:before {
  transform: rotate(45deg);
  animation: burger3 250ms linear;
}
nav .nav-wrap #hamburger:checked ~ .hamburger span:after {
  transform: rotate(-45deg);
  animation: burger4 250ms linear;
}
@keyframes burger3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes burger4 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
nav .nav-wrap #hamburger:checked ~ .menu-bg {
  left: 3.125rem;
  width: 100%;
  margin: 0;
  padding: 0;
  transition: all 0.5s ease;
}
nav .nav-wrap #hamburger:checked ~ .menu-bg a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 25vh;
  margin: 0;
  padding: 1.875rem 0 1.875rem 3.125rem;
  background-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: width 0.75s ease;
}
nav .nav-wrap #hamburger:checked ~ .menu-bg a:nth-of-type(1) {
  transition-delay: 0.5625s;
}
nav .nav-wrap #hamburger:checked ~ .menu-bg a:nth-of-type(2) {
  transition-delay: 0.375s;
}
nav .nav-wrap #hamburger:checked ~ .menu-bg a:nth-of-type(3) {
  transition-delay: 0.1875s;
}
nav .nav-wrap #hamburger:checked ~ .menu-bg a:hover {
  background-color: #3498db;
  transition: background-color 500ms linear !important;
}
nav .brand {
  position: absolute;
  bottom: 4.25rem;
  left: -1.875rem;
  transform: rotate(-90deg);
  color: #3498db;
  font-family: "Courier New", monospace;
  font-weight: bold;
}
nav .brand a {
  text-decoration: none;
  color: #3498db;
}
</style>
</head>
<body>
  <nav>
	<div class="nav-wrap">
		<input type="checkbox" id="hamburger" />
		<label for="hamburger" class="hamburger">
			<span></span>
		</label>

		<div class="brand">
			<a href="http://www.geekstudios.co" target="_parent">
			   GeekStudios
			</a>
		</div>
		
		<label for="hamburger" class="menu-bg">
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Work</a>
			<a href="#">Contact</a>
		</label>
	</div>
</nav>

<div class="click">
	Click the Hamburger
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>

2. By Yuhomyan

Made by Yuhomyan. Simple Responsive Sidebar Menu with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}
:root {
  --accent-color: #fff;
  --gradient-color: #FBFBFB;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
   width: 100vw;
  height: 100vh;
  background-image: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);
}

.sidebar{
  position: fixed;
  width: 240px;
  left: -240px;
  height: 100%;
  background-color: #fff;
  transition: all .5s ease;
}
.sidebar header{
  font-size: 28px;
  color: #353535;
  line-height: 70px;
  text-align: center;
  background-color: #fff;
  user-select: none;
  font-family: 'Lato', sans-serif;
}
.sidebar a{
  display: block;
  height: 65px;
  width: 100%;
  color: #353535;
  line-height: 65px;
  padding-left: 30px;
  box-sizing: border-box;
  border-left: 5px solid transparent;
  font-family: 'Lato', sans-serif;
  transition: all .5s ease;
}
a.active,a:hover{
  border-left: 5px solid var(--accent-color);
  color: #fff;
   background: linear-gradient(to left, var(--accent-color), var(--gradient-color));
}
.sidebar a i{
  font-size: 23px;
  margin-right: 16px;
}
.sidebar a span{
  letter-spacing: 1px;
  text-transform: uppercase;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  left: 5px;
  cursor: pointer;
  color: #d6adff;
  border-radius: 5px;
  margin: 15px 30px;
  font-size: 29px;
  background-color: #e8d1ff;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
    inset -7px -7px 10px 0px rgba(0,0,0,.1),
   3.5px 3.5px 20px 0px rgba(0,0,0,.1),
   2px 2px 5px 0px rgba(0,0,0,.1);
  height: 45px;
  width: 45px;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
  line-height: 45px;
  transition: all .5s ease;
}
label #cancel{
  opacity: 0;
  visibility: hidden;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  margin-left: 245px;
  opacity: 0;
  visibility: hidden;
}
#check:checked ~ label #cancel{
  margin-left: 245px;
  opacity: 1;
  visibility: visible;
}
@media(max-width : 860px){
  .sidebar{
    height: auto;
    width: 70px;
    left: 0;
    margin: 100px 0;
  }
  header,#btn,#cancel{
    display: none;
  }
  span{
    position: absolute;
    margin-left: 23px;
    opacity: 0;
    visibility: hidden;
  }
  .sidebar a{
    height: 60px;
  }
  .sidebar a i{
    margin-left: -10px;
  }
  a:hover {
    width: 200px;
    background: inherit;
  }
  .sidebar a:hover span{
    opacity: 1;
    visibility: visible;
  }
}

.sidebar > a.active,.sidebar > a:hover:nth-child(even) {
  --accent-color: #52d6f4;
  --gradient-color: #c1b1f7;
}
.sidebar a.active,.sidebar > a:hover:nth-child(odd) {
  --accent-color: #c1b1f7;
  --gradient-color: #A890FE;
}


.frame {
  width: 50%;
  height: 30%;
  margin: auto;
  text-align: center;
}

h2 {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 60px;
  font-family: 'Lato', sans-serif;
  margin: 0;
  color: #a759f5;
}

p {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 30px;
  color: #d6adff;
  margin: 0;
}
</style>
</head>
<body>
  <head>
   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>
  <body>
    <input type="checkbox" id="check">
    <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
      <header>Menu</header>
      <a href="#" class="active">
        <i class="fas fa-qrcode"></i>
        <span>Dashboard</span>
      </a>
      <a href="#">
        <i class="fas fa-link"></i>
        <span>Shortcuts</span>
      </a>
      <a href="#">
        <i class="fas fa-stream"></i>
        <span>Overview</span>
      </a>
      <a href="#">
         <i class="fas fa-calendar"></i>
        <span>Events</span>
      </a>
      <a href="#">
        <i class="far fa-question-circle"></i>
        <span>About</span>
      </a>
      <a href="#">
        <i class="fas fa-sliders-h"></i>
        <span>Services</span>
      </a>
      <a href="#">
        <i class="far fa-envelope"></i>
        <span>Contact</span>
      </a>
    </div>
  <div class="frame">
<p> Responsive </p>
<h2>SIDE BAR</h2>
  <p>in Pure CSS</p>
</div>    
</body>
</body>
</html>

3. By Florin Cornea

Made by Florin Cornea. Modern CSS Sidebar Menu with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
aside {
  color: #fff;
  width: 250px;
  padding-left: 20px;
  height: 100vh;
  background-image: linear-gradient(30deg , #0048bd, #44a7fd);
  border-top-right-radius: 80px;
}

aside a {
  font-size: 12px;
  color: #fff;
  display: block;
  padding: 12px;
  padding-left: 30px;
  text-decoration: none;
  -webkit-tap-highlight-color:transparent;
}

aside a:hover {
  color: #3f5efb;
  background: #fff;
  outline: none;
  position: relative;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

aside a i {
  margin-right: 5px;
}

aside a:hover::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 35px;
  width: 35px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 20px 0 0 #fff;
}

aside a:hover::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 38px;
  right: 0;
  height: 35px;
  width: 35px;
  border-top-right-radius: 18px;
  box-shadow: 0 -20px 0 0 #fff;
}

aside p {
  margin: 0;
  padding: 40px 0;
}

body {
  font-family: 'Roboto';
  width: 100%;
  height: 100vh;
  margin: 0;
}

.social {
  height: 0;  
}

.social i:before {
  width: 14px;
  height: 14px;
  font-size: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top:5px;
  right:5px;
}
</style>
</head>
<body>
  <aside>
  <p> Menu </p>
  <a href="javascript:void(0)">
    <i class="fa fa-user-o" aria-hidden="true"></i>
    My drive
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-laptop" aria-hidden="true"></i>
    Computers
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-clone" aria-hidden="true"></i>
    Shared with me
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    Starred
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-trash-o" aria-hidden="true"></i>
    Trash
  </a>
</aside>

<div class="social">
  <a href="https://www.linkedin.com/in/florin-cornea-b5118057/" target="_blank">
    <i class="fa fa-linkedin"></i>
  </a>
</div>
</body>
</html>

4. By Shawn Reisner

Made by Shawn Reisner. Purple Sidebar Menu with Gradients. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
html {
  font-family: Arial;
  font-size: 16px;
  background: #5e42a6;
}

.sidebar {
  position: fixed;
  width: 25%;
  height: 100vh;
  background: #312450;
  font-size: 0.65em;
}

.nav {
  position: relative;
  margin: 0 15%;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}

.nav ul {
  list-style: none;
}
.nav ul li {
  position: relative;
  margin: 3.2em 0;
}
.nav ul li a {
  line-height: 5em;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.35);
  display: block;
  transition: all ease-out 300ms;
}
.nav ul li.active a {
  color: white;
}
.nav ul li:not(.active)::after {
  opacity: 0.2;
}
.nav ul li:not(.active):hover a {
  color: rgba(255, 255, 255, 0.75);
}
.nav ul li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2em;
  background: black;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #5e42a6, #b74e91);
}

.twitter {
  position: relative;
  width: 75%;
  float: right;
  height: 100vh;
}
.twitter .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.twitter a {
  position: relative;
}
.twitter a img {
  width: 48px;
  height: 48px;
}
.twitter p {
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 0.1em;
  color: #FFF;
  font-weight: bold;
  margin-top: 20px;
}
</style>
</head>
<body>

<main class="main">
  <aside class="sidebar">
    <nav class="nav">
      <ul>
        <li class="active"><a href="#">Welcome</a></li>
        <li><a href="#">Who We Are</a></li>
        <li><a href="#">What We Do</a></li>
        <li><a href="#">Get In Touch</a></li>
      </ul>
    </nav>
  </aside>

  <section class="twitter">
    <div class="container">
      <a target="_blank" href="https://twitter.com/ReisnerShawn">
        <img class="social" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
      </a>
      <p>Follow me</p>
      <p>on Twitter!</p>
    </div>
  </section>
</main>
</body>
</html>

5. By JFarrow

Made by JFarrow. CSS Sidebar Menu with Show/Hide Sidebar on Hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:#212121;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
  font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

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;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
</head>
  <body><div class="area"></div><nav class="main-menu">
            <ul>
                <li>
                    <a href="http://justinfarrow.com">
                        <i class="fa fa-home fa-2x"></i>
                        <span class="nav-text">
                            Dashboard
                        </span>
                    </a>
                  
                </li>
                <li class="has-subnav">
                    <a href="#">
                        <i class="fa fa-laptop fa-2x"></i>
                        <span class="nav-text">
                            Stars Components
                        </span>
                    </a>
                    
                </li>
                <li class="has-subnav">
                    <a href="#">
                       <i class="fa fa-list fa-2x"></i>
                        <span class="nav-text">
                            Forms
                        </span>
                    </a>
                    
                </li>
                <li class="has-subnav">
                    <a href="#">
                       <i class="fa fa-folder-open fa-2x"></i>
                        <span class="nav-text">
                            Pages
                        </span>
                    </a>
                   
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-bar-chart-o fa-2x"></i>
                        <span class="nav-text">
                            Graphs and Statistics
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-font fa-2x"></i>
                        <span class="nav-text">
                           Quotes
                        </span>
                    </a>
                </li>
                <li>
                   <a href="#">
                       <i class="fa fa-table fa-2x"></i>
                        <span class="nav-text">
                            Tables
                        </span>
                    </a>
                </li>
                <li>
                   <a href="#">
                        <i class="fa fa-map-marker fa-2x"></i>
                        <span class="nav-text">
                            Maps
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                       <i class="fa fa-info fa-2x"></i>
                        <span class="nav-text">
                            Documentation
                        </span>
                    </a>
                </li>
            </ul>

            <ul class="logout">
                <li>
                   <a href="#">
                         <i class="fa fa-power-off fa-2x"></i>
                        <span class="nav-text">
                            Logout
                        </span>
                    </a>
                </li>  
            </ul>
        </nav>
</body>
</html>

6. By Christopher Lee Murray

Made by Christopher Lee Murray. Simple Sidebar Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
#sidebar-menu {
    background-color: #333333 !important;
    height: 100% !important; /* Full height */
    position: fixed !important;
    overflow: none !important; /* Enable scrolling if the sidenav has too much content */
}

#sidebar-menu .panel, #admin-apps > li, #admin-users > li{
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-color: #333333 !important;
  background: #333333 !important;
}

#nav>li.panel.panel-heading:hover, #nav>li.panel.panel-heading:active, #sidebar-menu>ul>li>a:hover, #sidebar-menu>ul>li>a:hover:active, #users-sub >li:hover, #users-sub >li:hover:active, #apps-sub >li:hover, #apps-sub >li:active{
  background: #5C5C5C !important;

}

#sidebar-menu a {
  color: #B7B7B7 !important;
}

#sidebar-menu .nav:not(:first-child)>li>a {
  padding: 5px 5px !important;
}

#sidebar-menu .nav>li>a {
  padding: 30px 30px !important;
}

#sidebar-menu #nav>.panel, #nav>.panel-collapse, #panel-users > li{
  border-bottom: 1px solid #3E3E3E !important;
  border-top: 0px solid #333333 !impotant;
}

#sidebar-menu a.selected{
  font-weight: bold !important;
  background-color: #333333 !important;

}

#nav > li > a > span{
  color: #B7B7B7 !important;
}

#users-sub > li, #apps-sub > li{
  margin-left: -50px !important;
  padding-left: 50px !important;
}
</style>
</head>
<body>
  <div id="sidebar-menu" style="width: 263px;">
  <ul id="nav" class="panel panel-default nav">
    <li class="panel panel-heading">
      <a href="#/">Home</a>
    </li>
    <li class="panel panel-group">
      <a href="#panel-users" data-toggle="collapse" class="panel panel-heading">Users<span class="pull-right glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
      <ul id="panel-users" class="panel-collapse collapse">
	<li class="panel-body">
	  <a href="#/dashboard-admin-users-accounts" class="panel-body">User Accounts </a>
	</li>
	<li class="panel-body">
	  <a href="#/dashboard-admin-users-activities" class="panel-body">User Activities </a>
	</li>
      </ul>
    </li>

    <li class="panel panel-group">
     <a href="#panel-apps" data-toggle="collapse" class="panel panel-heading">Apps<span class="pull-right glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
     <ul id="panel-apps" class="panel-collapse collapse">
	<li class="panel-body">
	  <a href="#/dashboard-admin-apps-devapps" class="panel-body">Developer Apps</a>
	</li>
	<li class="panel-body">
	  <a href="#/dashboard-admin-apps-activities" class="panel-body">App Activities</a>
	</li>
      </ul>

    </li>
    <li class="panel">
      <a href="#/dashboard-admin-roles" data-toggle="collapse">Roles</a>
    </li>
  </ul>
</div> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

</body>
</html>

7. By Flo Schli

Made by Flo Schli. A simple Hover Sidebar Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Exo+2);
body{
  background-color:#383838;
  font-family: 'Exo 2', sans-serif;
}
.sidebar, .sidebar *, .sidebar:before{
  transition: all 0.24s ease-in-out;
}
.sidebar{
  position:fixed;
  top:50%;
  transform: translate(0%,-50%);
  margin-left:-90px;
  border-radius: 0px 5px 5px 0px;
  background-color:#0e8d60;
  overflow:hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.sidebar li{
  opacity:0;
}
.sidebar:before{
  content:">";
  position:absolute;
  right:10px;
  top:50%;
  transform: translate(0%,-50%);
  color:#bbb;
  font-size:2em;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
}
.sidebar:hover:before{
  opacity:0;
}
.sidebar:hover{
  margin-left:0px;
}
.sidebar:hover li{
  opacity:1;
}
.sidebar a{
  text-decoration:none;
  color:#bbb;
  line-height: 50px;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
  padding: 0 20px;
  display:block;
}
.sidebar a:hover{
  color:#fff;
}
.sidebar li{
  height:50px;
  border-bottom: 1px solid rgba(255,255,255,0.24);
}
.sidebar li:hover{
  background-color: #10a470;
}
.sidebar li:last-child{
  border-bottom:none;
  border-radius: 0px 0px 5px 0px;
}
.sidebar li:first-child{
  border-radius: 0px 5px 0px 0px;
}
</style>
</head>
<body>
  <ul class="sidebar">
  <li>
    <a href="#">
      first item
    </a>
  </li>
   <li>
    <a href="#">
      second item
    </a>
  </li>
  <li>
    <a href="#">
      third item
    </a>
  </li>
  <li>
    <a href="#">
      fourth item
    </a>
  </li>
  <li>
    <a href="#">
      fith item
    </a>
  </li>
</ul>
</body>
</html>