Question

我正在为MOSS发布网站创建自定义母版页。设计师们为飞出菜单提出了这个想法...

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

为每个菜单选项使用渐变/不同的背景和文字颜色。

有谁知道如何做到这一点？

Answer 1

您可以使用CSS next-sibling selector（+）来实现此目的，但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 2

我看到两个纯css的可能性：

1。如果输入行的像素高度固定，则可以始终使用一个带有渐变的背景图像。如果您使用列表创建菜单，则可以将其打包在包含列表标记上。

2。如果你想保持线高/字体大小灵活，你可以使用多个类：每个色调一个。只需给每个第n行一个特殊的类，使用相应的色调作为背景颜色，并在该行的标记上打一个类。

设计评论家：我在这里看到的问题是你将有最大数量的条目，因为这种逐渐淡化的级别后，背景颜色将在六或七个条目后变为白色。

善意的话：只要菜单不必透明就可以了。

Answer 3

如果您希望能够计算任意颜色的渐变，this page有一些用于处理十六进制颜色三重计算的有用函数。

Answer 4

我可能会在菜单中为<li>的每个级别使用Suckerfish方法和不同的CSS类：

<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>

Answer 5

我发现Sharepoint

无法做到这一点

不同颜色飞出菜单

5 个答案: