Анимация для меню с индикатором. Часть #1

Анимация для меню с индикатором.  Часть #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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Анимация для меню с индикатором.  Часть #1

Позиционирование меню

Поместим пункты меню в гибкий контейнер, чтобы меню оказалось в центре страницы.

@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;
}

Анимация для меню с индикатором.  Часть #1

Продолжение следует..

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Проверьте также
Close
Back to top button