Inspiring

Answered

reverse nav bar action on click

Forum|Forum|2 years ago
March 31, 2023
1 reply
7990 views

Not a major priority but I think my navigation would be more elegant if the menu bar reversed out as the page shifts onclick in a similar manner to the way it loads.

https://toddheymandirector.com/

IE.. right now if you click on the menu bar on the upper right the navigation bar slides up slightly and fades into place, each title sequentially--

as is, if you click any page it instantly disappears.

Id love each page title.. ie HOME, CAMPAIGNS, ABOUT, CONNECT and the social buttons to slide down slightly (same amount as the move up) as they dissolve out and the page you've clicked appears..

thoughts?

This topic has been closed for replies.

Correct answer osgood_

thank you -

I was extremely cautious about following your edits but Im clearly doing something wrong

https://toddheymandirector.com/index_menu_test4.html

only the last div inside the wrapper (social) slides down on link click, and it doesnt look like it fades out..

the copyright i could only get it to appear when i changed bottom: 120px; instead of 30 px which doesnt make sense and it doesnt slide in last like it does here https://toddheymandirector.com/

what am i getting wrong?

Alright, maybe if I post the complete code example (see below) it might help you to trace where it is you are going wrong. All I've changed is setting the opacity to 0 at 25% in the 'fadeInDown' keyframe animation so you can see more readily the fading out of the links and I've added a setTimeout function to delay the copyRight information sliding up.

I think the one bit of important info I left out in my previous post was to inform you to assign the copyRight <div> to a variable, which is included in the code below.

const copyRight = document.querySelector('.copyRight');

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todd Heyman - Page Overlay/Navigation</title>
<link rel="stylesheet" type="text/css" href="https://toddheymandirector.com/css/style_heyman_2020.css">
<style>
body {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
position: relative;
z-index: 110;
}
/* OVERLAY WRAPPER */
.overlayWrapper {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: -100;
height: 100vh;
width: 100%;
top: 0;
background-color: #000;
opacity: 0;
}

/* MAIN NAV LINKS */
.mainNavLinks {
margin: 0;
padding: 0;
/*overflow: hidden;*/
}

.mainNavLinks li {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
transform: translateY(210px);
transition: all 700ms ease;
opacity: 0;
}

