Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Menu Hover Effects - Almost drop-in menu effects from codrops. https://www.damiencarbery.com/2019/04/menu-hover-effects/
<?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;
[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',
))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.