转换响应式WordPress ul菜单以选择无JS小屏幕

我正在尝试在我的网站上为WordPress主题构建响应式标头。根据屏幕分辨率, 我想从典型的WordPress无序列表菜单(较大的屏幕)转到自定义选择下拉菜单(电话屏幕)。我想在不依赖任何其他JS的情况下执行此操作, 因此请不要使用JavaScript或jQuery解决方案。

在研究如何执行此操作时, 我发现了一些有用的资源, 例如WordPress堆栈交换站点中的此问题。这个答案的问题是, 你会注意到它没有在<option>标记周围包含实际的<select>标记, 因此站点上没有任何内容, 尽管如果你查看源代码, 则会看到这些选项是是在<ul>标记内生成的。我也阅读了这篇文章, 但是它依赖于jQuery, 这不是我想要的。

我制作了第二个菜单, 称为” select-menu-nav”, 我计划仅根据屏幕的宽度切换此菜单的CSS显示属性和带有媒体查询的”主菜单”。

这是相关的代码-

HTML：

<header>
    <div id="logo-area">
        <img id="logo" src="<?php bloginfo('template_directory'); ?>/assets/imgs/db-logo.png" alt="Digital Brent Logo">
        <h2 id="site-title">Digital<br/>Brent.com</h2>
    </div>

    <div id="nav-area">
        <?php
        $walker = new alpha_nav_walker;
        wp_nav_menu( array( 'theme_location' => 'main-nav', 'walker' => $walker) );

        wp_nav_menu( array( 'theme_location' => 'select-main-nav', 'walker' => new alpha_dropdown_nav) );
        ?>
    </div>

    <div id="news-area">
    </div>

    <div id="search-area">
        <?php get_search_form(); ?>
    </div>
</header>

CSS：

@media(max-width: 1100px){
#menu-main-menu{
    display: none;
}

#menu-small-screen-menu{
    display: block;
}
}

自定义导航功能(下拉菜单)：

class alpha_dropdown_nav extends Walker_Nav_Menu{

    public function start_lvl(&$output, $depth){}

    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

        $item->title = str_repeat(" ", $depth * 4) . $item->title;

        parent::start_el(&$output, $item, $depth, $args);
        $output = str_replace('<li', '<option', $output);
    }

    public function end_el(&$output, $item, $depth){
        $output .= "</option>\n";
    }
}

^注：这是自定义菜单浏览器功能在同一文件中的第二种用法。这两个函数是不同的(第一个是在标题的主菜单调用中引用的), 但是我不知道这是否是一个问题, 或者是否是不好的做法。

如何用<select>替换选项标签周围生成的<ul>标签？

另外, 我欢迎对我的方法提出任何反馈。如果有人知道一种更有效的方法, 或者被认为是更好的做法, 那么我将很高兴学习一种更有效的方法。谢谢！

#1

我认为本文完全包括你所需要的！

WordPress菜单默认显示为无序列表。你可能希望将它们显示为选择菜单。以下是创建菜单”行者”并将其呈现为选择菜单的示例。当你使用wp_nav_menu()显示菜单时, 请包含’walker’=> new Walker_Nav_Menu_Dropdown()以告诉WordPress使用这种格式而不是默认格式。

functions.php

<?php
// Nav Menu Dropdown Class
include_once( CHILD_DIR . '/lib/classes/nav-menu-dropdown.php' );
/**
 * Mobile Menu
 *
 */
function be_mobile_menu() {
    wp_nav_menu( array(
        'theme_location' => 'mobile', 'walker'         => new Walker_Nav_Menu_Dropdown(), 'items_wrap'     => '<div class="mobile-menu"><form><select onchange="if (this.value) window.location.href=this.value">%3$s</select></form></div>', ) );    
}
add_action( 'genesis_before_header', 'be_mobile_menu' );

nav-menu-dropdown.php

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth){
        $indent = str_repeat("\t", $depth); // don't output children opening tag (`<ul>`)
    }
    function end_lvl(&$output, $depth){
        $indent = str_repeat("\t", $depth); // don't output children closing tag
    }
    /**
    * Start the element output.
    *
    * @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. May be used for padding.
    * @param  array $args    Additional strings.
    * @return void
    */
    function start_el(&$output, $item, $depth, $args) {
        $url = '#' !== $item->url ? $item->url : '';
        $output .= '<option value="' . $url . '">' . $item->title;
    }   
    function end_el(&$output, $item, $depth){
        $output .= "</option>\n"; // replace closing </li> with the option tag
    }
}

祝好运！ 🙂