Web アプリケーション コントロール用の垂直ナビゲーション バーがあります。ナビゲーション バーは、選択的なツールバーとして使用されます。
したがって、ボタンの通常の状態とホバー状態を除き、ボタンが押されている間は Active 状態である必要があります。
Active 状態では、他のボタンが押されるまで、押されたボタンを暗い背景色に変更する必要があります。
どうやってやるの?CSSで行うことは可能ですか?またはjQueryが必要ですか?CSS で li:active を試しましたが、うまくいきません。
以下は HTML です。
<div class="navigation">
<ul class="app_button" >
<li><a href="XXX" class="app_button"><span>]</span>Function1</a></li>
<li><a href="#" class="app_button"><span>]</span>Function2</a></li>
<ul class="sub_app_button">
<li><a href="aaa">subfunction1</a></li>
<li><a href="bbb">subfunction2</a></li>
<li><a href="ccc">subfunction3</a></li>
<li><a href="ddd">subfunction4</a></li>
</ul>
<li><a href="#" class="app_button"><span>]</span>Function3</a></li>
<ul class="sub_app_button">
<li><a href="eee" >subfunction5</a></li>
<li><a href="fff" >subfunction6</a></li>
</ul>
</ul> <!-- end:app_button -->
</div> <!-- end:navigation -->
以下は CSS です。
div.inner_page div.navigation ul.app_button li{
left:0;
display: block;
margin:0px;
padding: 0;
}
div.inner_page div.navigation ul.app_button li a
{
font-size:16px;
display: block;
width: 100%;
padding: 8px 0px 6px 0px;
color: #ffffff;
text-decoration: none;
background: #aaa;
border-bottom:none;
border-top:none;
}
div.inner_page div.navigation ul.app_button li a:hover
{
width: 150px;
color: #9be163;
background: #333333;
top: 0px;
border-bottom:none;
border-top:none;
}