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>

osgood_

Brainiac

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.

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?

REELHEROAuthor

Inspiring

I agree with most of what you are saying in the above. I admire the way that you (@osgood_) have been helping @REELHERO and I think that the resultant website is a fantastic creation. This must give both of you a great feeling of accomplisment.

But what of the person visiting the site.
Is that what they want?
When they dial in on the site using their mobile phone, are they told beforehand that 30 MB of data is being downloaded every 1 minute that they are watching the homescreen?
What of the contrast ratio for the person with low vision?
Why disable zooming for those same users with low vision?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Why upset the semantic structure (and that of secreen readers) of the page by not having the heading elements in a sequentially-descending order?

I could go on. I just wanted to illustrate here that there is much more to a website than a beautiful creation. It is not only about creativity, it is more about the user of the site.

By @BenPleysier

All good points to take into consideration. So where is the balance to be found............provide a boring experience, mainly for minority groups and risk losing many users or provide a more exciting experience and risk losing a minority of users.

Obviously in this case the website is targeting the creative sector probably in ad agencies and they are mainly the younger generation with lots of visionary ideas, so need to be wowed. On the other hand it might not be so great a solution should it be appealing to sight challenged old age pensioners on dial up modems.

Anyway we've gone off subject, with or without a framework, which is what was being discussed, any of the above points you mention could result. I was more discussing the merits, benefits and satisfaction of understanding enough to be able to make the decisions, taking into account points raised and actually being able to create what feels personally right. Someone has to ultimately make that call and the more you know will obviously help in not only making those decisions but implementing them.

Interesting though and you're quite correct, it's about knowing your market. Our local coffee house has just gone all digital, you can only order on screen now and no cash. We'll l won't be going there again as it doesn't appeal to me but they obviously know their market and who spends the most and that certainly is not me. I'm a dinosaur in their eyes.........you can't please everyone.

Not much I can add that hasn't been said but I will concur, knowing your market and what you want to convey to that market is essential. Osgood is right, my viewers are ad agencies and production companies and I'm competing with some of the finest talent that direct the commercials you see on television and films across multiplexes worldwide. Anything that helps me separate from the pack is a golden chalice.. And as Osgood said the whole world has gone digital, my website could be the one and only way they see my work. It must be memorable (in many cases a simple Wix site is fine- Im just not one of those cases). The only way that happens is if I respect the craft of website design, absorb what Osgood has taught me and make something special. That said, I'm happy when my retiree father can see the site on his iphone 7..

I am a self-taught director as well. I managed to become a member of the DGA (Directors Guild of America-members include Steven Spielberg and the like) through sheer will and drive. And much of it was through a relentless approach of self-improvent. The good news is, I am seeing the younger members reflect that same drive and self-reliance and a desire to create original enduring work despite the grinding march of tentpole films (ie the marvel movies). A good sign for the future.

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