php WP移动导航垂直切换

Posted 2021-05-05

<?php
  $menu_name = 'mobile-menu';
  $locations = get_nav_menu_locations();
  $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
  $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );

//echo '<pre>'.print_r($menuitems).'</pre>';

function buildTree( array &$elements, $parentId = 0 )
{
    $branch = array();
    foreach ( $elements as &$element )
    {
        if ( $element->menu_item_parent == $parentId )
        {
            $children = buildTree( $elements, $element->ID );
            if ( $children )
                $element->child = $children;
                $element->has_children = 1;

            $branch[$element->ID] = $element;
            unset( $element );
        }
    }
    return $branch;
}
$menuitems = buildTree($menuitems);

function create_menu($item) {
    $link = $item->url;
    $title = $item->title;
    $id = $item->ID;
    
    if(property_exists($item, 'child')) {
        $children = $item->child;
        ?>
        <li class="item">
            <div class="menu-item menu-has-children">
                <?php echo $title; ?>&nbsp;<i class="fa fa-angle-double-down" aria-hidden="true"></i>
            </div>
            <ul class="dropdown-menu-modal">
            <?php 
            foreach($children as $child){
                create_menu($child);
            }
            ?>
            </ul>
        </li>
    <?php
    } else {
    ?>
        <li class="item">
            <a href="<?php echo $link; ?>" class="menu-item">
                <?php echo $title; ?>
            </a>
        </li>
    <?php
    }
}

?>
<div class="modal fade menu-modal" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="menu" data-backdrop="static" >
    <div class="modal-dialog" role="document">
        <div class="modal-nav-content">
            <div class="modal-nav-body">
                <ul class="modal-nav-ul">
                    <?php
                    foreach( $menuitems as $item ){
                        create_menu($item);
                    }
                    ?>
                </ul>
            </div>
        </div>
    </div>
</div>