Войти
Регистрация

Анимированное подчеркивание текста

Анимированное подчеркивание текста

Здравствуйте, друзья!

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

Раньше что только не использовали для его реализации, сейчас же можно это сделать с помощью обычных списков в HTML.

Пример HTML-кода для создания верхнего меню:

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">Прайс</a></li>
</ul>

Получаем простой список с ссылками меню:

Применим CSS-правило float:left, чтобы выстроить пункты меню в ряд, уберем маркеры и сделаем отступы внутри:

ul li {
   float: left;
   list-style: none;
   padding: 15px;
}

Наши пункты выстроились в ряд слева направо:

Теперь остается стилизовать всю область меню, т.е. тег <ul>.

Также желательно подключить шрифт Andantino в самом начале файла с CSS-стилями. Как это сделать я писал в статье "Подключение шрифтов в CSS".

ul {
   background: #3a7b11;
   border-bottom: 1px dashed #dcd409;
   border-radius: 100px;
   border-top: 1px dashed #dcd409;
   display: inline-block;
   font-family: Andantino;
   overflow: hidden;
   padding: 0 25px 0 35px;
}

Далее добавляем стиль для ссылок в меню:

ul li a {
   color: #dcd409;
   display: block;
   font-size: 35px;
   padding: 5px;
   position: relative;
   text-decoration: none;
   text-shadow: 0 3px 2px rgba(0,0,0,0.5);
}

Создаем псевдоэлемент для ссылок, который послужит нам полосой подчеркивания:

ul li a:after {
   background: #dcd409;
   border-radius: 10px;
   content: "";
   display: block;
   height: 3px;
   margin: 0 auto;
   position: relative;
   top: 90%;
   transition: 0.3s;
   width: 0;
}

Здесь мы псевдоэлемент стилизовали в виде полоски и сделали ширину в 0 пикселей, чтобы его не было видно и разместили посередине пункта. Также свойством transition мы установили длительность анимации для полоски в 3 миллисекунды.

Последним штрихом будет создание CSS-правила при наведении на пункт меню, чтобы появилась полоска:

ul li:hover > a:after {
   padding: 0 50%;
}

Здесь при наведении на пункт меню мы создаем отступы слева и справа размером в 50% от общей ширины пункта. Полоска будет появляться плавно.

Результат можно увидеть здесь: смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?