[Support request] Addition to the sub-menu element

[onalti]

Hi.
I’m using the AMP for GeneratePress plugin, and everything is fine. I need to add amp definitions in addition to the sub-menu element. How can I rain it?

demo: <ul class=”sub-menu” [class]=”navMenuItemExpanded2 ? ‘ap-header-flyout active’ : ‘ap-header-flyout'” i-amphtml-binding=””>

it has to be something like this.

add_filter( 'walker_nav_menu_start_el', 'gpamp_add_sub_menu_dropdown_toggles', 10, 4 );
/**
 * Filter the HTML output of a nav menu item to add the AMP dropdown button to reveal the sub-menu.
 *
 * This is only used for AMP since in JS it is added via initMainNavigation() in navigation.js.
 *
 * @param string $item_output   Nav menu item HTML.
 * @param object $item          Nav menu item.
 * @return string Modified nav menu item HTML.
 */
function gpamp_add_sub_menu_dropdown_toggles( $item_output, $item, $depth, $args ) {
	// Only add the buttons in AMP responses.
	if ( ! ampgp_is_amp() ) {
		return $item_output;
	}

	if ( 'main-nav' !== $args->container_class ) {
		return $item_output;
	}

	// Skip when the item has no sub-menu.
	if ( ! in_array( 'menu-item-has-children', $item->classes, true ) ) {
		return $item_output;
	}
	
	// Obtain the initial expanded state.
	$expanded = in_array( 'current-menu-ancestor', $item->classes, true );

	// Generate a unique state ID.
	static $nav_menu_item_number = 0;
	$nav_menu_item_number++;
	$expanded_state_id = 'navMenuItemExpanded' . $nav_menu_item_number;

	// Create new state for managing storing the whether the sub-menu is expanded.
	$item_output .= sprintf(
		'<amp-state id="%s"><script type="application/json">%s</script></amp-state>',
		esc_attr( $expanded_state_id ),
		wp_json_encode( $expanded )
	);
	

	
/*
	 * Create the toggle button which mutates the state and which has class and
	 * aria-expanded attributes which react to the state changes.
	 */
	$dropdown_button  = '<button';
	$dropdown_class   = 'dropdown-menu-toggle';

	if ( function_exists( 'generate_get_option' ) && 'svg' === generate_get_option( 'icons' ) ) {
		$dropdown_class .= ' has-svg-icon';
	}

	$toggled_class    = 'toggled-on';
	$dropdown_button .= sprintf(
		' class="%s" [class]="%s"',
		esc_attr( $dropdown_class ),
		esc_attr( sprintf( "%s + ( $expanded_state_id ? %s : '' )", wp_json_encode( $dropdown_class ), wp_json_encode( " $toggled_class" ) ) )
	);

	$dropdown_button .= sprintf(
		' aria-expanded="%s" [aria-expanded]="%s"',
		esc_attr( wp_json_encode( $expanded ) ),
		esc_attr( "$expanded_state_id ? 'true' : 'false'" )
	);

	$dropdown_button .= sprintf(
		' on="%s"',
		esc_attr( "tap:AMP.setState( { $expanded_state_id: ! $expanded_state_id } )" )
	);

	$dropdown_button .= '>';

	if ( function_exists( 'generate_get_svg_icon' ) ) {
		$dropdown_button .= generate_get_svg_icon( 'arrow' );
	}

	// Let the screen reader text in the button also update based on the expanded state.
	$dropdown_button .= sprintf(
		'<span class="screen-reader-text" [text]="%s">%s</span>',
		esc_attr( sprintf( "$expanded_state_id ? %s : %s", wp_json_encode( __( 'collapse child menu', 'gp-amp' ) ), wp_json_encode( __( 'expand child menu', 'gp-amp' ) ) ) ),
		esc_html( $expanded ? __( 'collapse child menu', 'example' ) : __( 'expand child menu', 'gp-amp' ) )
	);

	$dropdown_button .= '</button>';
	$item_output .= $dropdown_button;
	

	return $item_output;
	
}

[Tom]

Hi there,

I’m not sure this is possible in the AMP plugin we provide – our code doesn’t manipulate the <ul>.

Is the class you’re trying to add from a plugin? If so, do they have any AMP-specific instructions on how to add it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts