Веб-Денис
Помогаем создавать лучшее
  • Ответы WP
  • HTML-CSS
  • Фон сайта
  • Блог DM
Главная › HTML-CSS › Горизонтальное меню

Горизонтальное меню Shift для сайта

Пример создание горизонтальное меню на CSS
2022-05-16
Автор: неизвестно
Demo

Всем приветы и ответы!

И в сегодняшнем посте мы расскажем о том, как реализовать на своём сайте, простой, но интересный эффект при наведении стрелкой мыши на один из пунктов горизонтального меню!

И будем всё делать без использования JS!

HTML код

Для начала необходимо установить на HTML страницы сайта вот такой небольшой код горизонтального меню:

HTML

<nav class="menu-top">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>

Как вы ведите, мы использует тег <nav> в который как правило помещаем приоритетные ссылки!

CSS стили

А теперь собственно говоря само оформление выше предоставленного HTML кода!

Надо прописать в файле под названием style.css вот такой код в самый низ:

CSS

/* Горизонтальное меню
-------------------------------------------*/
.menu-top {
float:left;
width: 100%;
margin: 0 auto;
background: #fff;
padding: 10px 0;
box-shadow: 0px 2px 0px #dedede;
}
.menu-top ul {
list-style: none;
text-align: center;
}
.menu-top ul li {
display: inline-block;
}
.menu-top ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #777;
font-weight: 700;
margin: 0 10px;
position:relative;
z-index: 1;
}
.menu-top ul li a,
.menu-top ul li a:after,
.menu-top ul li a:before {
transition: all .5s;
}
.menu-top ul li a:hover {
color: #91640F;
}
.menu-top ul li a:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: '.';
color: transparent;
background: #F1C40F;
visibility: none;
opacity: 0;
z-index: -1;
}
.menu-top ul li a:hover:after {
opacity: 1;
visibility: visible;
height: 100%;
}

На этом у меня всё! Удачных решений!

С уважением, Денис Мехедов
2 Комментария
  1. Наташа
    18.05.2022 в 11:51
    #1

    Какое интересное меню, эффект очень мне понравился, забрала к себе в блог, буду ставить свои немыслимые эксперименты.

    Ответить
    • Денис М
      19.05.2022 в 18:55
      #2

      Я рад, что вам понравилось, позовите потом на эксперименты, нам будет интересно!

      Ответить
Отменить ответ
Автор Денис Мехедов
Привет!

Я Денис Мехедов.

Я верстаю HTML-CSS:

Решений - 14
  • Горизонтальное меню 1
  • Картинки 1
  • Кнопки 2
  • Облако тегов 3
  • Подсказки 1
  • Поля 1
  • Списки 1
  • Статистика 1
  • Табы 1
  • Цитаты 2

  • О проекте
  • Автор
  • Контакты
  • Комментарии
  • © Web-Denis 2022
  • Дизайн © ДМ
  • Хостинг Timeweb
При копировании материалов, ссылка на сайт обязательна.
Политика конфиденциальности
Мы cохраняем файлы cookie.