我正在为 MOSS 发布站点创建自定义母版页。设计师为飞出菜单提出了这个想法......
替代文字 http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg
它为每个菜单选项使用渐变/不同的背景和文本颜色。
有谁知道如何做到这一点?
我正在为 MOSS 发布站点创建自定义母版页。设计师为飞出菜单提出了这个想法......
替代文字 http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg
它为每个菜单选项使用渐变/不同的背景和文本颜色。
有谁知道如何做到这一点?
您可以使用 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 做到这一点,但现代浏览器会很好地管理。只要该站点仍然可用,颜色的渐变是非常小的损失。
我看到两个纯 CSS 的可能性:
1. 如果输入行的像素高度是固定的,则始终可以使用一张带有渐变的背景图像。如果您使用列表制作菜单,则可以将其贴在包含列表的标签上。
2. 如果您想保持行高/字体大小灵活,您可以使用多个类:每种色调一个。只需给每个第 n 行一个特殊的类,并以相应的色调作为背景色,然后将该类打在该行的标签上。
设计评论家:我在这里看到的问题是您将拥有最大数量的条目,因为随着这种逐渐淡化的水平,在六或七个条目后背景颜色将变为白色。
客气话:只要菜单不必是透明的就可以了。
如果您希望能够计算任意颜色的渐变,此页面有一些有用的函数来处理十六进制颜色三元组计算。
对于菜单中的每个级别,我可能会使用具有不同 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>
我发现 Sharepoint 无法做到这一点