Page Widget How to - Create slide out vertical menu

Question

We would like to know how to create slide out vertical menu.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.title {<!--  w  w w  .  j  ava2 s . c  o  m-->
  width: 500px;
  margin:auto;
  top:70px;
  position: relative;
  text-shadow: 3px 3px 0px #2c3e50;
}
.menu {
  position: fixed;
  height: 100%;
  width: 65px;
  background: #2c3e50;
  transition:width 1s;
  overflow: hidden;
  z-index: 99;
}
.menu:hover {
  width: 220px;
}
.menuItem span {
  position: absolute;
  left:80px;
  top:20px;
  transition:color 1s;
  color:red;
}
.menu:hover .menuItem  span {
 color:green;
}
.menuItem {
  position: relative;
  padding: 20px;
  transition:border .5s, background .2s;  
}
.menuItem:hover {
  background: #34495e;
  cursor: pointer;
}
.one {
  border-left:5px solid blue;
}
.one:hover{
  border-left:20px solid blue;
}
.two {
 border-left:5px solid #2980b9;
}
.two:hover {
 border-left:20px solid #2980b9;
}
.three {
  border-left:5px solid pink;
}
.three:hover {
  border-left:20px solid pink;
}
.four {
  border-left:5px solid #e67e22;
}
.four:hover {
  border-left:20px solid #e67e22;
}
.five {
 border-left:5px solid yellow;
}
.five:hover {
 border-left:20px solid yellow;
}
  </style>
</head>
<body>
<div class="menu">
  <div class="menuItem one">1<span>A</span></div>
  <div class="menuItem two">2<span>B</span></div>
  <div class="menuItem three">3<span>C</span></div>
  <div class="menuItem four">4<span>D</span></div>
  <div class="menuItem five">5<span>E</span></div>
</div>
</body>
</html>

The code above is rendered as follows: