Javascript toggle navigation with sliding and fading effects

Question

Javascript toggle navigation with sliding and fading effects

Tap on the flower to reveal the menu. I have successfully implemented the animation for "process" fading in after the menu opens. However, I am struggling to reverse the animation when collapsing the menu. I want "process" to fade out before the menu closes again. Can anyone provide assistance with this?

function toggleClass() {
    var spin = document.getElementById("nav");

    spin.classList.toggle('in');
    spin.classList.toggle('out');
}

const delay = ms => new Promise(res => setTimeout(res, ms));
const fadeInAnimation = async () => {

    var element1 = document.getElementById("text1");
    var element2 = document.getElementById("text2");
    var element3 = document.getElementById("text3");

    await delay(300);

    element1.classList.toggle("show");
    element2.classList.toggle("show");
    element3.classList.toggle("show");
}

document.querySelector('#nav').addEventListener('click', fadeInAnimation);

:root{
  --seconds: 5s;
  --fast: 2s;
}

nav{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10px;
  padding-top: 20px;
  width: 100%;
}

nav img{
  width: 50px;
}

/* INN OUT */

#nav{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 50px;
    padding: 10px;
    background-color: white;
    margin-right: 20px;

    /*drop shadow*/
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);

}
.in {
    width: 50px;
}

.out {
    width: 400px;

}
.transition{
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition::all 0.2s ease-in-out;
}


#navtext{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.style{
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 15px;
  border-radius: 40px;
  color: lightgrey;
  transition: 0.1s;

}
#text{
  display: none;
}
.noshow{
  display: none;
}
.show{
  display: flex;
}

.show:hover{
  color: black;
  background-color: lightgrey
}

<nav>
  <div id="nav" class="in transition">
    <img id="spin" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spin" onclick="toggleClass()">
    <div id="navtext">
        <a id="text1" class="noshow style">Process</a>
        <a id="text2" class="noshow style">Process</a>
        <a id="text3" class="noshow style">Process</a>
    </div>
  </div>
</nav>

javascript html css

Answer 1

Answer №1

I have made adjustments to the JavaScript code for toggling the items, while maintaining the in/out toggle functionality.

Subsequently, based on the classes 'in' and 'out', I will handle the visibility of items using CSS:

.transition.in .noshow{
  visibility: hidden;
  opacity: 0;
  height:0;
}
.transition.out .noshow{
  visibility: visible;
  opacity: 1;
  height:auto;
  transition: 0.7s;
}

The decision to not utilize display: none || flex was intentional in order to preserve the transition effect.

Below is the revised code snippet:

function toggleClass() {
    var element = document.getElementById("nav");

    element.classList.toggle('in');
    element.classList.toggle('out');
}

document.querySelector('#nav').addEventListener('click', null);

:root{
  --seconds: 5s;
  --fast: 2s;
}

nav{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10px;
  padding-top: 20px;
  width: 100%;
}

nav img{
  width: 50px;
}

/* INN OUT */

#nav{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 50px;
    padding: 10px;
    background-color: white;
    margin-right: 20px;

    /*drop shadow*/
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);

}
.in {
    width: 50px;
}

.out {
    width: 400px;

}
.transition{
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out
    -o-transition:all 0.2s ease-in-out;
    transition::all 0.2s ease-in-out;
}


#navtext{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.style{
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 15px;
  border-radius: 40px;
  color: lightgrey;
  transition: 0.1s;

}
#text{
  display: none;
}
.transition.in .noshow{
  visibility: hidden;
  opacity: 0;
  height:0;
}
.transition.out .noshow{
  visibility: visible;
  opacity: 1;
  height:auto;
  transition: 0.7s;
}

.noshow:hover{
  color: black;
  background-color: lightgrey
}

<nav>
  <div id="nav" class="in transition">
    <img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="toggleClass()">
    <div id="navtext">
        <a id="text1" class="noshow style">Process</a>
        <a id="text2" class="noshow style">Process</a>
        <a id="text3" class="noshow style">Process</a>
    </div>
  </div>
</nav>

Answer 2

I have made adjustments to the JavaScript code for toggling the items, while maintaining the in/out toggle functionality.

Subsequently, based on the classes 'in' and 'out', I will handle the visibility of items using CSS:

.transition.in .noshow{
  visibility: hidden;
  opacity: 0;
  height:0;
}
.transition.out .noshow{
  visibility: visible;
  opacity: 1;
  height:auto;
  transition: 0.7s;
}

The decision to not utilize display: none || flex was intentional in order to preserve the transition effect.

Below is the revised code snippet:

function toggleClass() {
    var element = document.getElementById("nav");

    element.classList.toggle('in');
    element.classList.toggle('out');
}

document.querySelector('#nav').addEventListener('click', null);

:root{
  --seconds: 5s;
  --fast: 2s;
}

nav{
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10px;
  padding-top: 20px;
  width: 100%;
}

nav img{
  width: 50px;
}

/* INN OUT */

#nav{
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 50px;
    padding: 10px;
    background-color: white;
    margin-right: 20px;

    /*drop shadow*/
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);

}
.in {
    width: 50px;
}

.out {
    width: 400px;

}
.transition{
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out
    -o-transition:all 0.2s ease-in-out;
    transition::all 0.2s ease-in-out;
}


