0

ブートストラップを使用して、ワードプレス サイトのよりレスポンシブなテーマの作成に取り組んでいます。onhoverクリック イベントの代わりに、子項目を展開するようにメイン ナビゲーションをセットアップしました。これは私がそれを達成するために使用しているプラ​​グインです。これは、モバイルとデスクトップの両方でうまく機能します。クリックイベントを必要とするように設計する開発者の理由を理解し、読みましたが、ホバー機能を維持したいと考えていました。

私の残りの問題は、最上位のナビゲーションもページであり、モバイルではクリックできないことです。モバイル デバイスでは、トップ レベルのナビゲーションをクリックすると適切に展開および折りたたまれますが、トップ アイテムをクリックできません。だから私がやりたいのは、画面の解像度がタブレットやスマートフォンになるのに十分小さい場合、一番上のアイテムも子として含めて、クリックできるようにすることです。

したがって、例のナビゲーション項目がデスクトップでこのようなものだった場合

CLASSES
- HISTORY
- MATH

タブレット/電話のような小さな解像度では、次のようになります。

CLASSES
- CLASSES
- HISTORY
- MATH

どうすればこれを達成できますか、または最良の代替手段は何ですか? 現在、Wordpress でのナビは次のようになっています。

<div class="navbar navbar-inverse">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
        <div class="nav-collapse">
            <ul class="nav">
                <?php
                if ( function_exists('wp_nav_menu') ) {
                    wp_nav_menu( array(
                            'menu'       => 'top_menu',
                            'depth'      => 2,
                            'container'  => false,
                            'menu_class' => 'nav',
                            'fallback_cb' => 'wp_page_menu',
                            //Process nav menu using our custom nav walker
                            'walker' => new twitter_bootstrap_nav_walker())
                    );
                }
                ?>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
</div>

twitter_bootstrap_nav_walkerWordpress のWalker_Nav_Menuクラスを拡張します。ブートストラップに必要な DB からロードされたページに適切な属性を追加します。

子を持つ nav アイテムの HTML は次のようになります。これdata-hover="dropdown"により、マウスオーバー時にツリーが自動展開されます。

<a href="http://localhost/classes" data-toggle="dropdown" data-hover="dropdown" data-target="#" class="dropdown-toggle js-activated">CLASSES <span class="caret"></span></a>
4

1 に答える 1