Анимация для меню с индикатором. Часть #1
На это уроке мы создадим интересную анимацию. При наведении на иконку, на ней появляется кнопка-индикатор. А на каждом пункте меню, индикатор загорается разным цветом.
HTML код + ionicons
Создадим общий контейнер для меню навигации navigation, состоящее из пяти пунктов. В одном пункте находится ссылка, иконка и название. Воспользуемся бесплатной библиотекой иконок Ionicons, найдем подходящие иконки и вставим код с иконками между тегами div. А перед закрывающим тегом body вставляем две ссылки из данной библиотеки.
<div class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person-outline"></ion-icon>
</span>
<span class="text">Profile</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
<span class="text">Message</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="help-circle-outline"></ion-icon>
</span>
<span class="text">Help</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="settings-outline"></ion-icon>
</span>
<span class="text">Settings</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
Позиционирование меню
Поместим пункты меню в гибкий контейнер, чтобы меню оказалось в центре страницы.
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*поля и рамки не влияют на размер*/
font-family: 'Ubuntu', sans-serif;/*название шрифта*/
}
body{
display: flex;/*сетка flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
min-height: 100vh;/*на всю высоту экрана*/
}
.navigation{
position: relative;/*относительное позиционирование*/
width: 350px;/*ширина контейнера*/
height: 70px;/*высота контейнера*/
}
.navigation ul{
position: absolute;/*абсолютное позиционирование*/
top: 0;/*позиция сверху*/
left: 0;/*позиция слева*/
width: 100%;
display: flex;
}
.navigation ul li{
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;/*на верхний слой*/
}
.navigation ul li a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;/*направление главной оси*/
width: 100%;
text-align: center;/*текст в центре*/
color: #333;/*цвет текста*/
font-weight: 500;/*жирность шрифта*/
}
.navigation ul li a .icon{
position: relative;
display: block;
line-height: 75px;
text-align: center;
transition: 0.5s;
}
Продолжение следует..
-
Создано 17.01.2022 10:19:59
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.