Разноцветные выпадающие меню

Question

Я создаю собственную главную страницу для сайта публикации MOSS. Дизайнеры придумали эту идею для всплывающего меню ...

альтернативный текст http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg

, который использует градуированные / разные цвета фона и текста для каждой опции меню.

Кто-нибудь знает, как этого добиться?

Answer 1

Вы можете использовать селектор ближайшего брата 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, но современные браузеры справятся. Пока сайт еще пригоден для использования, градиент цветов - очень незначительная потеря.

Answer 2

Я обнаружил, что это невозможно с Sharepoint

Answer 3

Я бы, вероятно, использовал метод 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>

Answer 4

Если вы хотите иметь возможность вычислять градиент произвольных цветов, эта страница имеет несколько полезных функций для обработки вычислений шестнадцатеричных цветовых триплетов.

Answer 5

Я вижу два варианта с чистым CSS:

1. Если у вас есть фиксированная высота пикселей для строк ввода, вы всегда можете использовать одно фоновое изображение с градиентами на нем. Если вы составляете меню со списками, вы можете просто добавить его к тегу охватывающего списка.

2. Если вы хотите сохранить гибкость высоты строки / размера шрифта, вы можете работать с несколькими классами: по одному для каждого цветового тона. Просто дайте каждой n-й строке специальный класс с соответствующим цветовым тоном в качестве цвета фона и добавьте этот класс в тег для этой строки.

критик дизайна: Проблема, которую я вижу здесь, состоит в том, что у вас будет максимальное количество записей, потому что с этим уровнем постепенного исчезновения цвет фона станет белым после шести или семи записей.

добрые слова: Пока меню не должно быть прозрачным, все будет в порядке.