• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Оформить горизонтальное меню для сайта в CSS3 (Вертикальное меню для современного сайта на CSS)
Оформить горизонтальное меню для сайта в CSS3
Kosten
Дата: Понедельник, 2018-10-22, 22:06 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


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

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

При проверки так выглядит:



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

HTML

Код
<ul>
  <li><a href="http://zornet.ru">Главная</a></li>
  <li><a href="http://zornet.ru/forum">Скрипты</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Zornet.Ru</a></li>
  <li><a href="#">Контакты</a></li>
</ul>


CSS

Код
ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;
}
ul li {
  list-style: none;
}
ul li a {
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 5px 10px;
  color: #aaa;
  font-size: 24px;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  overflow: hidden;
}
ul li a::before {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  left: -100%;
  width: 100%;
  height: 4px;
  background: #2196f3;
  transition: 0.5s;
}
ul li a:hover {
  color: #fff;
}
ul li a:hover::before {
  animation: animate .5s linear forwards;
}

@keyframes animate {
  0% {
    top: calc(50% - 2px);
    left: -100%;
    height: 4px;
    z-index: 1;
  }
  50% {
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    z-index: 1;
  }
  100% {
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
  }
}

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

Демонстрация
Прикрепления: 0507443.png(11.5 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Оформить горизонтальное меню для сайта в CSS3 (Вертикальное меню для современного сайта на CSS)
  • Страница 1 из 1
  • 1
Поиск: