Suggestion: new menu for design 2

Hello frenchomatic

We have already made a ticket about the issue on GitHub and this feature will come in the swift theme so It’s better to use a swift theme or its necessary to add this in design2 also?

I think this should be an option for all designs in AMP takeover. This is because many of us are invested with multiple sites in other designs. I have a lot of custom css for example but it applies to design 2. For me 10 sites.

Hi.
I am working with this menu structure, but I have some problems with the nav_menu_walker.
https://axarquianoticias.es/test/nav-bar-movil-v3.html

Hello @jordir

Can you please tell me what issues you are facing with this “nav_menu_walker”.

Hi
Its work yor my menu tree.
https://axarquianoticias.es/inicio/

<!-- Start Sidebar -->
<amp-sidebar id="header-sidebar" class="ampstart-sidebar" layout="nodisplay" on="sidebarClose:close.toggleVisibility,hamburger.toggleVisibility">
    <?php  get_menu_side(); ?>
</amp-sidebar>
<!-- End Sidebar -->

<?php
function get_menu_side(){
    
    wp_nav_menu( array(
        'theme_location' => 'amp-menu',
        'container'=>'nav', 
        'container_class' => 'ampstart-sidebar-nav ampstart-nav',
        'menu_id' =>'menu-principal-1',
        'menu_class' =>'list-reset m0 p0 ampstart-label',
        'items_wrap' =>'<amp-accordion class="nested-accordion  ampstart-label ampstart-nav-item" disable-session-states expand-single-section>%3$s</amp-accordion>',
        'walker' => new nav_menu_walker()
        ) );

}

class nav_menu_walker extends Walker_Nav_Menu {

private $is_last_level; 
private $ul_is_set;
 
    /**
     * Starts the list before the elements are added.
     *
     * Adds classes to the unordered list sub-menus.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {

        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            'ampstart-dropdown-items list-reset m0 p0 '
        );
        $class_names = implode( ' ', $classes );
 
        // Build HTML for output.
        if ($this->is_last_level){
            $output .= "\n" . $indent . '<ul class="' . $class_names . '"  id="_AMP_content_0">' . "\n"; 
            $this->ul_is_set =true;
        } else {
            $this->ul_is_set =false;
        }
    }
    
    function end_lvl(&$output, $depth=0, $args=array()) {

        if ($this->ul_is_set==true){
            $output .=  "</ul>\n</section>";
            $this->ul_is_set =false;
        }else{
            $output .= "	\n</amp-accordion>\n</section>\n";
        }
    }
 
    /**
     * Start the element output.
     *
     * Adds main/sub-classes to the list items and links.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item   Menu item data object.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     * @param int    $id     Current item ID.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
     
       $this->curItem = $item; 
        
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

        // Depth-dependent classes.
        $depth_classes = array(
            ( $depth == 0 ? 'ampstart-nav-item menu-item' : 'ampstart-dropdown-item menu-item' )
        );

        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

        // Passed classes.
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

                // Link attributes.
                $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        ) .'amp/"' : '';
                $attributes .= ' class="ampstart-nav-link ' . ( $depth > 0 ? 'sub-menu-link' : '' ) . '"';

                // Build HTML output and pass through the proper filter.
                $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                $args->before,
                $attributes,
                $args->link_before,
                apply_filters( 'the_title', $item->title, $item->ID ),
                $args->link_after,
                $args->after
                );

        if(!in_array('menu-item-has-children', $item->classes)) {
            if ( $depth > 0){           
                $output .= $indent . '<li class="' . $depth_class_names  . '">';
                $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ) .'</li>';
            }else{
                $output .= "\n" .$indent .'<section>';
                $output .= "\n" .$indent .'<header>';
                $output .= "\n" .$indent .apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
                $output .= "\n" .$indent .'</header>';
                $output .= "\n" .$indent .'<p></p>';
                $output .= "\n" .$indent .'</section>';
            }
        }
        
        if(in_array('menu-item-has-children', $item->classes)) {
            if ( $depth > 0){
                $output .= "\n" .$indent .'<amp-accordion class="nested-accordion">';
            }
            $output .= "\n" .$indent .'<section class="child">';
	        $output .= "\n" . '	<header role="button" aria-controls="_AMP_content_0" aria-expanded="false" tabindex="0">'  .apply_filters( 'the_title', $item->title, $item->ID ) .'</header>';
        }
       
        $findme   = '<img';
        if (strpos($output, $findme)){
          $output = str_replace($findme, "\n" .'<amp-img width="15" height="15" sizes="(min-width: 15px) 15px, 100vw" class="amp-wp-enforced-sizes " ', $output);
      }    
        
    }
    
/**
     * Ends the element output, if needed.
     *
     * @since 3.0.0
     *
     * @see Walker::end_el()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param WP_Post  $item   Page data object. Not used.
     * @param int      $depth  Depth of page. Not Used.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */    
    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        if ( $depth > 0){
        }

    }

public function walk($elements, $max_depth) {
  $html = parent::walk($elements, $max_depth);

  /* Do something with the HTML output */

  return $html;
}
    
  public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
         if ( ! $element ) {
            return;
        }
        $id_field = $this->db_fields['id'];
        $id       = $element->$id_field;

        if ( ! empty( $children_elements[ $id ] ) ) {
			$total_children = 0;
			$total_children = count( $children_elements[ $id ] );
			$this->is_last_level = true;
			if($total_children>0){
				for($i=0; $i <= $total_children; $i++){
					if(in_array('menu-item-has-children', $children_elements[ $id ][$i]->classes)) {
						$this->is_last_level = false;
					}
				}
			}
        } 
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
     }   
}
?>

• This reply was modified 6 years, 10 months ago by jordir.

Hello @jordir

Can you please explain a little bit more about your concern so I can provide a solution to you.

I am lost on this thread as my post was about having a normal menu on design 2 in desktop when in AMP takeover.

hi @ampforwp
The first flag not show in vertical-align middle.
regardds

Jordir – this post was about the need for a normal menu on design 2 when in AMP takeover. Please start your own post as is normal practice in a wordpress forum – it just ends up getting confusing otherwise.