選択したアイテムに応じてメニューの背景を変更する方法

これは私にとっては厄介なものです。私がここに質問を入れたのはこれが初めてのことなので、もし私がプロトコルに従わなければ私を修正してください。ありがとう!!!選択したアイテムに応じてメニューの背景を変更する方法

選択したアイテムに応じて変更するメニューの背景が必要なので、アクティブな場合は左側のアイテムがオレンジ色で表示され、右側のアイテムはグレー表示されます。

また、色を分離する三角形は、アクティブなメニュー項目の右側に置かなければなりません。

最初の要素については、簡単ですが、2番目と3番目の要素については、メニューの境界を切り取ってコードを機能させることはできません。 corredoresとprovedoresは灰色であるべきである

は、例えば、私は[individuos] [empresas] [corredores]は[proveedores]

empresasがアクティブである

は、individuosとempresasはオレンジであるべきです。

コーレルが選択されている場合は、個体、エンペラ、コーダは橙色で、灰色である必要があります。

私は説明するために画像を投稿したが、初心者としては許可されていません。

#navigation { 
    position: absolute; 
    line-height: 40px; 
    padding: 0; 
    margin: 0; 
    margin-left: 210px; 
    width: 730px; 
    background-color: #757373; 
} 

#navigation ul li a { 
    text-decoration: none; 
    float: left; 
    padding: 0 40px 0 10px; 
} 

#navigation .empresas .active { 
    background: url(images/the-background.png) no-repeat right; 
}

この1つは First active element appears correctly

良いですがこの1つはないが、INDIVIDUOSは Second element is missing orange on the left for first element

出典

2011-06-28 MAGA

解決策 わかりました。問題は解決しました。これは私が見た最もクリーンなトリックでした。私はPHPやクラスなどに何かを追加する必要はありませんでした。その解決策は同僚によって指示された。それが必要だったのは、Z-インデックスとポジショニングのトリッキーなことでした。 @peterと@PeterSmithに感謝します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Ejemplo menú</title> 

<style type="text/css"> 

ul { list-style-type: none; } 

ul li { display: inline; position: absolute; text-align: right; } 

a { position: absolute; } 

.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; } 
a.uno:hover { background: #FF6600; } 

.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; } 
a.dos:hover { background: #FF6600; } 

.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; } 
a.tres:hover { background: #FF6600; } 

.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; } 
a.cuatro:hover { background: #FF6600; } 

</style> 

</head> 

<body> 
<ul> 
<li><a href="" class="uno">PRUEBA 1</a></li> 
<li><a href="" class="dos">PRUEBA 2</a></li> 
<li><a href="" class="tres">PRUEBA 3</a></li> 
<li><a href="" class="cuatro">PRUEBA 4</a></li> 
</ul> 
</body> 
</html>

出典

2011-06-29 21:21:36 MAGA

あなた自身の答えを受け入れたものとしてマークすることができますので、それは無回答のセクションにはもう表示されませんか？ – NGLN

完了、申し訳ありませんが、今でもロープを学んでいます。 – MAGA

編集オレンジ色であることを参照してください。ただ、.activeクラスについて下記の最新のコメントを見ました。

あなたのページにいくつかのjavascriptを追加することができたら、それぞれのli項目のforループを実行し、そのクラスに "orange"を追加して、.activeクラスを見つけて残りの部分を "クラスに追加されます。私は後で私はいくつかの自由な時間を持っているときにフィドラーを試してみます

出典

2011-06-28 19:52:51 steve

はい、これは厳密にhtml + cssです。うーん、PHPとクラスを追加する。グレイと。オレンジは解決策でした。問題は、メニューが動的に生成されていることです（Drupal）が、私はCSSからのみ動作させることを望んでいました。 – MAGA

申し訳ありませんが、私はDrupalがどのようにメニューを作成するかに精通していません。 navの現在のページ項目に特別なクラスやIDを追加しますか？また、サイトへのリンクはトラブルシューティングに役立ちます – steve

これはすべてこれがルートメニューであり、つまり子がないことです。私はいつも持っている。メニューバーのクラス：#navigation（コードに示されているように）。各タブには、クラス：.menu-114などがあります。また、.active、。first、.last、.active-trailのクラスを取得します。ことは、これはすべてのルートメニューなので、私は歩道などを生成していないということです。 – MAGA

多分this fiddleはいくつかのインスピレーションを提供しますか？

CSS：

#navigation li { 
    background-color: #ffa500; 
} 
#navigation li.active+li, 
#navigation li.active+li+li, 
#navigation li.active+li+li+li, 
#navigation li.active+li+li+li+li, 
#navigation li.active+li+li+li+li+li { 
    background-color: #757373; 
}

はHTML：

<div id="navigation"> 
    <ul> 
     <li><a href="">professionals</a></li> 
     <li><a href="">organizations</a></li> 
     <li class="active"><a href="">others</a></li> 
     <li><a href="">others2</a></li> 
    </ul> 
</div>

更新

は "矢印" とそれ以上とupdated fiddleを参照してください。これをIE7でも使用したい場合は、:beforeと:afterの代わりにspanの要素を追加してください。

出典

2011-06-28 20:25:05 NGLN

問題を明らかにするために画像を添付し、メニュー項目名をすべて一致させるように画像を添付しました – MAGA

@MAGA「矢印」を追加しました。 – NGLN

私は間違ったことをしているに違いありません、私は例を見ようとしていますが、灰色のボックスは他人と他の人の間にとどまっています2 – MAGA

選択したアイテムに応じてメニューの背景を変更する方法

答えて

関連する問題