Навигационное меню с иконками + hover эффект
Из этого урока вы узнаете как создать навигационное меню с иконками и hover-эффектом, используя библиотеку Font Awesome на чистом CSS.
1) Подключить библиотеку Font Awesome
Воспользуемся быстрым способом подключения - через CDN-ссылку.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2) Получить код иконок
Чтобы скопировать код иконок, зайдите на нужную версию Font Awesome из поиска на Google.
Подходящие иконки мы выбираем сами, пользуясь поиском.
3) Создать HTML-разметку
В навигационное меню будет 5 пунктов, каждый из которых мы поместим в тег li. Между парным тегом li у нас будет две иконки и название меню, обернутые в гиперссылку. Две одиннаковых иконки нужны для реализации супер hover-эффекта.
<ul>
<li>
<a href="#">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="name">Home</div>
</a>
</li>
...
</ul>
4) Центрирование списка ul
По умолчанию все элементы всегда прибиты к левому верхнему углу. А нам хочется их поставить по центру. Для этого делаем body гибким контейнером и прописываем выравнивающие свойства.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #E1BEE7;
}
5) Визуальное оформление тега ul
Сделаем белую подложку под навигационное меню с закругленными углами и легкой тенью. Для потомков, тег ul также будет флексовым контейнером, где элементы списка стоят в колонке.
ul {
padding: 20px;
width: 270px;
background: #fff;
display: flex;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
6) Удаление маркеров
У списков по умолчанию есть черные маркеры и есть свойство, которое их убирает.
ul li{
list-style: none;
} 
7) Стилизация иконок
Здесь мы задаем необходимые отступы, цвет, размер, убираем подчеркивание ссылок и самое главное прячем до поры до времени дублирующие иконки.
ul li a{
color: #6A1B9A;
text-decoration: none;
display: flex;
}
ul li a .icon{
width: 60px;
height: 40px;
text-align: center; overflow: hidden; /* прячем дубли иконок */
margin: 10px;
}
ul li a .icon .fa{
width: 100%;
height: 100%;
line-height: 40px;
font-size: 32px;
transition: 0.5s ease-in-out;
color: inherit;
}
8) Другой цвет для дубликатов
Если временно закомментировать свойство overflow: hidden, то мы можем увидеть дублирующие иконки и задать для них другой цвет.
ul li a .icon .fa:last-child{
color: #E91E63;
}
9) Hover эффект (магия)
На этом шаге произойдет ключевой момент hover-эффекта. При наведении на иконку, основная видимая иконка поднимется наверх, а на ее старое место встанет дубликат. Только на самом деле, он там всегда и был. Просто мы перестали его прятать, не прописали свойство overflow:hidden.
ul li a:hover .icon .fa{
transform: translateY(-100%);
}
10) Стилизация ссылок меню
ul li a .name{
position: relative;
top: 20px;
height: 20px;
width: 100%;
display: block;
overflow: hidden;
}
Посмотрите пример на CodePen
-
Создано 09.07.2021 10:07:10
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.