2

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

替代文字 http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg

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

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

4

5 回答 5

4

您可以使用 CSS 下一个兄弟选择器 (+) 来实现这一点，但 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 做到这一点，但现代浏览器会很好地管理。只要该站点仍然可用，颜色的渐变是非常小的损失。

于 2009-01-14T17:42:57.070 回答
0

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

1. 如果输入行的像素高度是固定的，则始终可以使用一张带有渐变的背景图像。如果您使用列表制作菜单，则可以将其贴在包含列表的标签上。

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

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

客气话：只要菜单不必是透明的就可以了。

于 2009-01-14T17:55:02.397 回答
0

如果您希望能够计算任意颜色的渐变，此页面有一些有用的函数来处理十六进制颜色三元组计算。

于 2009-01-14T17:59:21.903 回答
0

对于菜单中的每个级别，我可能会使用具有不同 CSS 类的Suckerfish方法：<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>
于 2009-01-14T18:03:43.580 回答
0

我发现 Sharepoint 无法做到这一点

于 2010-04-21T14:10:41.870 回答