Help with Nav Menu Hover – HTML

  • I’m trying to add a custom data attribute to the <a> element. What I’m trying to do is integrate the navigation effect in this CodePen

    I can do all the CSS but I need to add the HTML part such as below:

       
<ul class="snip1226">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>

    How and where would I add this into WordPress? What would I need to edit to add this HTML functionally?

    As you can see without the above HTML the menu hover does not work as expected.

    Thanks,

    Harvey

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • the codepen link seems broken, can you give the full url?

    Thread Starter harveyl12

    (@harveyl12)

    Sorry, please see here – https://codepen.io/littlesnippets/pen/pjmXvP

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In that CodePen example there’s no reason to use the data attributes. They do nothing.

    Moderator bcworkz

    (@bcworkz)

    Oh, I see. The data-hover value is grabbed with CSS to populate the element’s “:after” content value, which is used to do a transform animation from the text link to the :after content value.

    I’m assuming the menu output is coming from a call to wp_nav_menu(). Most themes do this, but it’s not necessarily so. There are a number of filters in that function that can be used to alter the output. I think ‘wp_nav_menu_items’ filter would be a good choice. Your callback can loop through the passed items and insert the attribute based on the link text. preg_replace() should be able to do the string manipulation needed.

    Thread Starter harveyl12

    (@harveyl12)

    Hi,

    Thanks for you responses…

    So is there some PHP that I need to add to my functions.php file or is there CSS I can use to do this?

    Thanks,

    Harvey

    Thread Starter harveyl12

    (@harveyl12)

    @bcworkz Any ideas?

    Moderator bcworkz

    (@bcworkz)

    Yes, an idea is about all though. PHP required, CSS wouldn’t cut it. It’d take a good bit of trial and error for me to arrive at the proper regexp and replacement. TBH, I was hanging back, hoping someone better with regexp would chime in. Here’s the rest of it except the regexp and replacement.

    add_filter( 'wp_nav_menu_items', 'h12_menu_mod', 10, 2);
function h12_menu_mod( $items, $args ) {
   $new = array();
   foreach ( $items as $item ) {
      $new[] = preg_replace( '???regexp???', '???replacement???', $item );
   }
   return $new;
}

    It’s a start at least. If you want to experiment with regexps to figure out what works, try regexr.com. Or maybe someone else can chime in with some regexp help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Help with Nav Menu Hover – HTML’ is closed to new replies.