<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

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

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

Продолжим создание индикатора для меню навигации. Здесь находится первая часть урока.

Стилизация и hover-эффект меню

При наведении мыши, иконка исчезает.

.navigation ul li.active a .icon{
    color: #fff;
}
.navigation ul li a .icon {
    font-size: 30px;
}
.navigation ul li.active a .icon {
    font-size: 20px;
    transform: translateY(-6px);/*смещение по оси Y*/
}
.navigation ul li a .text {
    position: absolute;
    font-size: 12px;
    color: #fff;
    bottom: 20px;/*отступ снизу*/
    font-weight: 400;
    transition: 0.25s;
    transform: scale(0);/*масштаб не меняется*/
    text-transform: uppercase;/*большие буквы*/
}
.navigation ul li.active a .text {
    transform: scale(1);/*масштабирование*/
}


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

Создание индикатора

.navigation ul .indicator{
    position: absolute;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 10px;/*скругление углов*/
    transition: 0.5s;
    background: #333;
}


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

Hover-эффект для индикатора

Для каждого пункта меню создадим активный класс со своим цветом. При наведении на пункт меню, индикатор переместится по оси X и подсветит иконку заданным в CSS-свойствах цветом.

.navigation ul li:nth-child(1).active ~ .indicator{
    transform: translateX(calc(70px * 0));/*перемещение индикатора*/
    background: #f53b57;/*цвет индикатора*/
    box-shadow: 0 15px 25px #f53b5755;/*тень у индикатора*/
}
.navigation ul li:nth-child(2).active ~ .indicator{
    transform: translateX(calc(70px * 1));
    background: #5d62fb;
    box-shadow: 0 15px 25px #5d62fb55;
}
.navigation ul li:nth-child(3).active ~ .indicator{
    transform: translateX(calc(70px * 2));
    background: #05c46b;
    box-shadow: 0 15px 25px #05c46b55;
}
.navigation ul li:nth-child(4).active ~ .indicator{
    transform: translateX(calc(70px * 3));
    background: #0fbcf9;
    box-shadow: 0 15px 25px #0fbcf955;
}
.navigation ul li:nth-child(5).active ~ .indicator{
    transform: translateX(calc(70px * 4));
    background: #ffa801;
    box-shadow: 0 15px 25px #ffa80155;
}


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

Создание JavaScript функции

Функция в цикле проходится по списку и добавляет активный класс на все пункты меню по очереди. У первого элемента индикатор загорится красным цветом. У второго - черным, у третьего - зеленым и.т.д.

<script>
  let list = document.querySelectorAll('.list');
  for (let i=0; i<list.length; i++){
    list[i].onmouseover = function(){
      let j = 0;
      while (j < list.length){
        list[j++].className = 'list';
      }
      list[i].className = 'list active';
    }
  }
</script>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

bartviva bartviva 10.02.2022 22:32:31

Добрый день. Возможно Вы мне сможете помочь. Я сделал очень похожее меню, но вот столкнулся с проблемой. При нажатии на страницу, привязанную к ссылке, у меня сразу становится активный класс как нужно, а после перехода на страницу активный класс снова возвращается первому элементу, а должен остаться на выбранном. Перепробовал уже кучу способов, к сожалению большенство из них вообще нерабочие. Скорее всего проблема в скрипте. Можете помочь?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.