web-dev-qa-db-ja.com

ホバーから切り替えてTwenty Twelve Menuをクリックする

私は、カーソルを合わせるのではなくクリックしてサブメニュー項目を表示するように、12のテーマのメニューをどのように変更すればよいのでしょうか。

menuscsssub-menutheme-twenty-twelve
1
mwz

多くの場合、JSとCSSが異なるものと相互作用するため、メニューはやや混乱します。

20個のテーマを見ると、これを達成する簡単な方法は、サブメニューの：hover表示を追加しているCSSを削除することです。

style.cssでは、.main-navigation ul li：hover> ul、on 1,567 と表示されます。

子テーマでは、そのセレクターを削除し、他の2つのセレクターとすべてのプロパティをそのまま保持できます。

：hoverは無効になりますが、メニュー、サブメニュー、サブメニューサブメニューなどの動作についても決定する必要があります。

サブメニューのあるサブメニューも同じように動作すると思いますか？

下にネストされているトップレベルのメニュー項目を無効にしますか？

メニュー項目の横にトグルを作成し、親でリンクをクリック可能のままにしますか？

たぶん、シングルクリックでサブメニューが開き、ダブルクリックでユーザーがURLに移動しますか？

CSSを上から削除すると、親メニュー項目を単に「＃」に移動するカスタムリンクにしたり、親項目に必要なリンクテキストを設定したりできます。

Twentytwelveは既に js/navigation.js file にJSを含んでいます。これは要素上のフォーカスクラスの切り替えを処理しているので、CSSの1行を削除してメニュー構造を変更するだけですべてが動作するはずです。 。

これが自分のサイトまたは制御された環境用である場合、必要なのはそれだけです。メニュー構造を変更したくない場合、またはそれを処理するための代替ソリューションが必要な場合は、JSを簡単に使用して、クリック時にリンクがたどられないようにすることができます。このコードはそれを可能にし、メニュー構造をいじる必要はありません：

    ( function( $ ) {
        $( '#menu-primary' ).find( '.menu-item-has-children > a' ).on( 'click', function( e ) {
            e.preventDefault();
        });
    } )( jQuery );

20に基づいて新しいテーマを作成する場合は、他の人がどのようにテーマを使用し、メニューが機能するかを検討する必要があります。カスタマイズコントロールを作成して、ホバーとクリックの動作を切り替えたり、親メニュー項目をリンクなどにしたりできます。

編集：

マウスを使用しないユーザーにJSはどのように影響しますか？

伝える最良の方法は、試してみることです！ ：P

  1. キーボードナビゲーション：

キーボードを使用してマウスを使用せずにこのソリューションをテストすると、メニュー、サブメニュー、ネストされたサブメニューを簡単にタブで移動できます。 Enterキーを押しても、子を持つアイテムのリンクに移動しませんでしたが、最後の子でEnterキーを押すと、リンクを開くことができます。これは、操作の質問からキーボードからナビゲーションが機能することを期待する方法で機能するようです。スクリーンリーダーのユーザーエクスペリエンスを向上させるためにナビゲーションラベルをariaラベルで書き直し、それがサイトの懸念事項である場合は矢印キーでナビゲーションをより適切に処理できるようにすることはおそらく有害ではないでしょう。

  1. モバイルまたはタッチデバイス：

クリックイベントは、タッチクリックシミュレーションの最後に発生します。タッチのイベントの流れは次のとおりです。

  • タッチスタート
  • タッチムーブ
  • タッチエンド
  • マウスオーバー
  • マウスムーブ
  • マウスダウン
  • マウスアップ
  • クリック

Twentytwelveは既に navigation.jsのtouchstartイベントでモバイルメニューを処理しています なので、クリック時にpreventDefaultを呼び出すと、モバイルでも動作するようになります。

0
Tim Elsass

基本的な答えは、onclick()ではなくonfocus()関数を持つようにmenu item要素を変更する必要があるということです。 Onfocus()は、マウスが要素の上に移動したときに起こることです。 Onclick()は要素をクリックすると起こります。

これが行われる場所はテーマコードによって異なります。メニュー項目を作成するテーマコードを詳しく調べて、menu要素のアクションを変更する必要があります。これは<form>tlement内にある場合もあります。

また、子テーマを使用すると、メインテーマが更新されても変更内容が失われることはありません。

0
Rick Hellewell