0

WordPressでレスポンシブサイトを作成しました。このサイトには、モバイルデバイスでサイトを表示するときに、1つの選択メニューに統合したいさまざまなナビゲーション領域があります。

私のWordPressheader.phpファイルのコードは現在次のようになっています：

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

ただし、この1つの選択ドロップダウン内に複数のメニューを統合したいと考えており、これを試しました。

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

残念ながら、これでも3つのメニューすべてを組み合わせるのではなく、最後のメニュー「footer_menu」のみが表示されます。上記のコードを正しく編集して、すべてのメニューが選択ボックスに1つとして表示されるようにする方法についてのアイデアはありますか？

どんな助けでも大歓迎です。

4

2 に答える 2

0

私がいくつかのプロジェクトで定期的に使用しているコードを使用できます。これは、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);
于 2012-10-10T19:05:52.070 に答える
0

このプラグインhttp://wordpress.org/extend/plugins/responsive-select-menu/を実装するか、http://tinynav.viljamis.com/を試用することができます。

于 2012-06-24T22:04:13.810 に答える