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

Горизонтальное меню из кнопок при помощи CSS

Это горизонтальное меню со стильными кнопками по своему строению, отлично подойдет под блог или для ресурсов с фиксированной шириной. Здесь сильно отличается наведение клика, так как если у стандартных идет простая замена цвета или подчеркивание, то в нашей навигаций создано так, что появляется два оттенка палитры цвета, которые появляются одновременно. Что все очень оригинально смотрится, так как знаки с иконками аналогично меняют темную гамму на светло-синею.

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

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

Так на темном цвете можно выставить.

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

HTML

Код

<body>
<header>
  <div class="kacopyrigsumed-menu">
  <ul class="kacopyrigsumed-ul">
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Магазин</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-server" aria-hidden="true"></i>Услуги</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-folder-open" aria-hidden="true"></i>Портфолио</a></li>
  <li class="kacopyrigsumed-li"><a href="http://zornet.ru"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li>
  </ul>
  </div>
</header>
</body>

CSS

Код

body {font-size:63%;margin:1em;background:rgba(35, 36, 37, 0);}
ul { list-style:none; margin:0; padding:0 }
#zokdsatumiksan { font-size:1em; position:relative }
#zokdsatumiksan .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #fbf1f1,#616161);
  background:-moz-linear-gradient(top, #f5eded,#656161);
  background:linear-gradient(to bottom, #f9f3f3,#696666);
  box-shadow:rgba(19, 18, 18, 0.9) .5em .5em 4em;
}
#zokdsatumiksan .frame-face:before {
  content:'';
  width:30em;
  height:30em;
  border-radius:15em;
  position:absolute;
  top:.3em; left:.3em;
  background:
  -webkit-linear-gradient(135deg, rgba(246, 248, 249, 0.03) 0%,rgb(225, 230, 232) 50%,rgba(205,212,217,1) 51%,rgba(229, 233, 236, 0) 100%),
  -webkit-radial-gradient(center, ellipse cover, rgb(243, 246, 247) 0%,rgb(222, 225, 226) 65%,rgb(196, 199, 202) 66%,rgb(233, 236, 239) 100%);
  background:
  -moz-linear-gradient(135deg, rgba(246, 248, 249, 0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
  -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  background:
  linear-gradient(135deg, rgba(246,248,249,0) 0%,rgb(204, 211, 214) 50%,rgba(205,212,217,1) 51%,rgba(221, 224, 228, 0) 100%),
  radial-gradient(ellipse at center, rgb(234, 238, 241) 0%,rgb(216, 221, 224) 65%,rgb(200, 207, 212) 66%,rgb(236, 240, 245) 100%);
}
#zokdsatumiksan .frame-face:after {
  content:'';
  width:30em;
  height:30em;
  border-radius:15em;
  position:absolute;
  top:.9em; left:.9em;
  box-shadow:inset rgba(23, 22, 22, 0.23) .2em .2em 1em;
  border:.1em solid rgba(19, 18, 18, 0.25);
  background:-webkit-linear-gradient(top, #f5ebeb, #c3b9b9);
  background:-moz-linear-gradient(top, #f7efef, #cac0c0);
  background:linear-gradient(to bottom, #efe8e8, #ccc);
}
#zokdsatumiksan .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#85878a;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
}
#zokdsatumiksan .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#zokdsatumiksan .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#zokdsatumiksan .digits {
  width:30em;
  height:30em;
  border-radius:15em;
  position:absolute;
  top:0; left:50%;
  margin-left:-15em;
}
#zokdsatumiksan .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.9em 0 0 -.9em;
  font-weight:bold;
}
#zokdsatumiksan .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#zokdsatumiksan .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#zokdsatumiksan .digits li:nth-child(3) { transform:translate(8em, 0) }
#zokdsatumiksan .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#zokdsatumiksan .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#zokdsatumiksan .digits li:nth-child(6) { transform:translate(0, 8em) }
#zokdsatumiksan .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#zokdsatumiksan .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#zokdsatumiksan .digits li:nth-child(9) { transform:translate(-8em, 0) }
#zokdsatumiksan .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#zokdsatumiksan .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#zokdsatumiksan .digits li:nth-child(12) { transform:translate(0, -8em) }
#zokdsatumiksan .digits:before {
  content:'';
  width:1.6em;
  height:1.6em;
  border-radius:.8em;
  position:absolute;
  top:50%; left:50%;
  margin:-.8em 0 0 -.8em;
  background:#262729;
}
#zokdsatumiksan .digits:after {
  content:'';
  width:4em;
  height:4em;
  border-radius:2.2em;
  position:absolute;
  top:50%; left:50%;
  margin:-2.1em 0 0 -2.1em;
  border:.1em solid #ccc5c5;
  background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
}
@keyframes hours { to {transform:rotate(335deg)} }
#zokdsatumiksan .hours-hand {
  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#3b3d40;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#313233 0 0 2px;
  transform-origin:0.4em 6.2em;
  transform:rotate(-25deg);
  animation:hours 43200s linear 0s infinite;
}
#zokdsatumiksan .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#4b4b4c 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#zokdsatumiksan .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #151617;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}
@keyframes minutes { to {transform:rotate(422deg)} }
#zokdsatumiksan .minutes-hand {
  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#4f5152;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  transform:rotate(62deg);
  animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#zokdsatumiksan .seconds-hand {
  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c70f0f;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  transform:rotate(120deg);
  animation:seconds 60s steps(60, end) 0s infinite;
}
#zokdsatumiksan .seconds-hand:after {
  content:'';
  width:1.7em;
  height:1.7em;
  border-radius:.7em;
  background:inherit;
  position:absolute;
  left:-.65em; bottom:1.35em;
}
#zokdsatumiksan .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}
#zokdsatumiksan .digital-wrap {
  width:9em;
  height:3em;
  border:.1em solid #353333;
  border-radius:.2em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  background:#444242;
  background:-webkit-linear-gradient(top, #565353 0%,#101010 100%);
  background:-moz-linear-gradient(top, #4e4b4b 0%, #131111 100%);
  background:-ms-linear-gradient(top, #4c4949 0%,#0c0b0b 100%);
  background:-o-linear-gradient(top, #333232 0%,#100f0f 100%);
  background:linear-gradient(to bottom, #403e3e 0%,#151313 100%);
}
#zokdsatumiksan .digital-wrap ul {
  float:left;
  width:2.85em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
}
#zokdsatumiksan .digital-wrap ul:last-child { border:none }
#zokdsatumiksan .digital-wrap li {
  font-size:1.5em;
  line-height:2;
  letter-spacing:2px;
  text-align:center;
  position:relative;
  left:1px;
}
#zokdsatumiksan .digit-minutes li {
  animation:dsm 3600s steps(60, end) 0s infinite;
}
#zokdsatumiksan .digit-seconds li {
  animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm {
  to { transform:translateY(-120em) }
}

.kacopyrigsumed-menu{
  background-color: white;
  margin-top: 100px;
  width: 100%;
}
ul.kacopyrigsumed-ul{
  display: flex;
  padding: 0;
  justify-content: center;
}
li.kacopyrigsumed-li{
  list-style: none;
  padding: 9px;
}
li.kacopyrigsumed-li a{
  text-decoration: none;
  font-size: 18px;
  color: #3a3737;
  position: relative;
  padding: 5px;
  text-shadow: 0 1px 0 #fbf6f6;
}
li.kacopyrigsumed-li a i{
  margin-right: 10px;
}
li.kacopyrigsumed-li a::before{
  content: '';
  width: 0;
  height: 3px;
  background-color: #33bdf1;
  position: absolute;
  top: 90%;
  left: 0;
  transition: .5s;
  mix-blend-mode: multiply;
}
li.kacopyrigsumed-li a::after{
  content: '';
  width: 0;
  height: 3px;
  background-color: #ffc81e;
  position: absolute;
  top: 90%;
  right: 0;
  transition: .5s;
  mix-blend-mode: multiply;
}
li.kacopyrigsumed-li:hover{
  background-color: #d9f8fd;
}
li.kacopyrigsumed-li:hover a::before{
  width: 50%;
  transform: translateX(100%);
}
li.kacopyrigsumed-li:hover a::after{
  width: 50%;
  transform: translateX(-100%);
}
li.kacopyrigsumed-li a:hover{
  color: #2129d6;
  text-shadow: 0 1px 0 #fff7f7;
}

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

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

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

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

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

Kosten

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