A unique CSS transition effect applied after toggling a class

Greetings everyone

I recently created this code pen https://codepen.io/alexyap/full/MmYvLw/. I am facing a challenge with my navigation menu. The transition in works perfectly, but the fade-out effect looks terrible. I'm struggling to figure out this issue.

<div id="nav-container" class="hidden">
 <ul>
  <li id="nav1" class="hidden"><a href="#">About</a></li>
  <li id="nav2" class="hidden"><a href="#">Work</a></li>
  <li id="nav3" class="hidden"><a href="#">Contact</a></li>
 </ul>
</div>


.hidden {
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}

JS:

$("#nav-container").delay(200).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav1").delay(400).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav2").delay(600).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav3").delay(800).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Removing the "hidden" class from #nav-container fixes the issue, but it blocks the CTA button on the landing page. My goal is to have the nav menu links transition out one by one after clicking the menu button that changes into an 'X', similar to how it transitions without re-adding the "hidden" class to #nav-container. I apologize if I'm not clear. English is not my first language, but please take a look at my code pen to understand what I mean.

jquerycsscss-transitions

Answer №1

To achieve this effect, consider transferring the transitions to the CSS and toggling a class on a container. Utilize the transition-delay property for the desired sequential timing. Refer to the sample below.

Corresponding HTML:

<div id="menu-overlay"></div>
<div id="menu-button-container">
  <div id="menu-button">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div id="nav-container">
  <ul>
    <li id="nav1"><a href="#">About</a></li>
    <li id="nav2"><a href="#">Work</a></li>
    <li id="nav3"><a href="#">Contact</a></li>
  </ul>
</div>

Related CSS:

#menu-overlay {
  position: absolute;
  height: 0;
  width: 100%;
  background: rgba(52, 73, 94,1.0);
  left: 0;
  top: 0;
  transition: .5s ease-in 1200ms;
  z-index: 2000;
}
.showing #menu-overlay {
  transition: .5s ease-in 0s;
}
.reveal {
  height: 100vh !important;
}
#nav-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  transition-property: z-index;
  transition-delay: 1200ms;
}
.showing #nav-container {
  z-index: 2000;
  transition-delay: 0s;
}
#nav-container ul li {
  list-style: none;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}
.showing #nav-container ul li {
  opacity: 1;
  visibility: visible;
  margin-left: 0;
}
#nav1 {
  transition: 0.6s ease-in 200ms;
}
#nav2 {
  transition: 0.6s ease-in 400ms;
}
#nav3 {
  transition: 0.6s ease-in 600ms;
}

Relevant JS:

$('#menu-button').click(function(){
  $('body').toggleClass('showing');
});

Answer №2

If you are looking to adapt your code for mobile screens, here is the code that I used:

const header = document.querySelector("header");
window.addEventListener ("scroll", function(){
      header.classList.toggle ("sticky", this.window.scrollY > 0);
})

let menu = document.querySelector('#menu-icon');
let navmenu = document.querySelector('.navmenu');

menu.onclick = () => {
      menu.classList.toggle('bx-x');
      navmenu.classList.toggle('open');
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Jost', sans-serif;
    list-style: none;
    text-decoration: none;
}
header{
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10%;
}
.logo img{
    max-width: 120px;
    height: auto;
}
.navmenu{
    display: flex;
}
.navmenu a{
    color: #474141;
    font-size: 16px;
    text-transform: capitalize;
    padding: 10px 20px;
    font-weight: 400;
    transform: all .42s ease ;
}
.navmenu a:hover{
    color: #EE1C47;
}
.nav-icon{
    display: flex;
    align-items:center;
}
.nav-icon i{
    margin-right: 20px;
    color: #2c2c2c;
    font-size: 25px;
    font-weight: 400;
    transition: all .42s ease;
}
.nav-icon i:hover{
    transform: scale(1.1);
    color: #EE1C47;
}
#menu-icon{
    font-size: 35px;
    color: #2c2c2c;
    z-index: 10001;
    cursor: pointer;
}
 <header>
        <a href="#" class="logo"><img src="example.jpg" alt=""></a>

        <ul class="navmenu">
            <li><a href="#">home</a></li>
            <li><a href="#">shop</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="nav-icon">
            <a href="#"><i class='bx bx-search'></i></a>
            <a href="#"><i class='bx bx-user'></i></a>
            <a href="#"><i class='bx bx-cart'></i></a>

            <div class="bx bx-menu" id="menu-icon"></div>
        </div>
    </header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the jQuery queue method to trigger an action following the completion of a toggleClass

I am working on a sliding content element that should display its contents when clicked. Below is the code snippet: <div class="boxwrap hidden-sm hidden-xs"> <div class="boxright pull-left"> <a href="#" id="toggleContactOpen" class="pull ...

jquery

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

javascriptjquerycssoverlay

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

Encountering a "404 (Not Found)" error while attempting to navigate to the homepage using MongoDB and Node.js

Seeking assistance with my app project, which serves as a companion to video games. I am facing challenges in establishing a connection to the mongo server. Upon running the server.js file in node, the terminal confirms that the connection is successful. ...

jquerynode.jsmongodb

Retrieve the selected status and value of the option that initiates a multiple selection change event

Is there a way to track only the value that has been added or removed from a selection, rather than getting an array of all selected values? How can I monitor each individual option within a selector to identify which one has changed, instead of looking a ...

javascriptjqueryhtml-selectmultipleselection

Chrome/IE displaying text indentation issue within nested divs

Encountering issues with nested divs in Chrome and IE, while Firefox works smoothly. The outer div has both text-indent and margin-top styles set. The inner div's display style is block, so the content after it should appear on a new line without any ...

htmlcssfirefoxgoogle-chrometext-indent

Having to click twice in order to close the jQuery dialog box can be frustrating

I've been attempting to set up a div that pops up using jQuery dialog. Initially, when the user clicks on the button and opens the dialog, it closes with the first click. The second time they try to close the dialog, it will reopen the same popup, r ...

javascriptjqueryjquery-ui-dialog

Exploring jQuery selectors with a looping mechanism to trigger click events

Trying to figure out how to loop through numerical selector values in JQuery while utilizing an onClick event handler. Is this a chicken-or-egg situation or perhaps a closure issue? Any guidance would be appreciated. $("#q01").click(function() { cle ...

jqueryeventsloopsclickhandler

jQuery doesn't bother holding its breath for the response of the function

After searching through numerous similar questions, I have yet to come across a suitable solution for my issue. The scenario is that I have two functions, one of which returns a boolean value. My objective is to execute a specific task only when the boolea ...

jqueryforms

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

javascriptjqueryruby-on-railsajax

Tips for including multiple JSON results into a single text box for auto-complete purposes

I am trying to combine different autocomplete list results into one text box. It's straightforward to use separate text boxes for different autocomplete results. HTML: <input id="university" name="university" type="text" /> <input id="unive ...

javascriptjqueryjsonjquery-autocomplete

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

What is the best way to display a default image in a kendo grid when the image field is empty?

I am trying to display a default image if the image field is empty. Below is the code for the image field: { field: "Photo", title: "Photo", template: '<img src="#= Photo ? Photo : 'default.jpg' #" alt="image" width="80px" height="80px" ...

javascriptjquerykendo-uikendo-grid

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

javascriptjqueryhtmlcss

Every other attempt at an Ajax request seems to be successful

I'm new to using ajax and I'm having an issue with submitting a form through a post request. Strangely, the code I wrote only works every other time. The first time I submit the form, it goes through ajax successfully. However, on the second subm ...

javascriptjquery

From where was this color of the navigation bar derived?

As I delve into a site previously worked on by someone else, my task is to recreate the navigation they implemented. However, I am unable to locate in the source code what was used for the navigation background. The challenge lies in the fact that after m ...

htmlcssnav

Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2 Regardless of the screen size, the main div will always fill the space visible to the use ...

javascripthtmlcss

Various hues blending and intertwining with one another

https://i.stack.imgur.com/zLrNK.png Could someone please clarify what is happening here? I'm attempting to change the background color to dodgerblue, but for some reason, the white background color is still showing through. Below is the code snippet ...

htmlcssangular

Clear the modal form in Codeigniter and AJAX upon closing the edit modal

Having an issue with my modal form - when I open the edit modal, the data is fetched and that part works well. However, when I close the modal and try to add a new user, the data is automatically fetched again. Why is this happening? Shouldn't the for ...

javascriptjqueryajaxcodeigniter

Error message "Undefined error encountered when attempting to display an array of objects using jQuery and PHP through AJAX on the console"

While trying to parse a JSON using jQuery and AJAX, I encountered an issue where some objects in the Array, like the SUM(amountbet) object, are showing up as "undefined" in the console. The image above depicts the SUM(amountbet) object appearing ...

javascriptphpjqueryajax