将响应式WordPress <ul>菜单转换为<select>,用于小屏幕而不是JS

时间:2016-07-27 22:57:13

标签: html css responsive-design wordpress-theming wp-nav-walker

我正试图在我的网站上为我的WordPress主题构建一个响应式标题。根据屏幕分辨率,我想从典型的WordPress无序列表菜单(更大的屏幕)转到自定义选择下拉菜单(手机屏幕)。我想在不依赖任何其他JS的情况下这样做,所以请不要使用JavaScript或jQuery解决方案。 在研究如何做到这一点时,我发现了一些有用的资源,例如来自WordPress堆栈交换站点的这个问题。这个答案的问题在于您注意到它并没有包含实际的&lt; select&gt; &lt;选项&gt;周围的标记标签,所以网站上没有任何内容,但如果您查看源代码,您将看到选项是在&lt; ul&gt;内生成的。标签。我也读过这个,但它依赖于jQuery,这不是我想要的。 我做了第二个菜单,名为&#34; select-menu-nav&#34;我打算简单地切换这个菜单的CSS显示属性和&#34;主菜单&#34;媒体查询取决于屏幕的宽度。 这是相关的代码 - HTML: &LT;报头GT;     &lt; div id =&#34; logo-area&#34;&gt;         &lt; img id =&#34; logo&#34; src =&#34;&lt;?php bloginfo(&#39; template_directory&#39;); ?&GT; /assets/imgs/db-logo.png" alt =&#34; Digital Brent Logo&#34;&gt;         &lt; h2 id =&#34; site-title&#34;&gt; Digital&lt; br /&gt; Brent.com&lt; / h2&gt;     &LT; / DIV&GT;     &lt; div id =&#34; nav-area&#34;&gt;         &LT; PHP         $ walker = new alpha_nav_walker;         wp_nav_menu(数组(&#39; theme_location&#39; =&gt;&#39; main-nav&#39;,&#39; walker&#39; =&gt; $ walker));         wp_nav_menu(数组(&#39; theme_location&#39; =&gt;&#39; select-main-nav&#39;,&#39; walker&#39; =&gt; new alpha_dropdown_nav));         ?&GT;     &LT; / DIV&GT;     &lt; div id =&#34; news-area&#34;&gt;     &LT; / DIV&GT;     &lt; div id =&#34; search-area&#34;&gt;         &lt;?php get_search_form(); ?&GT;     &LT; / DIV&GT; &LT; /报头&GT; CSS: @media(max-width:1100px){ #菜单主菜单{     display:none; } #菜单小屏幕菜单{     显示:块; } } 自定义导航功能(下拉列表): class alpha_dropdown_nav扩展Walker_Nav_Menu {     public function start_lvl(&amp; $ output,$ depth){}     公共函数end_lvl(&amp; $ output,$ depth){}     public function start_el(&amp; $ output,$ item,$ depth,$ args){         $ item-&gt; title = str_repeat(&#34;&amp; nbsp;&#34;,$ depth * 4)。 $本期特价货品&GT;标题;         parent :: start_el(&amp; $ output,$ item,$ depth,$ args);         $ output = str_replace(&#39;&lt; li&#39;,&#39;&lt; option&#39;,$ output);     }     public function end_el(&amp; $ output,$ item,$ depth){         $ output。=&#34;&lt; / option&gt; \ n&#34 ;;     } } ^注意:这是同一文件中自定义菜单步进功能的第二种用法。这两个功能是不同的(第一个在标题中的主菜单调用中引用)但我不知道这是一个问题,还是不好的做法。 如何替换&lt; ul&gt;使用&lt; select&gt;?围绕选项标签生成标记 另外,我欢迎任何有关我的方法的反馈。如果有人知道这样做的方法更有效,或者被认为是更好的练习,我会很乐意学习更有效的方法。谢谢!

1 个答案:

答案 0 :(得分:1)

我认为这篇文章恰好包含了您的需求!

WordPress菜单默认显示为无序列表。您可能希望将它们显示为选择菜单。下面是创建菜单“walker”的示例,该菜单将其呈现为选择菜单。当您使用wp_nav_menu()显示菜单时,请包含&#39; walker&#39; =&GT;新的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-菜单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
    }
}
祝你好运! :)