Vertical Menu - codevember 07 - 2016
How do I make an vertical menu - codevember 07 - 2016?
What is a vertical menu - codevember 07 - 2016? How do you make a vertical menu - codevember 07 - 2016? This script and codes were developed by Caio Cares on 20 January 2023, Friday.
Vertical Menu - codevember 07 - 2016 Previews
Vertical Menu - codevember 07 - 2016 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical Menu - codevember 07 - 2016</title> <link rel="stylesheet" href="css/style.css">
</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 src="js/index.js"></script>
</body>
</html>Vertical Menu - codevember 07 - 2016 - Script Codes CSS Codes
@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 */
}
Vertical Menu - codevember 07 - 2016 - Script Codes JS Codes
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);
}
| Developer | Caio Cares |
| Username | caiocares |
| Uploaded | January 20, 2023 |
| Rating | 4.5 |
| Size | 4,267 Kb |
| Views | 6,072 |
Do you need developer help for Vertical Menu - codevember 07 - 2016?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Caio Cares (caiocares) Script Codes
| Name | Size |
| Hover Button - codevember 03 - 2016 | 2,207 Kb |
| Motion Lines - codevember - 02 - 2016 | 2,744 Kb |
| BlendMode - codevember 05 - 2016 | 2,465 Kb |
| Calculator - codevember 08 - 2016 | 3,260 Kb |
| Mountains - codevember 04 - 2016 | 2,232 Kb |
| Travel App - codevember 09 - 2016 | 5,435 Kb |
| A Pen by Caio Cares | 2,903 Kb |
| Gameboy - codevember 06 - 2016 | 2,666 Kb |
| Batman - codevember 01 - 2016 | 2,924 Kb |
| Login UI | 4,958 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Basic template | Tomcat | 1,675 Kb |
| Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
| Pure CSS Spinners | Jlong | 2,043 Kb |
| Portfolio Page | HuffmanJ25 | 5,240 Kb |
| CSS3 Diamond | Rendro | 1,960 Kb |
| Loading... | Adamjacob | 2,384 Kb |
| Bootstrap example | Ssaakkaa | 2,716 Kb |
| See Through | Larrygeams | 77,410 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!