Rather new to this sorry in advance for the mess. I’m trying to put this menu section together before moving on to the next stages as this will be in the header of all pages.
it all started going suspiciously well then boom! all of a sudden my pc violently reminding me i should’ve stayed in school 🙁 anyway i made a function that removes the menu on a click but the function to close the menu is somehow called before the link click is registered. This results in a useless menu that i just spend a fair feww hours wrapping my head around.
heres the code – p.s. i said it was messy.
Will be forever grateful if solved!
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Official EST Performance</title>
</head>
<body data-barba="wrapper">
<!-- header and sidebar -->
<header class="navbar" id="intro">
<a href="/index.html"
><img src="images/EST-Logo.png" alt="Logo" class="logo"
/></a>
<div class="side-bar">
<!-- <a href="/menu.html">
<img src="images/menu.png" class="menu" alt="Menu Icon" />
</a> -->
<div class="social-links">
<img src="images/facebook-6-64.png" />
<img src="images/instagram-64.png" />
<img src="images/phone-30-64.png" />
</div>
<div class="useful-links">
<img src="images/help-64.png" />
<img src="images/business-contact-64.png" />
</div>
</div>
</header>
<div class="circle"></div>
<div class="menu">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="menu.html">Share</a></li>
<li><a href="">Activity</a></li>
<li><a href="">Settings</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
<div class="load-container">
<div class="loader"></div>
</div>
<div class="page-top" data-barba="container">
<section class="one">
<div class="sections">
<div class="content">
<small>15 years of...</small>
<h1>Stock to Track</h1>
<button type="button">Take a tour</button>
</div>
<div class="spacer">
<p>.</p>
</div>
</div>
<div class="scrolldown">
<a href="#two" class="scroll-down" address="true"></a>
</div>
</section>
<section class="two">
<div class="sections">
<div class="content">
<small>best in class</small>
<h1>ECU Remapping</h1>
<button type="button">Take a tour</button>
</div>
</div>
</section>
<section class="three">
<div class="sections">
<div class="content">
<small>high accuracy</small>
<h1>4-Wheel Dyno</h1>
<button type="button">Learn more</button>
</div>
</div>
</section>
<section class="four">
<div class="sections">
<div class="content">
<small>shop here for</small>
<h1>Genuine Parts</h1>
<button type="button">Take a tour</button>
</div>
</div>
</section>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="js/main.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: "good_timesregular", serif;
font-weight: 400;
font-size: 16px;
line-height: 30px;
background-color: #0c0f15;
overflow-x: hidden;
color: #ababab;
background: rgb(12, 12, 12);
height: 100%;
width: 100%;
}
@font-face {
font-family: "good_timesregular";
src: url("/css/good_times_rg.woff2") format("woff2"),
url("/css/good_times_rg.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.loader {
position: fixed;
width: 100vw;
height: 200vh;
pointer-events: none;
background: linear-gradient(rgb(12, 12, 12), rgb(12, 12, 12));
background-size: cover;
background-repeat: repeat;
background-position: center;
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hidden;
}
.load-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
width: 100%;
max-width: 100% !important;
overflow-x: hidden !important;
background-attachment: fixed;
}
.page-top {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100%;
width: 100%;
max-width: 100% !important;
overflow-x: hidden !important;
background-attachment: fixed;
transform: translateY(-100%);
}
.is-transitioning {
pointer-events: none;
cursor: progress;
}
/* ----------------section snapping----------------- */
section {
height: 95%;
display: flex;
position: relative;
scroll-snap-align: start;
}
.one {
background: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.5)),
url(/images/Hero.jpg);
background-size: cover;
background-position: center;
background-blend-mode: screen;
}
.two {
background: linear-gradient(rgba(0, 0, 0, 0.726), rgba(0, 0, 0, 0.5)),
url(/images/Image-3-ECU-Tuning-Image.jpg);
background-size: cover;
background-position: center;
background-blend-mode: darken;
}
.three {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(/images/Image-2-Tuning-Main-Top-Photo.jpg);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
.four {
background: linear-gradient(rgba(0, 0, 0, 0.651), rgba(0, 0, 0, 0.5)),
url(/images/PerformaceParts.jpg);
background-size: cover;
background-position: center;
}
.sections {
width: 100%;
height: 100%;
position: relative;
overflow: none;
}
.logo {
width: 100px;
cursor: pointer;
margin: 0 0 0 60px;
z-index: 1;
}
.navbar {
width: 95%;
height: 10%;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
}
button {
color: #fbfcfd;
padding: 10px 25px;
background: transparent;
border-radius: 20px;
border: 1px solid #fff;
outline: none;
cursor: pointer;
margin-left: 30px;
}
header {
height: 0;
z-index: 2;
}
.content {
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
border: 2px solid rgba(122, 6, 6, 0.705);
background-size: 14px auto;
border-radius: 50%;
z-index: 1;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
}
h1 {
position: relative;
color: #fbfcfd;
text-decoration: none;
font-size: clamp(40px, 10vw, 70px);
margin: 10px 0 10px 30px;
line-height: 60px;
text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}
small {
font-size: clamp(10px, 3vw, 20px);
margin-left: 30px;
}
.side-bar {
width: 50px;
height: 100%;
background: linear-gradient(#a4373bb2, #0f0f0f31);
position: fixed;
top: 0;
padding-top: 2%;
left: 0;
}
.social-links img,
.useful-links img {
width: 25px;
margin: 5px auto;
cursor: pointer;
}
.social-links {
width: 50px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.useful-links {
width: 50px;
text-align: center;
position: absolute;
bottom: 30px;
}
h1:hover {
color: rgba(245, 245, 245, 0.568);
text-shadow: 0 0 px whitesmoke;
}
h1::before {
content: "";
position: absolute;
display: block;
width: 70%;
height: 4px;
bottom: 0;
left: 0;
background-color: #fbfcfd4f;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
h1:hover::before {
transform: scaleX(1);
}
/*
icon selection
----------------------- */
::-webkit-scrollbar {
width: 6px;
background-color: #090809;
}
::-webkit-scrollbar-thumb {
background-color: #a4373b;
background-image: -webkit-linear-gradient(
45deg,
rgba(10, 8, 8, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(10, 8, 8, 0.116) 50%,
rgba(10, 8, 8, 0.2) 75%,
transparent 75%,
transparent
);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(107, 104, 104, 0.363);
background-color: #0908099c;
}
.heading-page {
text-transform: uppercase;
font-size: 43px;
font-weight: bolder;
letter-spacing: 3px;
color: white;
}
a {
color: inherit;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding-bottom: 20px;
}
a:hover,
a:focus {
color: #ababab;
text-decoration: none;
outline: 0 none;
}
h2,
h3,
h4,
h5,
h6 {
color: #171718;
font-family: "Open Sans", sans-serif;
margin: 0;
line-height: 1.3;
}
/* =========start of circle-out menu ================ */
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
cursor: pointer;
z-index: 4;
}
div.x,
div.y,
div.z {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
background: #ddd;
border-radius: 2px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x,
div.y,
div.z {
height: 3px;
width: 26px;
}
div.y {
top: 18px;
}
div.z {
top: 37px;
}
div.collapse {
top: 20px;
background: #b5171a;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.circle {
border-radius: 50%;
width: 0px;
height: 0px;
position: absolute;
top: 35px;
left: 36px;
background: #090909;
opacity: 1;
z-index: 1;
-webkit-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 300ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.circle.expand {
width: 1200px;
height: 1200px;
top: -560px;
left: -565px;
-webkit-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 400ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu {
height: 568px;
width: 320px;
position: absolute;
left: -500px;
z-index: 3;
}
div.menu.drop {
top: 0;
left: 0;
-webkit-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 30ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu ul li {
list-style: none;
position: absolute;
top: 50px;
left: 0;
opacity: 0;
width: 320px;
text-align: center;
z-index: 8;
-webkit-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 70ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu ul li a {
color: #f3f3f3;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
z-index: 8;
padding: 10px;
}
div.menu li.animate {
font-size: 21px;
opacity: 1;
z-index: 8;
margin-top: 10px;
-webkit-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 150ms cubic-bezier(0, 0.995, 0.99, 1);
}
div.menu li.animate:nth-of-type(1) {
top: 120px;
transition-delay: 0s;
}
div.menu li.animate:nth-of-type(2) {
top: 190px;
transition-delay: 0.03s;
}
div.menu li.animate:nth-of-type(3) {
top: 260px;
transition-delay: 0.06s;
}
div.menu li.animate:nth-of-type(4) {
top: 330px;
transition-delay: 0.09s;
}
div.menu li.animate:nth-of-type(5) {
top: 400px;
transition-delay: 0.12s;
}
div.menu li.animate:nth-of-type(6) {
top: 470px;
transition-delay: 0.15s;
}
/*=========end of circle-out menu ================ */
li a:hover {
color: rgba(245, 245, 245, 0.568);
text-shadow: 0 0 px whitesmoke;
}
li a::before {
content: "";
position: absolute;
display: block;
width: 70%;
height: 4px;
bottom: 0;
left: 0;
background-color: #fbfcfd4f;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
li a:hover::before {
transform: scaleX(1);
}
js:
/*Loader =========================*/
function init(){
const loader = document.querySelector('.loader');
// reset position of the loading screen
gsap.set(loader, {
scaleX: 0,
rotation: 6,
xPercent: -5,
yPercent: -50,
transformOrigin: 'left center',
autoAlpha: 1
});
function loaderIn() {
// GSAP tween to stretch the loading screen across the whole screen
return gsap.fromTo(loader,
{
rotation: 16,
scaleX: 0,
xPercent: -5
},
{
duration: 0.8,
xPercent: 0,
scaleX: 1,
rotation: 0,
ease: 'Power4.inOut',
transformOrigin: 'left center'
});
}
function loaderAway() {
// GSAP tween to hide the loading screen
return gsap.to(loader, {
duration: 0.8,
scaleX: 0,
xPercent: 5,
rotation: -16,
transformOrigin: 'right center',
ease: 'Power4.inOut'
});
}
// do something before the transition starts
barba.hooks.before(() => {
document.querySelector('html').classList.add('is-transitioning');
barba.wrapper.classList.add('is-animating');
});
// do something after the transition finishes
barba.hooks.after(() => {
document.querySelector('html').classList.remove('is-transitioning');
barba.wrapper.classList.remove('is-animating');
});
// scroll to the top of the page
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
barba.init({
transitions: [{
async leave() {
await loaderIn();
},
enter() {
loaderAway();
}
}]
})
}
window.addEventListener('load', function(){
init();
});
/*End of loader*/
/*menu*/
if( 'ontouchstart' in window ){ var click = 'touchstart'; }
else { var click = 'click'; }
$('div.burger').on(click, function(){
if( !$(this).hasClass('open') ){ openMenu(); }
else { closeMenu(); }
});
$('div.menu ul li a').on(click, function(e){
e.preventDefault();
closeMenu();
});
function openMenu(){
$('div.circle').addClass('expand');
$('div.burger').addClass('open');
$('div.x, div.y, div.z').addClass('collapse');
$('.menu li').addClass('animate');
$('div.menu').addClass('drop');
setTimeout(function(){
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function(){
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu(){
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.circle').removeClass('expand');
$('.menu li').removeClass('animate');
$('div.menu').removeClass('drop');
setTimeout(function(){
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function(){
$('div.y').show();
$('div.x, div.y, div.z').removeClass('collapse');
}, 70);
}