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

我正在尝试在我的网站上为WordPress主题构建响应式标头。根据屏幕分辨率, 我想从典型的WordPress无序列表菜单(较大的屏幕)转到自定义选择下拉菜单(电话屏幕)。我想在不依赖任何其他JS的情况下执行此操作, 因此请不要使用JavaScript或jQuery解决方案。
在研究如何执行此操作时, 我发现了一些有用的资源, 例如WordPress堆栈交换站点中的此问题。这个答案的问题是, 你会注意到它没有在< option> 标记周围包含实际的< select> 标记, 因此站点上没有任何内容, 尽管如果你查看源代码, 则会看到这些选项是是在< ul> 标记内生成的。我也阅读了这篇文章, 但是它依赖于jQuery, 这不是我想要的。
我制作了第二个菜单, 称为” select-menu-nav” , 我计划仅根据屏幕的宽度切换此菜单的CSS显示属性和带有媒体查询的” 主菜单” 。
这是相关的代码-
HTML：

< header> < div id="logo-area"> < img id="logo" src="http://www.srcmini.com/< ?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"; } }

^注：这是自定义菜单浏览器功能在同一文件中的第二种用法。这两个函数是不同的(第一个是在标题的主菜单调用中引用的), 但是我不知道这是否是一个问题, 或者是否是不好的做法。
如何用< select> 替换选项标签周围生成的< ul> 标签？
另外, 我欢迎对我的方法提出任何反馈。如果有人知道一种更有效的方法, 或者被认为是更好的做法, 那么我将很高兴学习一种更有效的方法。谢谢！
#1我认为本文完全包括你所需要的！
WordPress菜单默认显示为无序列表。你可能希望将它们显示为选择菜单。以下是创建菜单” 行者” 并将其呈现为选择菜单的示例。当你使用wp_nav_menu()显示菜单时, 请包含’ walker’ => new Walker_Nav_Menu_Dropdown()以告诉WordPress使用这种格式而不是默认格式。
【转换响应式WordPress ul菜单以选择无JS小屏幕】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=http://www.srcmini.com/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. * * @paramstring $output Passed by reference. Used to append additional content. * @paramobject $itemMenu item data object. * @paramint $depthDepth of menu item. May be used for padding. * @paramarray $argsAdditional 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 } }

祝好运！ ??