html - 子がクリックされた後も CSS メニューを表示したままにする方法

Question

私はこのCSSを持っています:

#menuBar {
  /*width: 960px;*/
  height: 35px;
  clear: both;
}

ul#nav {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #0068b4;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  line-height: 35px;
  color: #ffffff;
  text-decoration: none;
  margin: 0;
  padding: 0 30px;
  background-color: #0068b4;
}

/* APPLIES THE ACTIVE STATE TO PARENT*/
ul#nav .currentParent a, ul#nav li:hover > a  {
  color: #ffffff;
  text-decoration: none;
  background: #005899;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 97%;
  height: 35px;
  margin: 35px 0 0 0;
  background-color: #e0e0e0;
}

ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

/* APPLIES THE ACTIVE STATE TO CHILD*/
ul#nav li ul li.currentChild a, ul#nav li:hover > ul li a:hover {
  color: #000000;
  text-decoration: none;
  background-color: #afafaf;
}

そして、このHTML：

<div id="menuBar">
    <ul id="nav">
    <li><a href="javascript: void;">Menu 1</a>
        <ul>
            <li><a href="menu1submenuitem1.html">Menu 1 Submenu item 1</a></li>
            <li><a href="menu1submenuitem2.html">Menu 1 Submenu item 2</a></li>
            <li><a href="menu1submenuitem3.html">Menu 1 Submenu item 3</a></li>
        </ul>
    </li>
    <li><a href="javascript: void;">Menu 2</a>
        <ul>
            <li><a href="menu2submenuitem1.html">Menu 2 Submenu item 1</a></li>
            <li><a href="menu2submenuitem2.html">Menu 2 Submenu item 2</a></li>
        </ul>
    </li>
    <li class="currentParent"><a href="javascript: void;">Menu 3</a>
        <ul>
            <li><a href="menu3submenuitem1.html">Menu 3 Submenu item 1</a></li>
            <li class="currentChild"><a href="menu3submenuitem2.html">Menu 3 Submenu item 2</a></li>
            <li><a href="menu3submenuitem3.html">Menu 3 Submenu item 3</a></li>
        </ul>
    </li>   
    </ul>
</div>

これを使用して、2 レベルの水平メニューを表示しています。私が達成したいのは、第 2 レベルのオプションをクリックしたときに、親と子自体が強調表示されたままになるようにすることです。これを行うために、ASP.net ページのコードビハインドでメニューの HTML を実際に構築し、それらを強調表示するために currentParent と currentChild のスタイルを使用しています。それは機能しています。私が理解できなかったのは、クリックされた子を含む第 2 レベルを表示したままにする方法です。display: none多くの場所に追加してみましたが、何も機能していません。誰かがこれを手伝ってくれて、これを実現するために CSS に追加する必要がある変更についてアドバイスをくれるかどうか疑問に思っていますか?

編集1：

コードを完成させ、動作していることを確認しました (ここで確認できます: http://jsfiddle.net/cesarvinas/ZQWe7/ )。クラスcurrent Parentを親メニューMenu 3に適用し、クラスcurrentChildをサブメニュー項目Menu 3 Submenu item 2に適用したことを HTML コードで確認できます。これで、親子がハイライトされるようになりました。さらに、サブメニュー項目 (灰色の部分) を含む行が必要です: Menu 3 Submenu item 1、Menu 3 Submenu item 2、およびMenu 3 Submenu item 3は表示されたままです。

メインの投稿で説明したように、ASP .net ページのコードビハインドにコードを追加して、HTML を構築し、必要に応じて CSS クラスを割り当てました。

<li>親(この例ではMenu 3の親) に割り当てて、その子を表示したままにする CSS クラスを作成する方法はありますか?

編集2

ここで、特に 3dgoo からの支援のおかげで、これはほぼ完了しました。ここの例を更新しました: http://jsfiddle.net/cesarvinas/ZQWe7/5/。ただし、最新ではないサブメニュー項目をシルバーのままにする (3dgoo の例のように青ではない) には、選択されていないサブメニュー項目に適用する CSS クラス「.notselected」をもう 1 つ作成する必要がありました。 . 私の質問は、追加の CSS クラスを追加せずに同じことを達成する方法はありますか? これは私がやったことです：

ul#nav li ul li.notselected a,
ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

そしてHTML：

<li class="currentParent"><a href="#">Menu 3</a>
    <ul>
        <li class="notselected"><a href="#">Menu 3 Submenu item 1</a></li>
        <li class="currentChild"><a href="#">Menu 3 Submenu item 2</a></li>
        <li class="notselected"><a href="#">Menu 3 Submenu item 3</a></li>
    </ul>
</li>

CSSでこれを試しました：

ul#nav li ul li a,
ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

HTML からを削除しclass="notselected"ますが、機能しません。何故ですか？

ありがとう。

score 0 · Accepted Answer

したがって、2 番目の行でクリックされた項目が強調表示され、クリック後に適切な 2 番目の行が表示されるようにする必要があります。

メニューが標準リンク (クリックごとにページが更新される) を使用する場合は、ASP 変数を使用して現在のページを示し、その変数に従って CSS を変更して、正しいサブメニューを表示し、正しい項目を強調表示するのが最適です ( 3dgoo の CSS サンプルセレクターから開始できますul#nav li.currentParent > ul)。

2 つ目のケースは、クリック時にページを更新していない場合です (たとえば、AJAX を使用してページの一部のみを読み込むなど)。その場合、Javascript/jQuery を使用してクリックをリッスンし、それに応じてクラスを変更する必要があります。これは、アイテムをクリックすると、その親li要素が唯一のcurrentChildクラスになりcurrentParent、もちろんその親になる必要があることを意味します。

編集

次のようにすべてのcurrentParentサブメニューアンカーを選択できます。ul#nav li.currentParent ul li aその後、ホバー/アクティブエフェクトを追加currentChildします。

score 0 · Accepted Answer

ul#nav li.currentParent > ulこれを行うには、次のようなcss セレクターを使用します。

CSS

...
ul#nav li.currentParent > ul, // Add this
ul#nav li:hover > ul {
    position: absolute;
    display: block;
    width: 97%;
    height: 35px;
    margin: 35px 0 0 0;
    background-color: #e0e0e0;
}
ul#nav li:hover > ul { // And add these three lines
    z-index: 10;
}
...

デモ

html - 子がクリックされた後も CSS メニューを表示したままにする方法

2 に答える 2

Related

Reference