WebDesignMagazine.ru – Журнал о веб-дизайне

Как создать меню в стиле Apple при помощи одного CSS3 без использования картинок

0

В этом уроке мы рассмотрим пример создания меню без изображений, в стиле Apple и всего лишь с помощью CSS3! Единственная проблема состоит в том, что работа такого рода меню ограничивается количеством браузеров, которые будут в состоянии правильно отобразить ваши старания (только Firefox и Safari). Поэтому если вы хотите обеспечить правильную работу меню в других браузерах, позаботьтесь о должных изображениях и альтернативном коде.

Преимущество использования CSS3 состоит в том, что это значительно уменьшает время загрузки страницы. Чем быстрее, тем лучше.

 

Демо

 

Шаг 1

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

HTML

CSS

Сейчас меню должно выглядить так:

menu1

Шаг 2

Следующее что мы сделаем – добавим эффект градиента к нашим ссылкам, а также текстовую тень для “встроенного” ( embedded ) вида. Для этого мы используем следующий код, чтобы охватить Firefox, Safari и любой другой браузер, который поддерживает CSS3.

menu2

Шаг 3

Теперь мы добавим еще один атрибут CSS3 под названием border-radius, который закруглит уголки наших ссылок на каждом конце сторон. Сделать это можно  с помощью  first-child и  last-child.

Шаг 4

Теперь мы добавим  последние штрихи к нашей первой части меню, тени и горизонтальные боковые градиенты.
На div меню мы добавим  box-shadow и закруглим углы, чтобы они соответствовали нашим ссылкам.

Нужно добавить марджин в 1px (margin) вправо от нашего li, чтобы создать пространство, для показа нашего ul фона.

Добавляем градиент к ul фону:

menu3

Шаг 5

Теперь мы должны добавить наше hover и active состояние. Это довольно просто, тот же код но разные селекторы:

Для  статуса – active:

 

Финальный результат должен выглядеть так:

menu4

Поделиться: