WordPress Responsive Select-Menü

Lesezeit: 2 Minuten

Ich habe eine responsive Website in WordPress erstellt. Diese Website verfügt über eine Reihe verschiedener Navigationsbereiche, die ich in einem Auswahlmenü zusammenfassen möchte, wenn die Website über ein mobiles Gerät angezeigt wird.

Der Code in meiner WordPress header.php-Datei sieht derzeit so aus:

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

Ich möchte jedoch mehrere Menüs in diesem Dropdown-Menü zusammenfassen und habe Folgendes versucht:

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

Leider zeigt dies immer noch nur das letzte Menü ‘footer_menu’ an, anstatt alle drei Menüs zu kombinieren. Irgendwelche Ideen, wie ich den obigen Code richtig bearbeiten kann, damit alle Menüs im Auswahlfeld als eines angezeigt werden?

Jede Hilfe wäre sehr willkommen.

Sie können einen Code verwenden, den ich regelmäßig in einigen Projekten verwende, etwas Einfaches, mit dem jQuery angepasst werden kann

Sie können den Wert ändern, um ein bestimmtes div festzulegen

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

Vollständige jQuery codieren

(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);

Sie könnten dieses Plugin entweder implementieren http://wordpress.org/extend/plugins/responsive-select-menu/ oder gib http://tinynav.viljamis.com/ ein Versuch.

994360cookie-checkWordPress Responsive Select-Menü

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy