ПОДЕЛИТЬСЯ

Создаем красивое меню, идеально подходящее для вашего портала.

Меню — важнейший элемент, призванный для помощи клиенту в поиске нужной информации в недрах вашего сайта. Если у нас спросят, что ассоциируется с проводником на каждом отдельном сайте, мы смело ответим: меню для сайта. Виды меню можно перечислять бесконечно. Возможность трансформации и преобразования объектов является чрезвычайно мощным инструментом CSS3. Истинный потенциал данной технологии, на мой взгляд, в полной мере может быть реализован в сочетании со свойством CSS transition или 3D, что позволит создавать прекрасные виды элементов, которые прекрасно украсят ваш сайт.

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

Данная функция CSS3 пользовалась повышенным вниманием с момента ее появления и, скорее всего, окажется одной из наиболее часто используемых. Огромный потенциал этой технологии в совокупности с простотой ее применения подтолкнул разработчиков к реализации новых идей. В данной статье мы научимся создавать динамическую навигацию для сайтов, она будет в форме окружности. Мы будем использовать такие свойства CSS, как transform и transition.

1. С чего начать?

Сначала давайте создадим новый файл HTML5 и добавим в него стандартный HTML-код. Мы добавим контейнер nodiv, присвоив ему класс wrapper, а затем убедимся в том, что не забыли оставить комментарий после тега /nodiv , чтобы наш код был понятен и аккуратен. Затем создадим два пустых тега script, расположенных в самом конце нашего файла.

Рисунок 1

4403923_Рисунок 1

2.Создание контейнера заголовка страницы.

Теперь внутри тега nodiv создадим еще один тег nodiv и присвоим ему класс container. Внутри него мы можем создать заголовок страницы, используя тег H2, которому в дальнейшем присвоим определенный стиль, чтобы он выглядел крупнее и более привлекательно на нашей web-странице.

Рисунок 2

4403923_Рисунок 2

3.Основная кнопка и пункты меню.

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

Рисунок 3

4403923_Рисунок 3

4. Заполнение меню.

Теперь мы можем заполнить наш список с пустыми тегами каким-либо текстом — это и будут пункты нашего меню, расположенные по окружности относительно основной кнопки. Какие именно названия присвоить пунктам нашего элемента– исключительно Ваше дело, но помните о том, что слишком длинный текст нарушит конструкцию. В каждый пункт списка мы можем включить тег span, который позволит манипулировать текстом посредством CSS.

Рисунок 4

4403923_Рисунок 4

5. Скрипты.

Чтобы завершить наш HTML-файл, добавим пару скриптов в самый конец документа перед тегом /body. Содержимое этих скриптов выходит за рамки темы данной статьи, однако в следующих статьях о строении сайтов, мы их подробно разберем.

Рисунок 5

4403923_Рисунок 5

6. Стиль по умолчанию.

Создадим новый CSS файл, назовем его styles.css и в самом начале добавим параметры стиля по умолчанию. Первым делом, прежде чем присвоить свойству box-sizing значение border-box, нам необходимо убедиться в том, что все элементы позиционированы относительно. Это означает, что поля и границы каждого элемента могут изменяться индивидуально.

Рисунок 6

4403923_Рисунок 6

7. Свойства контейнера.

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

Рисунок 7

4403923_Рисунок 7

8. Заголовок страницы.

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

Рисунок 8

4403923_Рисунок 8

9. Основная кнопка меню.

Теперь мы можем создать основную кнопку меню. Следует использовать абсолютное позиционирование и процентные величины свойств top и left. Определим некоторые значения высоты и ширины, установив при этом радиус 50%, чтобы кнопка приобрела форму окружности и хорошо вписалась в дизайн сайта. Кроме того, чтобы избавиться от появления желтой рамки при нажатии кнопки сайта в браузере Google Chrome, присвоим свойству outline значение none.

Рисунок 9

4403923_Рисунок 9

10. Пункты меню.

На данном этапе мы собираемся установить и позиционировать пункты меню, а также применить к ним некоторые стили. Для пунктов меню мы используем те же параметры позиционирования и радиуса, что и для главной кнопки, но значение свойства width установим значительно больше. Затем скрываем их, установив непрозрачность в 0, и добавляем анимацию, используя transition и transform.

Рисунок 10

4403923_Рисунок 10

11. Уменьшение активной области.

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

Рисунок 11

4403923_Рисунок 11

12. Динамика меню.

Наконец-то мы увидим какую-то динамику! Приведенный ниже код позволит открыть меню и придать ему форму окружности. Непрозрачность установлена в 1, поэтому меню становится видимым сразу, как только нажата основная кнопка, при этом время перехода установлено в 3 миллисекунды. Я рекомендую Вам поэкспериментировать с этим параметром, увеличив его, например, вдвое, и самостоятельно посмотреть на то, как замедлится время открытия меню.

Рисунок 12

4403923_Рисунок 12

13. Стиль пунктов меню.

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

Рисунок 13

4403923_Рисунок 13

14. Анкоры.

На данном этапе добавим стили анкорам. Применим абсолютное позиционирование и используем свойства bottom и right. Задав некоторую высоту и ширину этих объектов, мы можем также определить какой-либо цвет. Благодаря нашим действиям текст каждого из пунктов меню развернут и искажен в той же степени, что и соответствующая ему кнопка, но с использованием отрицательных значений.

Рисунок 14

4403923_Рисунок 14

15. Текст кнопок меню.

Теперь сосредоточимся на теге span и внешнем виде текста кнопок меню. На первый взгляд в этом нет ничего сложного, но Вам следует быть внимательными при выборе шрифта и его размера. Ранее мы уже задали параметры шрифта, однако Вы и сейчас можете поэкспериментировать с ними.

Рисунок 15

4403923_Рисунок 15

16. Состояние ссылок hover, active и focus.

Поскольку мы почти закончили работу над списком ссылок, на последнем этапе зададим параметры состояния hover, active и focus. Мы должны только лишь задать цвета при наведении курсора на кнопку (hover), при этом немного затемнив его, для активной ссылки (active) и ссылки, находящейся в фокусе (focus).

Рисунок 16

4403923_Рисунок 16
17. Класс opened-nav.

Создадим правило для класса, который будет использовать наш JavaScript-файл scripts.js. Это позволит отслеживать момент открытия меню и динамически подключать класс, задавая скорость, с которой это происходит. Однако, увидеть, как это работает, мы сможем лишь после того, как завершим последние действия в работе над меню.

Рисунок 17

4403923_Рисунок 17

18. Первый и второй пункты меню.

Когда класс .opened-nav будет добавлен нашим скриптом, нам необходим способ отображать элементы списка в нужном порядке. Единственный способ сделать это – трансформировать и вращать их. Чтобы сделать это мы берем первый и второй пункты меню, синхронно поворачиваем и искажаем их.

Рисунок 18

4403923_Рисунок 18

19. Оставшиеся пункты меню.

Продолжим поворачивать кнопки и ссылки из нашего списка. Как Вы могли заметить, глядя на код, мы искажаем их с одним и тем же значением – 60deg, но используем различные значения для разворота. Рекомендуем Вам поэкспериментировать с этими значениями, чтобы лучше понять, как они работают.

Рисунок 19

4403923_Рисунок 19

20. Адаптированный дизайн меню.

Одно из последних, что мы будем делать, это адаптация меню к работе в различных условиях. Все мы знаем, что удобный и универсальный дизайн на сегодняшний день – это важная составляющая дизайна сайтов. Наш проект в этом отношении не будет исключением. Адаптируем наше меню для работы на планшетах, установив значение свойства max-width в 600px и padding — .5em.

Рисунок 20

4403923_Рисунок 20

21. Завершение.

Теперь давайте убедимся, что наш проект будет корректно работать на мобильных устройствах. Чтобы добиться этого необходимо уменьшить значение max-width до 480px. При достижении этого значение, необходимо изменить размер шрифта, чтобы не нарушить структуру меню. То же самое делаем со шрифтом на кнопках навигации, изменяя параметры класса .button.

Рисунок 21

4403923_Рисунок 21

22. Заключение.

Как видите, мы довольно подробно разобрали инструкцию и получили качественный элемент для нашего сайта. Сделать его нетрудно, а на сайте данный элемент будет смотреться очень уместно, подойдет для сайта любой тематики. Рассмотренный нами пример это отличный способ освоить технику использования свойств transform и transition. Мы настоятельно рекомендуем не бояться экспериментировать с приемами использования этой технологии, поскольку овладение ей позволит Вам создавать действительно потрясающие проекты для украшения и дизайна вашего сайта.

ПОДЕЛИТЬСЯ