web-dev-qa-db-ja.com

同じページの他のリンクをクリックしたときにメニュー項目の「アクティブな」CSSを維持する方法は？

メインメニューに問題があります。 「Cases by Topic」メニュー項目をクリックすると、「Cases by Topic」ページが表示されます。 「Cases by Topic」メニュー項目には、CSSクラス「active」が付与されます。メニュー項目に「アクティブ」なCSSがある場合、それが現在のメニュー項目であることを示すために、水色ではなく濃い青になるように設定しました。

自分自身のページには、分類メニュー項目の束があるdrupalブロックがあります。これらの分類メニュー項目のそれぞれもこのページをポイントしていますが、ページに異なる情報セットをロードします（これはdrupalビュー）です。

ブロック内の分類リンクをクリックすると、ページが再読み込みされますが、[トピックごとのケース]メインメニュー項目には、「アクティブな」CSSクラスがありません。

次に画像の例を示します。

ユーザーが「Cases by Topic」のメインメニュー項目をクリックすると、ページが読み込まれます。この時点で、[Cases by Topic]メニュー項目には「アクティブな」CSSクラスがあります。次に、ユーザーはdrupalブロック（ "情報へのアクセス"）内の分類法リンクをクリックします。

enter image description here

同じページがリロードされますが、「アクティブな」CSSは分類法リンク上にあり、メインメニューの「Cases by Topic」メニュー項目ではありません。
enter image description here

分類ブロックのリンクをクリックしても、「アクティブな」CSSクラスを「Cases by Topic」のメインメニュー項目に残したい。

少なくとも、「アクティブ」なcssをクリックするだけで分類のリンクが表示されることはなく、「Cases by Topic」はそのcssクラスを保持します。

何か案は？

7themingtaxonomy-terms
1
David Pugh

JQueryクライアント側を使用して、パスに基づいてクラスを設定することを検討できます。その方法については、この投稿を参照してください。 http://www.itworld.com/article/2832973/development/setting-an-active-menu-item-based-on-the-current-url-with -jquery.html

または、Menu Trail By Pathモジュールを使用してみてください https://www.drupal.org/project/menu_trail_by_path

1
user68786

将来の読者は、モジュールでアクティブなトレイルを制御することに興味を持つかもしれません： menu_position

多くの場合、サイト構築者は、特定のタイプのコンテンツをナビゲーションメニューの特定の位置に表示したいと考えています。すべてのコンテンツを個別にメニューシステムに追加する最も簡単なソリューションには、パフォーマンスと使いやすさの問題があります。 （メニューの1つのスポットに追加された数百のメニュー項目を想像してください。）

このモジュールでは、現在のページを要求された場所のメニューシステムに動的に追加するルールを作成できます。

これには以下の影響が含まれます：

  • テーマの主なリンク
  • テーマの二次リンク
  • パンくずリスト
  • コアのメニューモジュールによって提供されるメニューブロック
  • メニューブロックモジュールによって提供されるメニューブロック
0
David Thomas

here から借用：これはホバーを扱いますが、動作するように原理を変更できるはずです。これにより、アクティブな分類メニュー項目で機能するCSSを作成できます。

When I hover over a div or class with an id of "a", can I get the background color of a div or class with the id of "b" to change?


Yes, you can do that, but only if #b is after #a in the HTML.

If #b comes immediately after #a: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>
That's using the adjacent sibling combinator (+).

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>
That's using the general sibling combinator (~).

Both + and ~ work in all modern browsers and IE7+

If #b is a descendant of #a, you can simply use #a:hover #b.

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.
0
Geoff