Replace the slug of parent pages with # [closed]

Question

I'm creating a Wordpress site with a Superfish CSS3 / Jquery dropdown menu, complete with hoverIntent as displayed here:

http://users.tpg.com.au/j_birch/plugins/superfish/#examples

As far as I can see, this menu works well on mobile devices, because the link values refer to the same page, like #a, so that clicking a link does not cause the page to reload.

Please bear with me. I know that the right way would be to replace the dropdown menu entirely (with a select box or some other tool), but I need to have the exact same experience as on a desktop (long story).

My question is: how can I replace the href value of parent pages, with an internal link like #a?

My guess would be that doing this via jQuery would be the best solution. What are your views on this and could someone please provide a practical answer? Thanks in advance.

Answer 1

In my experience, Superfish actually does not rely on in-page links in order to show the submenus on touch devices (although admittedly I'm basing this solely on iOS devices).

Simply tap once on a top-level menu item and its submenu should show. A subsequent tap on the same top-level menu item would cause the browser to load that link.

Answer 2

You could do multiple things to get this working:

jQuery( '.your-nav-menu-item-class' ).on( 'click', function( e )
{
    event.preventDefault();

    // replace the link here

    return false;
}

You could also just use a walker class.

Or one of the filters inside wp_nav_menu() - just check the source.

• Before the Walker: apply_filters( 'wp_nav_menu_objects', $sorted_menu_items, $args )
• After the Walker: apply_filters( 'wp_nav_menu_items', $items, $args )
• Same, but more specific: apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args )
• The resulting HTML: apply_filters( 'wp_nav_menu', $nav_menu, $args )