Создание адаптивного разноцветного меню
Поиск

Создание адаптивного разноцветного меню

Nikel, 02.05.2019

В этом уроке мы создадим красивое адаптивное  меню с помощью CSS3 и jQuery, при этом будем учитывать 3 размера окна просмотра: 1100px, 768px и 480px. Вот как будет выглядеть наша навигация в итоге:

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

Разметка

Для получения нашего адаптивного меню мы просто поместим ссылки внутри неупорядоченного списка, обернутого в тег nav. Используем знак unicode ☰,  чтобы у нас была кнопка переключения, позволяющая отображать меню на небольших экранах.

Мы также добавим fontAwesome иконки для каждого пункта меню, используя классы fontAwesome . Я уже писала ранее о сервисе иконок fontAwesome, поэтому если вам мало что о них известно можете прочитать здесь.

CSS стили

Теперь давайте превратим эту простую разметку во что-нибудь живое, добавив сначала общие стили  для  ссылок и фона body.

Затем укажем некоторые настройки ширины для div класса .nav-container и класса .container. Установим ширину в процентном отношении — 95%.и максимальную ширину 1100px, также выровняем все по центру экрана.

Далее стилизуем остальные элементы. Зададим стили для логотипа, класса nav-bar, ссылки и т.д.

Обратите внимание, что здесь использовались переходы CSS3. Они просто добавляют плавную анимацию при наведении мыши в течение 0,3 секунды.

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

Медиазапросы

Сделаем  навигацию адаптивной, укажем  медиазапросы для размеров окна просмотра 768px и 480px.

Зададим  ширину 50% для каждого элемента для области просмотра 768px, обычно такая ширина соответствует планшетам. Меню будет красиво скомпановано по два пункта в ряду, это будет выглядеть так:

Обратите внимание, что для области 480px, соответствующей смартфонам наша навигация будет скрыта, ее высота установлена в 0. Класс nav-open, который добавляет сам скрипт, задает ненулевую высоту нашему меню при нажатии на значок списка.

Сценарий

Теперь, чтобы закончить наше  адаптивное меню, добавим наш jQuery внутри элемента head. Этот код jQuery просто выбирает список меню и добавляет класс nav-open, и еще добавляет анимацию slideToogle( плавное увеличение либо уменьшение высоты) при появлении и скрытии списка меню в течение 300 миллисекунд.

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

Демонстрационный пример