#navtext{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.style{
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 15px;
  border-radius: 40px;
  color: lightgrey;
  transition: 0.1s;

}
#text{
  display: none;
}
.transition.in .noshow{
  visibility: hidden;
  opacity: 0;
  height:0;
}
.transition.out .noshow{
  visibility: visible;
  opacity: 1;
  height:auto;
  transition: 0.7s;
}

.noshow:hover{
  color: black;
  background-color: lightgrey
}

<nav>
  <div id="nav" class="in transition">
    <img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="toggleClass()">
    <div id="navtext">
        <a id="text1" class="noshow style">Process</a>
        <a id="text2" class="noshow style">Process</a>
        <a id="text3" class="noshow style">Process</a>
    </div>
  </div>
</nav>

Answer 3

Answer №2

Ensure that only one "is-active" class is applied to the #nav element, utilize JavaScript to toggle it and style its descendants using CSS.

Implement the transition-delay property in CSS to intelligently adjust the timing of the transition when toggling:

const nav = document.querySelector("#nav");
nav.addEventListener("click", () => nav.classList.toggle("is-active"));

nav {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
}

#navImg {
  width: 50px;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.6s ease-in-out;
}

#nav {
  display: flex;
  padding: 10px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10);
}

#navText {
  display: flex;
  flex-flow: row nowrap;
  width: 0;
  transition: 0.3s ease-in-out 0.3s;
  overflow: hidden;
}

#navText a {
  display: inline-flex;
  align-self: center;
  padding: 10px 15px 10px 15px;
  margin-left: 10px;
  border-radius: 40px;
  color: #aaa;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0s;
}

/* ACTIVATE MODE */
#nav.is-active #navText {
  transition-delay: 0s; /* reverse delay timing logic */
  width: 270px; /* for demonstration purposes only, can be calculated dynamically with JS */
}
#nav.is-active #navText a {
  transition-delay: 0.3s; /* reverse delay timing logic */
  opacity: 1;
}
#nav.is-active #navImg {
  transform: rotate(1turn);
}

<nav>
  <div id="nav">
    <img id="navImg" src="https://i.dlpng.com/static/png/762080_preview_preview.png">
    <div id="navText">
      <a href="#!">Process</a>
      <a href="#!">Process</a>
      <a href="#!">Process</a>
    </div>
  </div>
</nav>

Answer 4

Ensure that only one "is-active" class is applied to the #nav element, utilize JavaScript to toggle it and style its descendants using CSS.

Implement the transition-delay property in CSS to intelligently adjust the timing of the transition when toggling:

const nav = document.querySelector("#nav");
nav.addEventListener("click", () => nav.classList.toggle("is-active"));

nav {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
}

#navImg {
  width: 50px;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.6s ease-in-out;
}

#nav {
  display: flex;
  padding: 10px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10);
}

#navText {
  display: flex;
  flex-flow: row nowrap;
  width: 0;
  transition: 0.3s ease-in-out 0.3s;
  overflow: hidden;
}

#navText a {
  display: inline-flex;
  align-self: center;
  padding: 10px 15px 10px 15px;
  margin-left: 10px;
  border-radius: 40px;
  color: #aaa;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0s;
}

/* ACTIVATE MODE */
#nav.is-active #navText {
  transition-delay: 0s; /* reverse delay timing logic */
  width: 270px; /* for demonstration purposes only, can be calculated dynamically with JS */
}
#nav.is-active #navText a {
  transition-delay: 0.3s; /* reverse delay timing logic */
  opacity: 1;
}
#nav.is-active #navImg {
  transform: rotate(1turn);
}

<nav>
  <div id="nav">
    <img id="navImg" src="https://i.dlpng.com/static/png/762080_preview_preview.png">
    <div id="navText">
      <a href="#!">Process</a>
      <a href="#!">Process</a>
      <a href="#!">Process</a>
    </div>
  </div>
</nav>

Javascript toggle navigation with sliding and fading effects

Answer №1

Answer №2

Similar questions

Looking to add a dynamic drop-down menu to my search bar, similar to Google search

HTML & jQuery guide: The correct way to execute a function on an anchor element (compatible across all browsers)

Are you in need of a JavaScript data validation tool?

The regular expression used for validating domains does not function properly in the Safari browser

There seems to be a connection issue between my Jquery and HTML, as they

Error Not Captured: [$rootScope:infdig]

"Div does not perfectly match the height of its parent div when using the 'inherit' value

How about a unique scrolling experience?

Ways to locate the div that specifically contains a word with an exact match

Custom cellRenderer prevents Ag Grid's autoHeight and wrapText features from functioning properly

Which framework should be used: client-side or server-side?

Tips on retrieving an array in a different page post ajax transfer

Error Message: discord.js is unable to retrieve the specified property 'find' due to it being undefined, resulting in

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

Update the value after verifying the element

How can you modify the styling of a single child element within a grandparent container and then revert it back to its original state

Is it possible to resize an inline SVG element without modifying the <svg> tag?

Tips for aligning 'textarea' and 'a' (button) tags in a single row

Tips for transferring data and executing a PHP script without page refresh

access the useState value within the event listener