Адаптивное навигационное меню с иконками
Из этого урока вы узнаете как создать адаптивное навигационное меню с иконками, используя библиотеку Font Awesome и палитру цветов, на чистом CSS.
Демонстрация меню.Подключение Font Awesome
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 разметка
Создадим блок
<body>
<nav>
<a href="#"><i></i> Главная</a>
<a href="#"><i></i> Услуги</a>
<a href="#"><i></i> Портфолио</a>
<a href="#"><i></i> Контакты</a>
</nav></div>
</body> Что означают эти классы?
<i></i> - fas – стили иконки Solid
- fa-fw – иконки с фиксированной шириной, необходимо для выравнивания
- fa-home – изображение иконки
На текущий момент, наше навигационное меню выглядит таким образом:
Сейчас мы видим голую заготовку без стилей и совсем не представляем себе, какие сочетания цветов использовать, чтобы смотрелось наше меню более-менее адекватно.
Я предлагаю не изобретать велосипед, а отправиться в поисках уже готовой цветовой палитры.
Давайте заглянем на сайт Material Palette.
Я выбираю два рядом стоящие цвета: Purple и Deep Purple и вижу сгенерированную палитру цветов с подсказками, какой цвет основной, а какой для текста и иконок. Дальше мы будем копировать нужные нам цвета и задавать их в
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
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.
ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Иконки для меню сайдбара
На этом уроке, мы создадим сайдбар с иконками, для этого нам пригодится иконочный шрифт и хорошие знания в HTML + CSS.
Надо сказать, что мода на минималистический дизайн и увеличение просмотров сайтов с мобильных устройств, подталкивает дизайнеров, чаще использовать в оформлении сайтов – иконки. Все какое-то разнообразие.
Подключение Font Awesome
Font Awesome
Для подключения, через CDN, вставьте ссылку между тегами <head>.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> Поиск иконок и вывод их в меню сайдбара.
Первым пунктом меню у нас будет главная (дом), вбиваем в поиске home и выбираем соответствующую иконку.
Запоминаем код и вставляем в меню сайдбара. Аналогичным образом находим все
HTML код
Создадим левую колонку (сайдбар) с пунктами меню и иконками (тег i), находящиеся внутри ссылок.
<div>
<a href="#"><i></i> Главная</a>
<a href="#"><i></i> Услуги</a>
<a href="#"><i></i> Портфолио</a>
<a href="#"><i></i> Контакты</a>
</div> Значения классов тега i
<i></i> - fa-home – код иконки
- fas – иконка Solid
- fa-fw – фиксированная ширина
Создадим правую колонку, где и будет размещаться основной контент, которая будет прокручиваться при скролле.
<div>
<h3>Иконки для сайдбар меню</h3>
<p>какой-то контент..</p>
<p>какой-то контент</p>
<p>какой-то контент</p>
</div> CSS код
Меню сайдбара должно всегда оставаться наверху и быть видимым на всю высоту экрана. Свойство overflow-x, не даст, длинному названию, выйти за пределы сайдбара, но в тоже время не обрежет его, а перенесет ниже.
.sidebar {
height: 100%;
width: 180px;
position: fixed;
z-index: 1; // сайдбар выше main колонки
top: 0;
left: 0;
background-color: #673AB7;
overflow-x: hidden;
padding-top: 16px; // отступ сверху окна браузера
} Стилизация текста меню и иконок одновременно. Ссылки – строчные элементы и чтобы можно было применить к ним паддинги, следует отобразить их как блочные элементы.
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block; // отображение как блочных элементов
} Сделаем отступ, от левого края браузера на ширину самого сайдбара.
.main {
margin-left: 180px; /* равна ширине сайдбара */
padding: 0px 10px;
} Меняем цвет текста при наведении мышки на ссылки сайдбара.
.sidebar a:hover {
color: #d1c4e9;
} Медиа-запрос для маленьких экранов
Когда высота экрана, станет меньше 450 пикселей, следует уменьшить отступ и размер шрифта.
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
} Посмотреть код целиком можно на Codepen
- Создано 04.02.2019 10:01:59
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.
ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Дизайн иконок меню, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть минимальную навигацию
Минимальная навигация
Просмотр навигации по боковой панели для Dashboard
Боковая панель навигации для приборной панели
Посмотреть минимальную боковую панель навигации для приборной панели
Минимальная боковая панель навигации для приборной панели
Приложение View Food 🍔🍱🍖🍻
Приложение Food 🍔🍱🍖🍻
Посмотреть 🔥 Анимация панели вкладок — Темная версия🌙
🔥 Анимация панели вкладок — Темная версия🌙
Посмотреть меню навигации, взаимодействие!
Меню навигации, взаимодействие!
Посмотреть 🔥 Анимация панели вкладок — Темная версия🌙
🔥 Анимация панели вкладок — Темная версия🌙
Просмотр боковой панели навигации — стекло
Боковая панель навигации — стекло
Просмотр боковой панели навигации для приложения управления файлами
Боковая панель навигации для приложения управления файлами
Просмотр навигации по вкладке FirstVet
Навигация по вкладке FirstVet
View PRO — дизайн мобильных приложений для команд
PRO — дизайн мобильного приложения для команд
Просмотр боковой панели навигации — облегченная версия
Боковая панель навигации — облегченная версия
Просмотр меню навигации боковой панели — анимация
Меню навигации боковой панели — Анимация
Посмотреть приложение Defispot для iOS — версии панели вкладок
Приложение Defispot для iOS — Версии панели вкладок
- 8″ data-ad-data=»» data-boost-id=»» data-is-boost-fallback=»»>
Просмотр боковой панели навигации
Боковая панель навигации
Просмотр боковой панели навигации — облегченная версия 🔥🥳
Боковая панель навигации — облегченная версия 🔥🥳
Просмотр боковой панели навигации
Боковая панель навигации
Посмотреть стекло навигации боковой панели — Spotify 🎸🤘
Стекло навигации боковой панели — Spotify 🎸🤘
Просмотр боковой панели навигации
Боковая панель навигации
Просмотр боковой панели навигации с универсальным набором значков v2.
0Боковая панель навигации с универсальным набором значков v2.0
Просмотр навигации по боковой панели для UI8
Боковая панель навигации для UI8
Просмотреть 😇 Карточка панели мониторинга — Компоненты пользовательского интерфейса
😇 Карта панели управления — компоненты пользовательского интерфейса
Просмотр панели управления Unity — кампании
Панель инструментов Unity — кампании
Просмотр 📏 Навигация по боковой панели — Префект
📏 Боковая панель навигации — Префект
0Зарегистрируйтесь, чтобы продолжить или войдите
Загрузка еще…
31 Примеры значков в меню навигации
12 июня 2012 г.
Одна из фундаментальных вещей в веб-дизайне в отношении удобства использования — это навигация . Меню навигации важны, чтобы помочь пользователю найти информацию, которую он или она ищет. Использование цветов, выделения и эффектов наведения курсора облегчит обнаружение искомых элементов. Использование значков рядом с пунктами меню — отличная альтернатива, способствующая быстрой визуальной идентификации опций; и даже использование значков без текста для сопровождения является жизнеспособным. Иконки, являющиеся частью общего дизайна, также могут служить маркерами, а не просто текстом.
Важным текущим приемом является использование иконок веб-шрифтов. Это позволяет полностью интегрировать меню в адаптивный веб-дизайн благодаря масштабируемости и настройке векторных значков.
Мы представляем коллекции веб-сайтов, которые используют значки в своих навигационных меню и которые, как мы надеемся, могут служить вам примером и вдохновением.
Веб-сайты со значками в меню навигации:
- J Development
http://jpunt.nl/
- Оммеганг
http://www.ommegan.com/
- Ла Мулад
http://lamoulade.com/
- Сообщения для Японии
http://www.messagesforjapan.com/
- Beoplay
http://www.beoplay.com
- Мусифи
This domain is currently available
- Мескаль Буэн Виахе
http://www.mezcalbuenviaje.com/
- Фактор фантастики
http://www.fatorfiction.info/
- Новый квест
Accueil
- Вкус Пер Ла Ричерка
http://www.ilgustoperlaricerca.it/
- Мошенник
http://www.fakeer.cz/en/
- Тимоти Руссиль
http://timothee-roussilhe.
com/ - Тег Интератива
http://www.taginterativa.com.br
- Крис Ван
http://www.chris-wang.com/
- Новый
http://www.we-new.com/
- Виви Ледиш
http://www.viviledish.com/
- Подарочная ракета
http://www.giftrocket.com/
- Лаборатории Амази
http://www.amazeelabs.com
- Мой собственный велосипед
http://www.myownbike.de/
- Скарпо
http://www.scarpo.be
- Неохик
http://www.neochic.de/
- Пикибокс
http://www.pikibox.com/en/
- Скивский фестиваль
- Музыка кочевников
http://www.
com/