当前位置：文江博客话题详情

不同颜色的飞出菜单

发布于 2024-07-12 00:00:16 字数 296 浏览 3 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一桥轻雨一伞开 2024-07-19 00:00:16

您可以使用 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 上执行此操作，但现代浏览器可以很好地管理。只要网站仍然可用，颜色渐变就是一个非常小的损失。

You can use the CSS next-sibling selector (+) to achieve this however IE6 won't get the styles.

Do something like the following (colour properties are just for example):

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

Alternatively, you'll have to either apply a CSS class to each subitem going down (talk to the programmer if you're not responsible for that), or do it by adding classes with javascript.

Ideally try to convince them that you can't do it for IE6 but modern browsers will manage fine. As long as the site is still usable the gradient of colours is a very minor loss.

回复收藏 0 原文

三人与歌 2024-07-19 00:00:16

我看到纯 css 有两种可能性：

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

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

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

美言：
只要菜单不必是透明的就应该没问题。

回复收藏 0 原文

反差帅 2024-07-19 00:00:16

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

回复收藏 0 原文

無處可尋 2024-07-19 00:00:16

我可能会使用 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>

I would probably use the Suckerfish method with different a CSS class for each level of <li> in the menu:

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

回复收藏 0 原文