如何根據選定的項目在菜單上改變背景

這讓我望而生畏，看不到要走的路。這是我第一次在這裏提出問題，所以如果我沒有遵循協議，請糾正我。謝謝！！！如何根據選定的項目在菜單上改變背景

我需要菜單的背景根據選定的項目進行更改，因此在激活時，左側的項目將顯示爲橙色，同時將項目右側的項目保持灰色。

此外，分隔顏色的三角形必須保持在活動菜單項的右側。

對於第一個元素來說很簡單，但是第二個元素和前進元素不能使代碼在切割菜單邊界時工作。

例如，我有[individuos] [EMPRESAS] [corredores] [proveedores]

當EMPRESAS是活動的，individuos和EMPRESAS應橙而corredores和provedores應該是灰色的。

如果選擇了corredores，那麼個體，empresas和corredores應該是橙色的，而被證明是灰色的。

我想張貼圖像來說明，但作爲新手我不允許。

#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; 
}

這是一個很好的 First active element appears correctly

這個人是不是，看到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

編輯：剛纔看到下面有關。主動類的最新評論。

如果你可以添加一些JavaScript到你的頁面，你可以通過for循環爲每個li項目添加「orange」到它的類，直到找到.active類，然後剩下的將會有「灰色」附加到課堂上。我會稍後嘗試一個提琴手，當我有一些空閒時間

來源

2011-06-28 19:52:51 steve

是的，這是嚴格的html + css。嗯，用PHP並添加類.grey和。橙色將是一個解決方案。問題在於菜單是動態生成的（Drupal），但我希望只能從CSS工作。 – MAGA

對不起，我不熟悉Drupal如何創建菜單。它是否將任何特殊類或標識添加到導航欄中的當前頁面項目？此外，該網站的鏈接將有助於排除故障 – 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中使用此功能，請添加span元素，而不是使用:before和:after。

來源

2011-06-28 20:25:05 NGLN

我已附加圖像以澄清問題並修改了菜單項名稱，因此全部匹配 – MAGA

@MAGA我添加了您的「箭頭」。 – NGLN

我一定在做錯事，我正在試着看看這個例子，但是灰色方塊停留在別人和其他人之間2 – MAGA

如何根據選定的項目在菜單上改變背景

回答

相關問題