Преобразовать отзывчивое меню <ul> WordPress в <select> для маленьких экранов без JS

Question

Я пытаюсь создать адаптивный заголовок для моей темы WordPress на моем сайте. В зависимости от разрешения экрана я бы хотел перейти от обычного меню неупорядоченного списка WordPress (большие экраны) к выпадающему меню с пользовательским выбором (экраны телефонов). Я хотел бы сделать это, не полагаясь на какие-либо дополнительные JS, поэтому, пожалуйста, не используйте JavaScript или jQuery.

Изучая, как это сделать, я нашел несколько полезных ресурсов, таких как этот вопрос, на сайте обмена стеками WordPress. Проблема с этим ответом заключается в том, что вы заметите, что он не включает <select> пометить вокруг <option> теги, поэтому на сайте ничего не появляется, хотя если вы посмотрите исходный код, вы увидите, что параметры генерируются внутри <ul> тег. Я прочитал это тоже, но он опирается на jQuery, а это не то, что я хочу.

Я сделал 2-е меню под названием "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";
    }
}

^ Примечание: это второе использование пользовательской функции обхода меню в том же файле. Эти две функции различны (на первую ссылаются в вызове главного меню в заголовке), но я не знаю, является ли это проблемой, или это плохая практика или нет.

Как я могу заменить <ul> тег генерируется вокруг тегов опций с <select>?

Кроме того, я приветствую любые отзывы о моей методологии. Если кто-нибудь знает способ сделать это, который является более эффективным, или считается более эффективной практикой, я был бы счастлив узнать более эффективный способ сделать это. Спасибо!

Answer 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' );

нав-меню 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
    }
}

Удачи!:)