How to Create a Cool Fade-Out Effect on WordPress Menu Links

If you’re using the Twenty Twenty-Four theme (or any theme with similar menu structures), adding a dynamic fade-out effect to your navigation menu can enhance your site’s user experience and give it a modern, interactive feel. In this post, I’ll show you how to implement a simple jQuery and CSS solution that fades out all other menu links when one is clicked.

Step 1: Enqueue jQuery

WordPress already includes jQuery, but we need to ensure it’s properly enqueued in the theme. Add this code to your functions.php file to load jQuery:

// Enqueue jQuery in the theme function enqueue_custom_scripts() { wp_enqueue_script(‘jquery’); } add_action(‘wp_enqueue_scripts’, ‘enqueue_custom_scripts’);

Step 2: Add Custom CSS for the Fade Effect

Next, we need to add some CSS to control the fade-out effect for the menu items. This CSS ensures that the menu items smoothly transition between visible and faded states. Again, we’ll add this to functions.php:

// Custom CSS for fading out menu items function custom_menu_fade_css() { wp_enqueue_style(‘twentytwentyfour-style’, get_stylesheet_uri()); $custom_css = ” .wp-block-navigation-item { transition: opacity 0.5s ease; } .wp-block-navigation-item.fade-out { opacity: 0.2; }”; wp_add_inline_style(‘twentytwentyfour-style’, $custom_css); } add_action(‘wp_enqueue_scripts’, ‘custom_menu_fade_css’);

Step 3: Add jQuery to Handle the Click Event

The magic of the fade-out effect happens through jQuery. We’ll use it to detect when a user clicks a menu link, fade out the other links, and then proceed to the clicked link. Here’s the jQuery code you’ll add to functions.php:

// Add the custom jQuery script for fading out menu items function custom_menu_fade_script() { ?> <script type=”text/javascript”> jQuery(document).ready(function($) { $(‘.wp-block-navigation-item__content’).click(function(e) { // Prevent the default link behavior e.preventDefault(); var clickedItem = $(this).closest(‘.wp-block-navigation-item’); // Fade out other menu items $(‘.wp-block-navigation-item’).not(clickedItem).addClass(‘fade-out’); // Optional: Redirect to the clicked link after the animation setTimeout(function() { window.location.href = clickedItem.find(‘a’).attr(‘href’); }, 500); // Adjust the delay if needed }); }); </script> <?php } add_action(‘wp_footer’, ‘custom_menu_fade_script’);

Step 4: Save and Test

1. After adding this code to your functions.php file, save your changes.
2. Reload your WordPress site and try clicking a menu link. You should see the other menu items fade out smoothly, and then the page will redirect after a brief delay.

And there you have it! A super simple yet impressive way to give your WordPress navigation a dynamic, interactive touch.

Why This Works

• jQuery: This script leverages jQuery to handle the click event on the menu links. It prevents the link from redirecting immediately, fades out the other menu items, and then proceeds to the clicked link after a delay.
• CSS Transitions: The fade-out effect is achieved using CSS transitions, which smoothly reduce the opacity of the other menu items when the .fade-out class is added.

Bonus: Customize the Effect

You can easily adjust the fade duration by changing the 0.5s in the transition property or the 500 milliseconds in the jQuery setTimeout function. This allows you to control how fast the fade-out happens and when the page redirects.

With just a few lines of code, you can create a unique and polished effect that sets your site apart. Try it out and let me know how it works for you in the comments!