Рубрика CSS

CSS3 выпадающее меню

В этом уроке мы рассмотрим способ создания многоуровневого выпадающего меню в стиле Mac. Для создания меню я использовал следующие CSS3 свойства – border-radius, box-shadow и text-shadow. Данное меню прекрасно отображается в Firefox, Safari и Chrome. В остальных браузерах, не поддерживающих CSS3 таких как IE7 +, скругленные углы не отображаются.

На рисунке ниже показано, как будет выглядеть меню, если CSS3 не поддерживается.

Использование градиентного изображения

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

Интенсивность градиента может быть изменена путем смещения фонового изображения вверх или вниз. Кроме того, цвет градиента можно легко регулировать путем изменения цвета фона.