ZorNet.Ru — сайт для вебмастера » Меню для сайта » Горизонтальное меню с эффектом вниз в CSS

Горизонтальное меню с эффектом вниз в CSS

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

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

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

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

Приступаем к установке:

HTML

Код

<ul class="mostore_quentaqu_estions">
  <li class="businesacros"><a href="http://zornet.ru" data-hover="Главная">Главная</a></li>
  <li><a href="#" data-hover="Скрипты">Скрипты</a></li>
  <li><a href="#" data-hover="Файлы">Файлы</a></li>
  <li><a href="#" data-hover="Стили">Стили</a></li>
  <li><a href="#" data-hover="Дизайн">Дизайн</a></li>
  <li><a href="#" data-hover="Контакты">Контакты</a></li>
</ul>

CSS

Код

.mostore_quentaqu_estions * {
  box-sizing: border-box;
  -webkit-transition: all 0.40s ease;
  transition: all 0.40s ease;
}
.mostore_quentaqu_estions li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1.2em;
  overflow: hidden;
}
.mostore_quentaqu_estions a {
  padding: 0.4em 0;
  color: rgba(249, 244, 244, 0.5);
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  text-decoration: none;
}
.mostore_quentaqu_estions a:before,
.mostore_quentaqu_estions a:after {
  position: absolute;
  -webkit-transition: all 0.40s ease;
  transition: all 0.40s ease;
}
.mostore_quentaqu_estions a:before {
  bottom: 100%;
  display: block;
  height: 2px;
  width: 100%;
  content: "";
  background-color: #22e6cc;
}
.mostore_quentaqu_estions a:after {
  padding: 0.4em 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: attr(data-hover);
  color: white;
  white-space: nowrap;
}
.mostore_quentaqu_estions li:hover a,
.mostore_quentaqu_estions .businesacros a {
  transform: translateY(100%);
}

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

Демонстрация

06 Сентября 2018 Просмотров: 1322 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0