对于没有 JS 的小屏幕，将响应式 WordPress <ul> 菜单转换为 <select>

Question

我正在尝试为 my site 上的 WordPress 主题构建响应式 header。根据屏幕分辨率，我想从典型的 WordPress 无序列表菜单（更大的屏幕）转到自定义 select 下拉菜单（phone 屏幕）。我想在不依赖任何其他 JS 的情况下执行此操作，因此请不要 JavaScript 或 jQuery 解决方案。

在研究如何做到这一点时，我发现了一些有用的资源，例如 this question from the WordPress stack exchange site. The problem with this answer is that you'll notice it doesn't include the actual <select> tag around the <option> tags, so nothing appears on the site, although if you view the source code you will see that the options are being generated inside of a <ul> tag. I read through this one，但它依赖于 jQuery，这不是我想要的。

我制作了一个名为 "select-menu-nav" 的第二个菜单，我计划简单地切换此菜单的 CSS 显示属性和带有媒体查询的 "main-menu"屏幕的宽度。

这是相关代码-

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("&nbsp;", $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";
    }
}

^ 注意： 这是在同一个文件中第二次使用自定义菜单 walker 函数。这两个功能不同（第一个在 header 中的主菜单调用中引用）但我不知道这是否是一个问题，或者它是否是不好的做法。

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

此外，我欢迎任何关于我的方法的反馈。如果有人知道一种更有效的方法，或者被认为是更好的做法，我很乐意学习一种更有效的方法。谢谢！

Answer 1

我认为这篇文章正是您所需要的！

WordPress 菜单默认显示为无序列表。不过，您可能希望将它们显示为 select 菜单。下面是创建菜单“walker”的示例，它将呈现为 select 菜单。当您使用 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' );

导航菜单-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
    }
}

祝你好运！ :)

对于没有 JS 的小屏幕，将响应式 WordPress <ul> 菜单转换为 <select>

Convert responsive WordPress <ul> menu to <select> for small screens sans JS

html

css

wordpress-theming

responsive-design

wp-nav-walker