web-dev-qa-db-ja.com

CSS：アクティブなナビゲーションページメニューの色を変更する方法

ウェブサイトでユーザーが選択したアクティブまたは現在のページナビゲーションリンクの色を変更しようとしています。私は何を間違えていますか？ありがとう。

これまでのCSSは次のようになります。

div.menuBar
{
   font-family: BirchStd;
   font-size: 40px;
   line-height: 40px;
   font-weight: bold;
   text-align: center;
   letter-spacing: -0.1em;
}

div.menuBar li{list-style:none; display: inline;}
div.menuBar li a:active{color:#FF0000;}
div.menuBar ul{margin:0;}

また、HTMLはinclude PHP関数を使用してナビゲーションメニューのページテンプレートを呼び出します。

<div class="menuBar">
  <ul>
  <li><a href="index.php">HOME</a></li>
  <li><a href="two.php">PORTFOLIO</a></li>
  <li><a href="three.php">ABOUT</a></li>
  <li><a href="four.php">CONTACT</a></li>
  <li><a href="five.php">SHOP</a></li>
 </ul>
cssnavigation
11
Steven

私はあなたがa:active CSSセレクターが行います。これは、リンクをクリックしたときにのみリンクの色を変更します（クリックの持続時間、つまりマウスボタンが押し下げられている時間のみ）。あなたがする必要があるのは、新しいクラスを導入することです。 .selectedをCSSに追加し、リンクを選択したら、選択したメニュー項目を新しいクラスで更新します。

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

selectedPageパラメーターを受け取るには、テンプレートページを更新する必要があります。

22
James

CSS :active stateは、クリックされたリンクのアクティブな状態を意味します。たとえば、クリックしたがマウスボタンをまだ離していない瞬間です。どのページを表示しているかはわからず、メニュー項目にスタイルを適用できません。

問題を修正するには、クラスを作成し、現在のページのメニューに手動で追加する必要があります。

a.active { color: #f00 }

<ul>
    <li><a href="index.php" class="active">HOME</a></li>
    <li><a href="two.php">PORTFOLIO</a></li>
    <li><a href="three.php">ABOUT</a></li>
    <li><a href="four.php">CONTACT</a></li>
    <li><a href="five.php">SHOP</a></li>
</ul>
5
Zoltan Toth

アクティブ/現在のページにID currentを追加します。

<div class="menuBar">
  <ul>
  <li id="current"><a href="index.php">HOME</a></li>
  <li><a href="two.php">PORTFOLIO</a></li>
  <li><a href="three.php">ABOUT</a></li>
  <li><a href="four.php">CONTACT</a></li>
  <li><a href="five.php">SHOP</a></li>
 </ul>

#current a { color: #ff0000; }
3
Nikola K.