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

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

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

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

Здесь проверялся материал на работоспособность:

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

HTML

Код

<nav class="dtukolsmopen_sxtun">
  <div class="zkirudsa">
  <ul>
  <li><a href="http://zornet.ru">Главное</a></li>
  <li><a href="">Скрипты</a></li>
  <li><a href="">Шаблоны</a></li>
  <li><a href="">ZorNet.ru</a></li>
  </ul>
  <form action="" id="kagtesmib">
  <input type="text" placeholder="Поиск" />
  </form>
  </div>
</nav>

CSS

Код

.dtukolsmopen_sxtun {
  position: relative;
  display: block;
  clear: both;
  margin: 9px 37px;
  width: 898px;
  height: 39.7px;
  box-shadow: inset 1px 0 1px #0d3e5f, inset -1px 0 1px #073756, -5px 0 1px #105988, -10px 0 1px #0a79ab, inset 0 2px 0 #17549e, inset 0 1px 0 #88e6e6, inset 0 -2px 0 #1287af, inset 0 -1px 0 #09355d, 5px 0 1px #0e5e90, 10px 0 1px #0d84b7;
  background: #043e64;
  background: -moz-linear-gradient(left, #043e64 0%, #0b86c9 54%, #0b86c9 57%, #0b86c9 60%, #0b86c9 62%, #0b86c9 64%, #0b86c9 67%, #0b86c9 70%, #0b86c9 75%, #063d64 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d6290), color-stop(54%,#1775a9), color-stop(57%,#167ab1), color-stop(60%,#0b86c9), color-stop(62%,#1f84bb), color-stop(64%,#0b86c9), color-stop(67%,#177fb7), color-stop(70%,#1e83b9), color-stop(75%,#1b73a2), color-stop(100%,#063d64));
  background: -webkit-linear-gradient(left, #043e64 0%,#2681b3 54%,#0b86c9 57%,#1a7aaf 60%,#1c80b7 62%,#1975a7 64%,#1c7eb3 67%,#1a76a9 70%,#1e80b5 75%,#063d64 100%);
  background: linear-gradient(to right, #164463 0%,#0b86c9 54%,#0b86c9 57%,#0b86c9 60%,#0b86c9 62%,#0b86c9 64%,#0b86c9 67%,#0b86c9 70%,#0b86c9 75%,#245679 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#043e64', endColorstr='#063d64',GradientType=1 );
  -webkit-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -ms-transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  transform: skewX(-40deg);
}
  .dtukolsmopen_sxtun .zkirudsa {
  -webkit-transform: skewX(40deg);
  -moz-transform: skewX(40deg);
  -ms-transform: skewX(40deg);
  -o-transform: skewX(40deg);
  transform: skewX(40deg);
  }
  .dtukolsmopen_sxtun ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin-left: 15px;
  }
  .dtukolsmopen_sxtun ul li {
  float: left;
  display: inline-block;
  -webkit-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -ms-transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  transform: skewX(-40deg);
  }
  .dtukolsmopen_sxtun ul li:hover {
  background: #f9f4f4;
  background: -moz-linear-gradient(top, #f9f4f4 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f4f4), color-stop(100%,#ebebeb));
  background: -webkit-linear-gradient(top, #f9f4f4 0%,#ebebeb 100%);
  background: -o-linear-gradient(top, #f9f4f4 0%,#ebebeb 100%);
  background: -ms-linear-gradient(top, #f9f4f4 0%,#ebebeb 100%);
  background: linear-gradient(to bottom, #f9f4f4 0%,#ebebeb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1eaea', endColorstr='#ebebeb',GradientType=0 );

  box-shadow: 0 0 1px #f3efef;
  }
  .dtukolsmopen_sxtun ul li a {
  display: block;
  color: #f1eaea;
  font: 18px 'Sylfaen';
  padding: 6px 23px 7.9px;
  -webkit-transform: skewX(40deg);
  -moz-transform: skewX(40deg);
  -ms-transform: skewX(40deg);
  -o-transform: skewX(40deg);
  transform: skewX(40deg);
  }
  .dtukolsmopen_sxtun ul li:hover a {color: #054672;}

#kagtesmib {
  position: absolute;
  top: 5.8px; right: 59.8px;
}
#kagtesmib input[type=text] {
  border: 1px solid #9ecce4;
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(16, 16, 16, 0.27);
  font: 14px 'Century Regular';
  color: #232121;
  padding: 3.9px 9px;
  width: 175px;
}
  #kagtesmib input[type=text]:hover, #kagtesmib input[type=text]:focus {
  border: 1px solid #191818;
  box-shadow: inset 0 0 5px rgba(0,0,0,.5);
  }

С таблицами стилей любой тег HTML может стать селектором CSS.

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

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

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

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

Kosten

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