/* ANIMATE NAV LINKS FADE IN/UP */
.mainNavLinks li.fadeInUp {
transform: translateY(0);
animation: fadeInUp ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* ANIMATE NAV LINKS FADE OUT/DOWN */
.mainNavLinks li.fadeOutDown {
transform: translateY(210px);
animation: fadeInDown ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* MAIN NAV LINKS */
.mainNavLinks li a {
display: block;
text-decoration: none;
text-align: center;
color: orange;
}

/* ANIMATE OVERLAY WRAPPER FADE IN */
.overlayWrapper.fadeInOverlay {
animation: fadeInOverlay ease 700ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
z-index: 100;
}

/* ANIMATE OVERLAY WRAPPER FADE OUT */
.overlayWrapper.fadeOutOverlay {
animation: fadeOutOverlay ease 700ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* COPYRIGHT */
.copyRight {
color: orange;
position: fixed;
bottom: 30px;
transform: translateY(100px);
transition: all 1s ease;
}

.copyRight.copyRightSlideUp {
transform: translateY(0);
}

/* -------KEYFRAME ANIMATIONS-------- */
/* MAIN NAV LINKS FADE IN/UP */
@keyframes fadeInUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


@keyframes fadeInDown {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}

/* FADE IN OVERLAY */
@keyframes fadeInOverlay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* FADE OUT OVERLAY */
@keyframes fadeOutOverlay {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

</style>
</head>
<body>
<header class="header">
<h1 class="th_logo_white th_logo_white_home slideRight">
<a href="https://toddheymandirector.com/">
<img src="https://toddheymandirector.com/images/home/THLOGO.png" alt="image" width="27px" height="55px"></a>
</h1>
<div class="button_container button_container_home slideLeft" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="middle2"></span>
<span class="bottom"></span>
</div>
</header>

<div class="overlayWrapper">
<ul class="mainNavLinks">
<li data-link="https://toddheymandirector.com/"><a href="#">Home</a></li>
<li data-link="https://toddheymandirector.com/reel"><a href="#">Campaigns</a></li>
<li data-link="https://toddheymandirector.com/about"><a href="#">About</a></li>
<li data-link="https://toddheymandirector.com/connect"><a href="#">Connect</a></li>
<li>
<div id="social_overlay2">
<div id="social_overlay">
<a href="https://www.facebook.com/todd.heyman.18" target="_blank" >
<div class="social_font">f</div>
</a>
<a href="https://www.vimeo.com/toddheyman" target="_blank" >
<div class="social_font">9</div>
</a>
<a href="https://www.instagram.com/toddheyman" target="_blank" >
<div class="social_font">c</div>
</a>
</div>
</div>
</li>
</ul>

<div class="copyRight">Copyright Information</div>
</div>
<!-- End overlayWrapper-->



<script>
<!-- Assign variables-->
const mainNavLinks = document.querySelectorAll('.mainNavLinks li')
const toggle = document.querySelector('#toggle');
const overlayWrapper = document.querySelector('.overlayWrapper');
const copyRight = document.querySelector('.copyRight');

// Add onclick event listener to main nav links
mainNavLinks.forEach(function(mainNavLink) {
mainNavLink.addEventListener('click' , removeFadeInUp);
})

// Remove 'fade in up' returning links to default position
function removeFadeInUp() {
// Get the current link from the data-link attribute
let link = this.getAttribute('data-link');
// Loop through main nav links
let i = mainNavLinks.length - 1;
setInterval(function(){
if(i < 0) {
return false;
}
else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
copyRight.classList.remove('copyRightSlideUp');
i--;
}
}, 70);

// Go to current link after 1 second
setTimeout(function() {
window.location = link;
}, 1000)

}
// End removeFadeInUp function

toggle.onclick = function() {
// Animate burger icon
this.classList.toggle('active');
// Check if state of overlayWrapper and assign correct css class
if(overlayWrapper.classList.contains('fadeInOverlay')) {
overlayWrapper.classList.remove('fadeInOverlay');
overlayWrapper.classList.add('fadeOutOverlay');
copyRight.classList.remove('copyRightSlideUp');
// Remove 'fade in up' returning links to default position
mainNavLinks.forEach(function (mainNavLink) {
mainNavLink.classList.remove('fadeInUp');
mainNavLink.classList.remove('fadeOutDown');
});
} else {
overlayWrapper.classList.remove('fadeOutOverlay');
overlayWrapper.classList.add('fadeInOverlay');
// Call function to animate nav links up
animateNavUp();
setTimeout(function() {
copyRight.classList.add('copyRightSlideUp');
}, 1000)
}

}
// End toggle onclick function

function animateNavUp() {
let i = 0;
setInterval(function(){
if(i === mainNavLinks.length) {
return false;
}
else {
mainNavLinks[i].classList.add('fadeInUp');
i++;
}
}, 70);
}
// End animateNavUp function

</script>

</body>
</html>

O

osgood_

Braniac

You probably dont want to go there for the little benefit it will bring as you will have to radically update the code for the navigation. You would have to reverse the keyframe animation using javascript or possibly even need to rewrite the animation in javascript rather than using css keyframes. You would also need to set a 'timeout' function in javascript to allow the reverse animation to take place before the user is then taken to the link/page they clicked on. This would need to be done using something like a data-link attribute on the li tags rather than setting a direct link on the 'a href ' tags.

R

REELHEROAuthor

Inspiring

Hi Osgood-- I was able to simulate my original request (it doesnt reverse out but moves down slightly and fades), however it doesnt transition to the page clicked it just animates but stays on the current page:

https://toddheymandirector.com/index_menu_test.html

i used:

.overlayz-menu:active {
transform: translateY(50px);
opacity:0;
transition: .5s;

}

what am i missing?

O

osgood_

Braniac

i stylized it and spaced it out

https://toddheymandirector.com/index_menu_test2.html#

two quick questions:

the mainNavLinks slide up and fade in - but they just slide out and dont fade out if im not mistaken -

I tried to create a seperate animation (fadeDownOut) but its not working

not essential at all but Id love to try

--

also i cant get the copyright footer to appear as it does on https://toddheymandirector.com/ when you click the menu-

i added the id to the overlayWrapper that matches the script at the bottom of the page but no go..

the mainNavLinks slide up and fade in - but they just slide out and dont fade out if im not mistaken -
I tried to create a seperate animation (fadeDownOut) but its not working

By @REELHERO

Create a new '.mainNavLinks li.fadeOutDown' css class:

.mainNavLinks li.fadeOutDown {
transform: translateY(210px);
animation: fadeInDown ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

Under the function 'removeFadeInUp()' add the line in bold below:

else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
i--;
}

Under the 'toggle.onclick = function() {' add the line in bold below:

mainNavLinks.forEach(function (mainNavLink) {
mainNavLink.classList.remove('fadeInUp');
mainNavLink.classList.remove('fadeOutDown');
});

You can then also remove 'overflow: hidden' shown in bold below from the 'mainNavLinks' css:

/* MAIN NAV LINKS */
.mainNavLinks {
margin: 0;
padding: 0;
overflow: hidden;
}

Plus, you can add 'opacity: 0' shown in bold below to the 'mainNavLinks li' css:

.mainNavLinks li {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
transform: translateY(210px);
transition: all 700ms ease;
opacity: 0;
}

also i cant get the copyright footer to appear as it does on https://toddheymandirector.com/ when you click the menu-

Add the copyRight <div> to the overlayWrapper <div> directly before its closing tag </div>

<div class="copyRight">Copyright Information</div>

Create 2 new css selectors:

.copyRight {
color: #fff;
position: fixed;
bottom: 30px;
transform: translateY(100px);
transition: all 1s ease;
}

.copyRight.copyRightSlideUp {
transform: translateY(0);
}

Under the function 'removeFadeInUp()' add the line in bold below:

else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
copyRight.classList.remove('copyRightSlideUp');
i--;
}

Under the toggle.onclick = function() { add the lines in bold below:

if (overlayWrapper.classList.contains('fadeInOverlay')) {
overlayWrapper.classList.remove('fadeInOverlay');
overlayWrapper.classList.add('fadeOutOverlay');
copyRight.classList.remove('copyRightSlideUp');


....and after the 'animateNavUp()' function:

animateNavUp();
copyRight.classList.add('copyRightSlideUp');

That's it.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded