1

ワードプレスバージョンのブートストラップに基づいてカスタムワードプレステーマを作成しました。ドロップダウンナビゲーションバーをクリックではなくホバーで開くようにしています。

私はここでこの答えを見つけましたが、それは元の（ワードプレスなしの）ブートストラップに対応しているようです。それか、それをどのように実装するかは私にはわかりませんが、ワードプレスではまったく違うようです。

bootstrap-dropdown.jsファイルで「クリック」を「ホバー」に置き換えることでほぼ成功しましたが、カーソルを移動するとすぐにドロップダウンが消えるため、実際にはマウスをサブメニュー項目に移動できません。ドロップダウンは開いたままになりません。

理想的には、デスクトップの場合はホバーし、モバイルの場合はクリックしますが、これは必須ではありません。デスクトップにカーソルを合わせるには、モバイルのクリックを犠牲にします。

誰かがこれを手伝ってくれるなら、それは素晴らしいでしょう。

4

3 に答える 3

7

これを修正するには、次の 3 つの手順があります。

1) テーマ -> ライブラリ -> css -> bootstrap.css にある bootstrap.css にこのコードを追加するだけです。

ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;    
}

これは、JavaScript や JQuery に触れずに CSS を使用するだけの簡単な修正です。ただし、これにより、メニューをホバーしているときにバグのある UI 動作が発生する可能性があります。

2) 親カテゴリへのリンクができなくなります。これを修正するには、テーマの functions.php に移動し、417 行目でこれを削除します。

class="dropdown-toggle" data-toggle="dropdown"

したがって、あなたの行は次のようになります。

$attributes .= '';

3) 親カテゴリからドロップダウン メニューへのカーソルの移動が遅すぎると、メニューが閉じます。これはマージンが残っているためです。これを修正するには、bootstrap.css の最初のコードの下に次のコードを追加します。

.navbar .dropdown-menu {
 margin-top: 0px;
}

これで、親カテゴリをクリックしてドロップダウン メニューを表示しなくても、Wordpress Bootstrap テーマが機能するはずです。

于 2013-01-10T01:25:02.123 に答える
1

私がしたことは、ドロップダウンスタイルの近くにあるbootstrap.cssに次の行を追加することでした:

.dropdown.open .dropdown-menu {
  ..........
/*--- Hover Dropdown Menu---*/
ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;    
}
.dropdown-menu:before {
............

それが役立つことを願っています。

于 2012-07-18T22:47:47.827 に答える
0

これはWordpress Bootstrapで機能します：

.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
    content: none;
}
于 2013-03-15T18:53:39.520 に答える