how to add data-roles & data-transition to wp_nav_menu

  • Resolved Ash

    (@ashbryant)


    13 years, 8 months ago

    Hi,

    Can anyone help me with a issue I’m having with adding data-roles to wp_nav_menu?

    I’m building a mobile site that uses jQuery mobile, and as such it uses data-roles & data-transition to style/animate the pages. I’ve Googled about, but can’t find anything to help. The only thing that might come close (might) is this https://goo.gl/djqk ,but I can’t seem to edit it, to get it working for me.

    Can any one please help?

    Thanks
    Ash

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

  • Hi,

    I am stuck with exactly the same problem, did you ever find any solution for the problem ore do you have a link to it?
    For other people reading this, could be nice if you had some information’s on the problem at hand.

    Thanks for any help in advance.

    greetings nils

    Thread Starter Ash

    (@ashbryant)

    Hi nilsgoe,

    I normally do post answers to my own questions and if I’m honest as I had no help from this post, I forgot I asked for help here.

    I came up with a solution that worked for me.

    I created a function (place this in your functions file see this for more info https://goo.gl/djqk )

    class data_type_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

           $attributes  = ! empty( $item->attr_title ) ? ' title="'  	. esc_attr( $item->attr_title 		) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' 	. esc_attr( $item->target     		) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    	. esc_attr( $item->xfn        		) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   	. esc_attr( $item->url        		) .'"' : '';

           $prepend = '';
           $append = '';

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .' data-role="" data-transition="" data-icon="">';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

    This adds data-type, data-transition & data-icon, you could add anything you need to it. this then adds these to the links.

    Then I used jQuery .attr to add what I need to those on a “page” basis, when needed like this…

    $("#menu-mobile-nav a").attr("data-role","button");
$("#menu-mobile-nav a").attr("data-transition","flip");
$("#menu-mobile-nav a").attr("data-icon","arrow-r");

    Hope it helps ??

    Hi ashbryant

    Thank’s a lot for your help and your time. This will definitely help me.

    /nils

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how to add data-roles & data-transition to wp_nav_menu’ is closed to new replies.