Адаптивное навигационное меню с иконками
Из этого урока вы узнаете как создать адаптивное навигационное меню с иконками, используя библиотеку Font Awesome и палитру цветов, на чистом CSS.
Демонстрация меню.
Подключение Font Awesome
Подключить можно двумя способами: скачать архив или вставить ссылку между тегами <head>. Мы воспользуемся CDN ссылкой.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
Все, иконочный шрифт подключен.
Поиск и вызов иконки на сайте
Первым пунктом меню у нас будет главная страница, вбиваем в поиске слово home и выбираем подходящую нам иконку.
Копируем код, как вы видите на скриншоте ниже и вставляем в нужном нам месте на HTML странице. Таким образом находим иконки для всех пунктов меню.
HTML разметка
Создадим блок <nav>, это специальный тег, предназначенный для ссылок в навигационном меню. Внутри блока вы видите четыре ссылки с временными заглушками для будущих страниц. Внутри ссылки тег <i> вызывает класс иконки и рядом с ним, мы прописали название пункта меню.
<body>
<nav>
<a class="active" href="#"><i class="fas fa-fw fa-home"></i> Главная</a>
<a href="#"><i class="fas fa-fw fa-code"></i> Услуги</a>
<a href="#"><i class="fas fa-fw fa-briefcase"></i> Портфолио</a>
<a href="#"><i class="fas fa-fw fa-map-marker"></i> Контакты</a>
</nav></div>
</body>
Что означают эти классы?
<i class="fas fa-fw fa-home"></i>
- fas – стили иконки Solid
- fa-fw – иконки с фиксированной шириной, необходимо для выравнивания
- fa-home – изображение иконки
На текущий момент, наше навигационное меню выглядит таким образом:
Сейчас мы видим голую заготовку без стилей и совсем не представляем себе, какие сочетания цветов использовать, чтобы смотрелось наше меню более-менее адекватно. Я предлагаю не изобретать велосипед, а отправиться в поисках уже готовой цветовой палитры.
Давайте заглянем на сайт Material Palette.
Я выбираю два рядом стоящие цвета: Purple и Deep Purple и вижу сгенерированную палитру цветов с подсказками, какой цвет основной, а какой для текста и иконок. Дальше мы будем копировать нужные нам цвета и задавать их в CSS коде.
CSS код
Смотрим на палитру и задаем цвет фона для тега <nav>.
nav {
width: 100%;
background-color: #673ab7;
overflow: auto;
}
Стилизуем ссылки панели навигации, палитра рекомендует для них белый цвет. Здесь мы задаем стили как для текста ссылок, так и для иконок одновременно, поскольку иконки – шрифтовые.
nav a {
float: left;
padding: 12px;
color: #fff;
text-decoration: none;
font-size: 17px;
}
Меняем цвет фона при наведении мышки на ссылки.
nav a:hover {
background-color: #d1C4E9;
}
Задаем цвет текущей активной ссылке.
.active {
background-color: #e040fb;
}
Адаптируем меню навигации
На ширине экрана меньше, чем 500 пикселей, меню начинает ломаться. Нам необходимо строчный элемент <a> сделать блочным и отменить обтекание блоков слева.
@media screen and (max-width: 500px) {
nav a {
float: none;
display: block;
}
}
Таким образом мы получим вертикальное меню, на всех устройствах с ширина экранов, которых меньше 500 пикселей.
Посмотреть код целиком можно на Codepen
See the Pen Responsive Navigation Bar with Icons by porsake (@porsake) on CodePen.
-
Создано 15.10.2018 10:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.