不同顏色的飛出菜單

Question

我正在爲MOSS發佈網站創建自定義母版頁。設計師們想出這個主意的飛出菜單...

alt text http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg

它採用畢業/不同backgrond和文字顏色爲每個菜單選項。

有誰知道如何做到這一點？

Answer 1

我發現這不是可以與SharePoint

Answer 2

您可以使用CSS next-sibling選擇器（+）來實現此目的，但IE6將無法獲得樣式。

做類似下面的（顏色屬性只是舉例）：

ul ul li { background: darkblue; color: lightblue; } 
ul ul li+li { background: blue; color: lightblue; } 
ul ul li+li+li { background: lightblue; color: darkblue; } 
ul ul li a:hover { color: black; } 

或者，你就必須要麼應用CSS類各子項（談下去的程序員，如果你」對此不負任何責任），或者通過使用javascript添加類來完成。

理想情況下，儘量說服他們，你不能爲IE6做，但現代瀏覽器將管理得很好。只要網站仍然可用，顏色的漸變是非常小的損失。

Answer 3

我看到兩個possibilites純CSS：

1. 如果你有固定的像素高度的條目線，你總是可以使用一個單一的背景圖片與它的梯度。如果您使用列表製作菜單，則可以將它放在包含列表標記上。

2. 如果你想保持線條高度/字體大小的靈活性，你可以使用多個類：每種色調一個。只要給每個第n行一個特殊的班級添加相應的色調作爲背景色，然後在該行的標籤上打擊該班級。

設計評論： 我在這裏看到的問題是，您將擁有最大數量的條目，因爲在逐漸淡化後，背景顏色將在六或七個條目後變爲白色。

言辭： 只要菜單不必透明，你應該沒問題。

Answer 4

如果你想能夠計算任意顏色的梯度，this page有一些有用的函數來處理十六進制顏色三元組的計算。

Answer 5

我可能會使用Suckerfish方法與不同的CSS類在菜單的<li>每個級別：

<ul id="menu"> 
    <li class="root"><a href="#">Home</a></li> 
    <!-- etc. --> 
    <li><a href="#">Products</a> 
     <ul> 
      <li class="sub1"><a href="#">BTE Legal Expense Insurance</a></li> 
      <li class="sub2"><a href="#">Legal Services</a></li> 
      <!-- etc. --> 
     </ul> 
    </li> 
    <!-- etc. --> 
</ul>