ZorNet.Ru — сайт для вебмастера » HTML и CSS » Потрясающие меню для сайта с помощью CSS

Потрясающие меню для сайта с помощью CSS

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

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

HTML

Код

<div class="tsazatun_iklphda">
  <div class="dyredsa_nukojdan">
  <div class="zornetl1">ZorNet.Ru</div>
  <div class="zornetl2">Скрипты</div>
  <div class="zornetl3">Шаблоны</div>
  <div class="zornetl4">Дизайн</div>
  <div class="zornetl5">Стили</div>
  <div class="gukolpam"></div>
  </div>
</div>

CSS

Код

.tsazatun_iklphda{
  height:1px;
  width:79%;
  background:black;
  positinon:absolute;
  margin:85px 97px;
}
.gukolpam{
  transition:.5s all ease;
  height:19.7px;
  width:19.7px;
  border-radius:50%;
  position:absolute;
  background:#e90000;
  margin-top:-10px;
  margin-left:-60px;
  z-index:5;
}
.dyredsa_nukojdan{
  height:70px;
  width:80%;
  margin-left:12%;
}
[class*="zornet"]{
  transition:.5s ease ;
  float:left;
  height:100%;
  width:19%;
  cursor:pointer;
  position:relative;
  font-family:arial;
  font-size:20px;
  text-align:center;
  line-height:65px;
  border-top:1px solid;
}
[class*="zornet"]:hover{
  background:#f3f3f3;
  color:#222;
}
.zornetl1:hover ~ .gukolpam{
  margin-left:5%;
}
.zornetl2:hover ~ .gukolpam{
  margin-left:17%;
}
.zornetl3:hover ~ .gukolpam{
  margin-left:29%;
}
.zornetl4:hover ~ .gukolpam{
  margin-left:41%;
}
.zornetl5:hover ~ .gukolpam{
  margin-left:53%;
}

Бегунок создан с помощью CSS, где палитру цвета и ширину можно сменить самостоятельно.

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

23 Мая 2018 Просмотров: 1256 Комментариев: (0)

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

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

Kosten

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