• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

reverse nav bar action on click

Contributor ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

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?

 

 

Views

5.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Apr 02, 2023 Apr 02, 2023
quote

 

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.remov
...

Votes

Translate

Translate
LEGEND , Apr 02, 2023 Apr 02, 2023

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 inclu

...

Votes

Translate

Translate
LEGEND ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

Thanks Osgood

Thought that might be the case..

 

is it possible to have the whole navigation div simply fade out for say .5 secs on the click of any button(HOME, ABOUT etc)  using css instead of the current  hard cut to a new page ? Just so it's slightly softer 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

You could but that will just expose the current page before a harsh jump to the next page. There's always going to be a slight harsh jump in a multi page application. This can be avoided where a single page application has been deployed because you can fade pages in and out.

 

Maybe consider fading in the pages themselves to provide a less immediate effect.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

is there a simple css to make that happen?

 

ie on each page

 

body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

quote

is there a simple css to make that happen?

 

ie on each page

 

body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframesfadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

 


By @reelhero

 

 

You could try that solution and see what sort of affect it provides.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

not that effective since the elements on each page animated in anyway--

 

id like to at least try the below but at .3 secs so that it happens quickly along with the jump

 

is it possible to have the whole navigation div simply fade out for say .5 secs on the click of any button(HOME, ABOUT etc)  using css instead of the current  hard cut to a new page ? Just so it's slightly softer 

 

how would i prompt it with just css (im not the greatest scripter !) ?

 

something like?

 

overlayz:active {
    animation: fadeInAnimation ease .3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
keyframesfadeInAnimation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
     }
}

 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

 

I dont know if the example below will help or just be more confusing - its just the logo/burger and the overlay/navigation:

 

 

 

<!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;
}

/* ANIMATE NAV LINKS FADE IN/UP */
.mainNavLinks li.fadeInUp {
transform: translateY(0);
animation: fadeInUp 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;
}


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

/* 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>
<!-- End overlayWrapper-->



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

// 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');
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 current state of overlayWrapper and assign correct css class
if(overlayWrapper.classList.contains('fadeInOverlay')) {
overlayWrapper.classList.remove('fadeInOverlay');
overlayWrapper.classList.add('fadeOutOverlay');
// Remove 'fade in up' returning links to default position
mainNavLinks.forEach(function (mainNavLink) {
mainNavLink.classList.remove('fadeInUp');
});
} else {
overlayWrapper.classList.remove('fadeOutOverlay');
overlayWrapper.classList.add('fadeInOverlay');
// Call function to animate nav links up
animateNavUp();
}

}
// 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>

 

 

 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

is there anything you cant do - wow-

 

i did some styling and added the background - havent tweaked it yet or added all the style to the new overlay but it works wonderfully !

did you do a delay on the fadein of the new page? looking for it-- want to tweak it just slightly..

 

cant thank you enough!

 

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

quote

did you do a delay on the fadein of the new page? looking for it-- want to tweak it just slightly..

 

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

 


By @reelhero

 

 

No, the user just gets whisked away to the correct linked page after the navigation has been reversed back into its default starting point. Any fading in of the page would have to be applied to that page itself as it can't be controlled from the external page.

 

That test page you put up looks pretty good l think.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

it looks great and i havent even finished styling it yet 

bravo! thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 01, 2023 Apr 01, 2023

Copy link to clipboard

Copied

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..

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

quote

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

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>

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

of course that worked great- i styled and added the video

 

https://toddheymandirector.com/index_menu_test5.html

 

i see a few of the mistakes i made.. mostly syntax etc..

 

it looks fabulous - a simple adjustment but its more fluid and elegant!

cant thank you enough you are always so helpful - very grateful

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

quote

 

it looks fabulous - a simple adjustment but its more fluid and elegant!

 


By @reelhero

 

It's the 'small things' that make the big difference...........that's why I prefer to code it myself and not get blinded by dependency on using a framework, which of course, can never entertain the 'small things' out of the box.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

I couldnt agree more - Ive never relied on them bc they ultimately make things cookie cutter-esque and even if you dont know why a site feels generic thats likely it..

 

I'm still very much a novice at all this bc its not my central trade but I always appreciate the time you give me.. And I really try to honor that by learning as much as I can each time..

 

cheers from sunny LA!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

btw - Ill place all the css on my linked stylesheet  and remove from the page - do you recommend placing the scripts on a seperate linked page or should I keep the scripts on each page? whats best practice?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

One more thing you'll need to do is make your links visible to search engines for SEO purposes as they are no longer visible being contained in a data-link attribute.

 

I would add the below directly AFTER the opening 'overlayWrapper' <div> tag and before the 'mainNavLinks' ul:

 

<ul class="mainNavLinksOffCanvas">
<li><a href="https://toddheymandirector.com/">Home</a></li>
<li><a href="https://toddheymandirector.com/reel">Campaigns</a></li>
<li><a href="https://toddheymandirector.com/about">About</a></li>
<li><a href="https://toddheymandirector.com/connect">Connect</a></li>
<li>
<a href="https://www.facebook.com/todd.heyman.18" target="_blank" >Facebook</a>
<a href="https://www.vimeo.com/toddheyman" target="_blank" >Vimeo</a>
<a href="https://www.instagram.com/toddheyman" target="_blank" >Instagram</a>
</li>
</ul>

 

Then make it effectively an 'unused' off canvas menu by moving it out of view for humans. Google will still see it.

 

.mainNavLinksOffCanvas {
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%)
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

copy that ! 🙂 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

'do you recommend placing the scripts on a seperate linked page or should I keep the scripts on each page? whats best practice?'

 

To make it more managable (should any of the functions be updated in the future) I would try to consolidate the javascript in a linked file BUT just keep testing it as you move them over as I have had the odd occasion where moving javascript to an external source hasnt worked for some reason, so testing is the key.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

got it - thank you..

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

all up-all pages

 

https://toddheymandirector.com/

 

i tested a bunch seems to be fine - i dont see any glitches but ill pay attention

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines