不同颜色的飞出菜单

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>