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 - 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 |
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!
Name | Size |
Motion Lines - codevember - 02 - 2016 | 2,744 Kb |
Mountains - codevember 04 - 2016 | 2,232 Kb |
Gameboy - codevember 06 - 2016 | 2,666 Kb |
A Pen by Caio Cares | 2,903 Kb |
BlendMode - codevember 05 - 2016 | 2,465 Kb |
Vertical Menu - codevember 07 - 2016 | 4,267 Kb |
Login UI | 4,958 Kb |
Hover Button - codevember 03 - 2016 | 2,207 Kb |
Travel App - codevember 09 - 2016 | 5,435 Kb |
Calculator - codevember 08 - 2016 | 3,260 Kb |
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!
Name | Username | Size |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
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!