Menu Hover Effects - Almost drop-in menu effects from codrops. https://www.damiencarbery.com/2019/04/menu-hover-effects/

menu-hover-effects.php

<?php
/*
Plugin Name: Menu Hover Effects
Plugin URI: https://www.damiencarbery.com/2019/04/menu-hover-effects/
Description: Add hover effects to menus.
Author: Damien Carbery
Version: 0.1
*/


// Tested with Genesis Sample, Storefront, Twenty Nineteen, Twenty Seventeen, Twenty Sixteen, Twenty Fifteen
// Did not work with GeneratePress (uses custom menu Walker function)

class MenuHoverEffects {
	// Which hover effect type (for future expansion).
	private $effect_type;
	// Whether we need to add <span> around the menu item.
	//private $span_check;
	private $add_span;
	// The html element to target for the CSS.
	private $menu_target;

	
	// Returns an instance of this class. 
	public static function get_instance() {
		if ( null == self::$instance ) {
			self::$instance = new MenuHoverEffects();
		}
		return self::$instance;
	}


	// Initialize the plugin variables.
	public function __construct() {
		
		$this->effect_type = 2;
		$this->add_span = null;
		$this->menu_target = 'nav';
		
		$this->init();
	}


	// Set up WordPress specfic actions.
	public function init() {
		add_filter( 'nav_menu_item_args', array( $this, 'menu_item_args_data' ), 10, 3 );
		add_action( 'wp_head', array( $this, 'add_custom_styles' ) );
	}


	public function menu_item_args_data( $args, $item, $depth ) {
		//error_log( "Item: " . var_export( $item, true ) );
		//error_log( "Args: " . var_export( $args, true ) );
		//error_log( "Depth: " . $item->title . ' - ' . $depth );

		// One off test whether $item has a 'span' tag.
		if ( null == $this->add_span ) {
			if ( false !== strpos( $args->link_before, '<span' ) ) {
				$this->add_span = false;
			}
			else {
				$this->add_span = true;
			}
		}
		
		// Add a 'span' tag if necessary
		if ( $this->add_span ) {
			$args->link_before = sprintf( '<span itemprop="name" data-hover="%s">', strtolower( $item->title ) );
			$args->link_after = '</span>';
		}
		else {
			// Remove existing data-hover attribute before adding another. Cannot
			// simply replace as it won't be in the first menu item and then not
			// added to it and subsequently not added to any menu item.
			$args->link_before = preg_replace( '/data-hover=".*" /U', '', $args->link_before );
			$args->link_before = str_replace( '<span', sprintf( '<span data-hover="%s"', strtolower( $item->title ) ), $args->link_before );
		}

		return $args;
	}
	
	
	public function add_custom_styles() {
	?>
<style>
@media only screen and (min-width: 960px) {
/* From: https://tympanus.net/Development/CreativeLinkEffects/  (second example) */
/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
<?php echo $this->menu_target; ?> a {
	line-height: 50px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	color: #fff;
}

<?php echo $this->menu_target; ?> a span {
	position: relative;
	display: inline-block;
	padding: 0 14px;
	background: #2195de;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*.csstransforms3d*/ <?php echo $this->menu_target; ?> a span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0965a0;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

<?php echo $this->menu_target; ?> a:hover span,
<?php echo $this->menu_target; ?> a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

/*.csstransforms3d*/ <?php echo $this->menu_target; ?> a:hover span::before,
/*.csstransforms3d*/ <?php echo $this->menu_target; ?> a:focus span::before {
	background: #28a2ee;
	padding: inherit;
}
}
</style>
	<?php
	}
}

$MenuHoverEffects = new MenuHoverEffects;

nav_menu_item_args-inputs.txt

[08-Apr-2019 20:38:52 UTC] Item: WP_Post::__set_state(array(
   'ID' => 6,
   'post_author' => '1',
   'post_date' => '2019-04-07 09:38:16',
   'post_title' => 'Home',
   'post_excerpt' => '',
   'post_status' => 'publish',
   'post_name' => 'home',
   'menu_order' => 1,
   'post_type' => 'nav_menu_item',
   'object' => 'custom',
   'type' => 'custom',
   'type_label' => 'Custom Link',
   'title' => 'Home',
   'url' => 'http://localhost/wordpress/genesis-sample',
   'classes' => 
  array (
    0 => '',
    1 => 'menu-item',
    2 => 'menu-item-type-custom',
    3 => 'menu-item-object-custom',
    4 => 'current-menu-item',
    5 => 'current_page_item',
    6 => 'menu-item-home',
  ),
))
[08-Apr-2019 20:38:52 UTC] Args: stdClass::__set_state(array(
   'menu' => 
  WP_Term::__set_state(array(
     'term_id' => 2,
     'name' => 'Root',
     'slug' => 'root',
     'term_group' => 0,
     'term_taxonomy_id' => 2,
     'taxonomy' => 'nav_menu',
     'description' => '',
     'parent' => 0,
     'count' => 3,
     'filter' => 'raw',
     'meta' => 
    array (
    ),
  )),
   'container' => '',
   'container_class' => '',
   'container_id' => '',
   'menu_class' => 'menu genesis-nav-menu menu-primary js-superfish',
   'menu_id' => '',
   'echo' => 0,
   'fallback_cb' => 'wp_page_menu',
   'before' => '',
   'after' => '',
   'link_before' => '<span itemprop="name">',
   'link_after' => '</span>',
   'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
   'item_spacing' => 'preserve',
   'depth' => 0,
   'walker' => '',
   'theme_location' => 'primary',
))