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

Widget class with an AJAX function

I designed a custom WordPress Widget that fetches the latest posts. Initially, it retrieves a specific number of posts and provides a button for users to load more posts through AJAX. Here is the complete code for the Widget: /* recent posts Widget ==== ...

phpjqueryajaxwordpresswidget

Can CSS be used to generate a grid or error image in Internet Explorer?

Can an image like this be created using CSS in Internet Explorer? I attempted to use filter: progid:DXImageTransform.Microsoft.gradient, but it was unsuccessful. ...

csshtmlinternet-explorer

django was unable to interpret the remainder: 'css/materialize.min.css' from 'css/materialize.min.css'

In following a tutorial, I am adding a chat bot UI that is embedded in Django. The file structure looks like this: . ├── db.sqlite3 ├── installDjango.sh ├── manage.py ├── rasadjango │ ├── asgi.py │ ├── __init__.p ...

cssdjango

Effortless signing out using AJAX, Zend Framework, and jQuery

Is there a way to invoke the logout action upon a user clicking the signout link without needing a page refresh or redirecting? Any assistance would be greatly appreciated. Thank you! ...

jqueryajaxzend-framework

What is the significance of $($(this)) in coding jargon

While browsing the internet, I came across a code snippet that includes the following line: if ($($(this)).hasClass("footer_default")) { $('#abc') .appendTo($(this)) .toolbar({position: "fixed"}); } I'm curious ab ...

javascriptjquery

Steps to configure caching settings to ensure no caching for the entire site during specific hours, and constant no-cache policy for a particular page

Managing cache for my website has become quite the challenge. Some pages need to be cached during certain hours to improve navigation speed, while others must not be cached during crucial data update times. And to add to the complexity, there are pages tha ...

javascriptphpjquerycaching

Create a table within the B-Col element that automatically adjusts its size to match the column width using Vue-Bootstrap

Within my Vue component, I have the following code snippet: <b-modal ...> <b-row> <b-col sm="12"> <table > <tr v-for=... :key="key"> <td><strong>{{ key }}: </str ...

cssxmlvue.jsbootstrap-vue

A versatile function that displays a loading icon on top of a specified div

Is it possible to pass an identifier for a particular div element to a function, where the function will display a loading image that covers the entire div, and then pass the same identifier to another function to hide the loading image? I am looking to cr ...

javascriptjqueryajaxhtmlcss

I prefer children to have their own unique style, instead of inheriting their parent's CSS

I currently have a project structured in the following way: There is an index page with a full layout Separate PHP files that are included in the index page Bootstrap is used in the index page, however, in some of the separate PHP files I also use jqgri ...

phpjquerycsstwitter-bootstrap

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

My code is giving me trouble when trying to add an image background-image: url('/images/img-2.jpg'); An error occurred during compilation. ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src?? ...

javascripthtmlcssreactjs

Having an issue with the return function in a jQuery $.ajax call

I am currently working with a $.ajax call that is structured like this: <script type="text/javascript"> $(document).ready(function () { $('#add_com_frm').submit(function (e) { e.preventDefault(); var $b ...

javascriptphpjqueryjsonajax

Using setTimeout with jQuery.Deferred

I decided to experiment with jQuery Deferred and setTimeout by creating a basic list. <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> In my script, I ...

javascriptjquery

Is there a versatile spell-checking tool available for HTML text boxes?

When designing a text box in HTML, I want to provide real-time input validation and spell check for the user's text. My goal is to underline any spelling mistakes as they type. This seems like a basic feature, but I've yet to find a plugin or AP ...

javascriptjqueryhtmlvalidationjquery-ui

Positioning div at the top of the body section

Presently, I have this specific designhttps://i.sstatic.net/U4IT4.png The issue I am facing is with the alignment of the jumbotron (boostrap v5). It is currently centered, but I would like it to be positioned at the very top of the body. I have experiment ...

htmlcssfrontendbootstrap-5

Using JavaScript along with Ajax and JSON allows for sending complex data structures such as objects and

One of the features on my form allows users to input information about their clients. This versatile form enables users to add multiple phone numbers, email addresses, and physical addresses without any limitations. When adding a phone number or an email ...

javascriptjqueryajaxjson

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

cssangularjscanvaszooming

Accessing information from an ASP.NET web service through an Ajax request in AngularJS

UPDATE: included additional methods for clarity enhancement I am attempting to fetch data from an ASP.NET webservice in C# using Ajax calls in AngularJS. The webmethod is structured as follows: [WebMethod] public User getUserByEmail(String Email) ...

c#jqueryasp.netajaxangularjs

Loading Datatables using PHP to send JSON data

I seem to be facing some difficulty in troubleshooting the issue within my code. Currently, I am working on a search script and would like to display the results using Datatables. I have a search form that sends data to my PHP file which then returns a JS ...

javascriptphpjqueryjsondatatables

Display modal after drop-down selection, triggered by API response

Currently, I am working on integrating an API to enable users to make payments through a modal. Users should be able to enter an amount and select a payment frequency. I have successfully extracted various payment frequencies from the API response and pop ...

javascriptjqueryhtmlapivue.js

Session variable not refreshing post AJAX query

I'm facing a bit of a puzzle here. I have 2 php pages in play. One acts as the template display, and upon clicking, an AJAX call fetches an external page to show all necessary information. The issue arises with my session variable not updating as expe ...

phpjqueryajaxsessionpagination