WordPress.org

Forums

[resolved] how to add data-roles & data-transition to wp_nav_menu (4 posts)

  1. ashbryant
    Member
    Posted 4 years 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 http://goo.gl/djqk ,but I can't seem to edit it, to get it working for me.

    Can any one please help?

    Thanks
    Ash

  2. nilsgoe
    Member
    Posted 3 years ago #

    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

  3. ashbryant
    Member
    Posted 3 years ago #

    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 http://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 :)

  4. nilsgoe
    Member
    Posted 3 years ago #

    Hi ashbryant

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

    /nils

Topic Closed

This topic has been closed to new replies.

About this Topic