Горизонтальное выпадающее меню на CSS 3
Из данного урока вы узнаете, как создать красивое, профессиональное, горизонтальное выпадающее меню на CSS.
Меню создавалась с использованием только одного изображения. Градиент, падающая тень, и закругленные углы сделаны при помощи CSS 3.
Материалы по теме:
В данном меню применены новые свойства CSS 3. Помните, эти новые свойства поддерживаются только последними версиями Google Chrome, Mozilla Firefox, Safari и Opera.
Шаг 1 - Структура горизонтального выпадающего меню.
Для начала необходимо создать структуру меню используя HTML. Для создания структуры мы будем использовать неупорядоченный список, который будет содержать вложенные списки, чтобы создать выпадающий эффект:
В коде выше вы можете видеть неупорядоченные списки <UL>. UL были добавлены в родительский тег UL, и вложены в элемент <LI>. Используя этот метод мы можем создать выпадающее меню, после добавления CSS все выровняется и начнет выглядеть иначе.
Каждому элементу списка был назначен класс headerList1, за исключением последнего пункта (Javascript). Этот класс будет использоваться чтобы создать разделитель с правой стороны каждого пункта меню, последний пункт меню не требует границы с правой стороны, поэтому ему не присваивался данный класс.
Кроме этого якорь ссылки каждого пункта меню заключен в тег <span>, за исключением первого пункта. Это будет использоваться для создания границы с левой стороны. Этот метод позволяет нам иметь 2 различных цветных границы, что обеспечивает хороший "блестящий" эффект.
Шаг 2 - Стилизация горизонтального выпадающего меню при помощи CSS.
Изображение слева показывает результат, который мы получим от применения данных стилей.
В начале обратите внимание на свойство border radius, оно дает возможность сделать закругленные углы. Свойства border-radius, moz-border-radius и -webkit-border-radius задают все те же закругленные углы только для разных браузеров. Moz для Firefox и WebKit для Safari и Chrome, хотя возможно, что стандартное свойство border-radius будет работать в более новых версиях всех браузеров. Как вы видите здесь необходимо просто указать значение, в данном случае 13px.
После этого был добавлен градиент.
Это сделано при помощи обычного свойства CSS - background, но с другим значением. Так же как и с закругленными углами, для браузера Firefox используется Moz, в этом свойстве указано, где начинается градиент и два цвета которые будут использоваться для создания градиента. Для браузеров WebKit, немного сложнее. Здесь указанно тип градиента, где он начинается, где заканчивается, а также два цвета, для начала и конца градиента.
Ну и наконец была добавленная тень для бокса меню. Насколько я знаю, данный эффект, в настоящее время работает только в браузерах Safari и Firefox. Свойство box shadow имеет 4 значения - горизонтальное смещение, вертикальное смещение, радиус размытия и значение цвета.
При помощи данных стилей мы избавились от отступа и пунктов списка. Кроме этого было заданно относительное позиционирование. Сделано это, потому что мы будем использовать абсолютное позиционирование для вложенных тегов <UL>.
Здесь было применено свойство display:block, а также float:left;, что дает смещение каждого пункта меню в лево и обтекание. Кроме этого применены внутренние отступы с низу и с верху, чтобы пункты меню располагались по центру.
Был добавлен второй разделитель справа, задан цвет, размер и семейство шрифта.
Заданно изменение цвета и подчеркивание шрифта при наведении указателя мыши.
Было применено абсолютное позиционирование, смещение на 42px, а также фоновое изображение, добавлена граница, размер шрифта и определена ширина для выпадающего меню. Сохраните примененное фоновое изображение -
Вложенное меню смещено на 60px в право, а также применено свойство display:block; которое обеспечивает видимость меню во время перемещения курсора.
Последние штрихи позволяющие избавится от нежелательной границы и изменить цвет текста.
Помните, что не все свойства CSS 3 поддерживаются современными браузерами. Данный урок призван показать вам некоторые новые возможности CSS 3.
- Название: Исходники меню
- Ссылка: gorizontalnoe-vypadayushchyee-menyu.rar1.36 KB
- Фрмат: RAR
Материал подготовлен проектом: WebMasterMix.ru
Источник
- Подробности
-
Опубликовано: 03 Январь 2011
-
Обновлено: 04 Сентябрь 2013
-
Просмотров: 36585