Wordpress Отзывчивый Выбор Меню

Я создал адаптивный сайт в WordPress. Этот сайт имеет несколько различных областей навигации, которые я хочу объединить в одно меню выбора, когда сайт просматривается с помощью мобильного устройства.

Код в моем файле WordPress header.php в настоящее время выглядит следующим образом:

<?php dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'container' => 'div',  'theme_location'=>'main_menu') ); ?>

Тем не менее, я хочу объединить несколько меню в этом выпадающем списке и попытался это:

<?php dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'container' => 'div',  'theme_location'=>'main_menu', 'theme_location'=>'top_menu', 'theme_location'=>'footer_menu') ); ?>

К сожалению, это все еще показывает только последнее меню "footer_menu" вместо того, чтобы объединить все три меню. Любые идеи о том, как правильно отредактировать приведенный выше код, чтобы все меню отображались в поле выбора как одно?

Любая помощь будет принята с благодарностью.

Источник

2 ответа

Решение

Вы можете использовать код, который я регулярно использую в некоторых проектах, что-то простое, что настраивает jQuery

Вы можете изменить значение, чтобы установить определенный div

var $mainNav    = $('#menu').children('ul'),

Код завершен JQuery

(function($) {
    var $mainNav    = $('#menu').children('ul'),
        optionsList = '<option value="" selected>Navigate...</option>';

    // Regular nav
    $mainNav.on('mouseenter', 'li', function() {
        var $this    = $(this),
            $subMenu = $this.children('ul');
        if( $subMenu.length ) $this.addClass('hover');
        $subMenu.hide().stop(true, true).fadeIn(200);
    }).on('mouseleave', 'li', function() {
        $(this).removeClass('hover').children('ul').stop(true, true).fadeOut(50);
    });
    // Responsive nav
    $mainNav.find('li').each(function() {
        var $this   = $(this),
            $anchor = $this.children('a'),
            depth   = $this.parents('ul').length - 1,
            indent  = '';
        if( depth ) {
            while( depth > 0 ) {
                indent += '--';
                depth--;
            }
        }
        optionsList += '<option value="' + $anchor.attr('href') + '">' + indent + ' ' + $anchor.text() + '</option>';
    }).end().after('<select class="responsive-nav">' + optionsList + '</select>');
    $('.responsive-nav').on('change', function() {
        window.location = $(this).val();
    });
})(jQuery);
Источник

Вы можете либо внедрить этот плагин http://wordpress.org/extend/plugins/responsive-select-menu/ либо дать http://tinynav.viljamis.com/ пробную версию.

Источник
Другие вопросы по тегам