ZorNet.Ru — сайт для вебмастера » Меню для сайта » Горизонтальное меню RPG игры для uCoz

Горизонтальное меню RPG игры для uCoz

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

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

Также вам предоставлена демонстрация горизонтальной навигаций.

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

Верхняя часть сайта и в самом низу ставим код, где вы потом можете прописать самые актуальные темы виде разделов или категорий на сайте.

Код

<div class="wrapper main-page">
<div class="header">
  <div class="order-now__wrapper">
  <a href="#" class="order-now" target="_blank">STEAM</a>
  </div>
  <div class="main-menu__inside mobile-menu-show">
  <div class="main-menu__items">
  <a href="http://zornet.ru/load/81" class="main-menu__item active">Главная</a>
  <a href="http://zornet.ru/load/142" class="main-menu__item">Игра</a>
  <a href="http://zornet.ru/load/145" class="main-menu__item">История</a>
  <a href="#" class="main-menu__item" target="_blank">Демо</a>
  <a href="#" class="main-menu__item">Медиа</a>
  <a href="#" class="main-menu__item" target="_blank">Форум</a>
  </div>
  </div>
  <div class="main-menu">
  </div>
  </div>
  </div>

Css:

Код

body {
  line-height: 1;
  font-family: 'Exo 2', sans-serif;
}
a, body, html {
  color: #fff;
}
body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  min-width: 320px;
  font-weight: 300;
}
a {
  text-decoration: none;
}
.wrapper {
  max-width: 940px;
  padding: 0 10px;
  margin: 0 auto 30px;
  z-index: 10;
}
.header {
  padding-top: 50px;
  position: relative;
  z-index: 1;
}
.main-menu, .main-menu__item {
  list-style: none;
  vertical-align: top;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.main-menu {
  width: 700px;
  border-bottom: 1px solid #be1e2d;
}
.main-menu__item {
  color: #be1e2d;
  font-weight: 500;
  font-size: 20px;
  padding: 13px 0 17px;
  margin-left: 37px;
  position: relative;
  -webkit-transition: color .2s linear;
  -moz-transition: color .2s linear;
  -o-transition: color .2s linear;
  -ms-transition: color .2s linear;
  transition: color .2s linear;
}
.main-menu__item:visited {
  color: #be1e2d;
}
.main-menu__item:first-child {
  margin-left: 0;
}
.main-menu__item.active, .main-menu__item:active, .main-menu__item:hover {
  color: #fff;
  -webkit-transition: color .2s linear;
  -moz-transition: color .2s linear;
  -o-transition: color .2s linear;
  -ms-transition: color .2s linear;
  transition: color .2s linear;
}
.main-menu__item:after {
  bottom: -1px;
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  background: #fff;
  -webkit-transition: width .3s ease 0s, left .3s ease 0s;
  -moz-transition: width .3s ease 0s, left .3s ease 0s;
  -o-transition: width .3s ease 0s, left .3s ease 0s;
  -ms-transition: width .3s ease 0s, left .3s ease 0s;
  transition: width .3s ease 0s, left .3s ease 0s;
  width: 0;
}
.main-menu__item.active:after, .main-menu__item:hover:after {
  width: 100%;
  left: 0;
}
.order-now, .order-now:active, .order-now:hover {
  -webkit-transition: background .2s linear;
  -moz-transition: background .2s linear;
  -o-transition: background .2s linear;
  -ms-transition: background .2s linear;
  transition: background .2s linear;
}
.order-now {
  list-style: none;
  vertical-align: top;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  height: 50px;
  width: 220px;
  position: absolute;
  right: 0;
  text-align: center;
  padding-top: 13px;
  /* background: #be1e2d; */
  background: #be1e2d;
  box-sizing: border-box;
  font-size: 20px;
  z-index: 1;
}
.order-now:active, .order-now:hover {
  background: #f33;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v3/TZlHHgxEfHXA7uKM1eaCjfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v3/pEbpp8gu02JrI5SDG9jj6g.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v3/-A4eIjQkAwKL411pgtQ4VA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

(rip Бармен) - он же JoniDen.

15 Февраля 2017 Просмотров: 1631 Комментариев: (22)

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

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

JoniDen

Похожие материалы

Оставь свой отзыв

Комментарии: 22
Порядок вывода комментариев: Kosten 15 Февраля 2017 20:51¹ +2 Мне так кажется, что такой стиль навигаций можно поставить и на другую тему, просто такое горизонтальное меню, редко можно встретить по своему стилю и функциям. JoniDen 15 Февраля 2017 20:52² 0 Да ради Бога если будет смотреться, а функционал маленький как видишь. Kosten 15 Февраля 2017 20:56³ 0 Просто мне такой дизайн почему то "симпатичен" в том, что идет линия и на ней прописаны категорий. Работаю по продаже ссылок, вот основном на официальных ресурсах, такой тип дизайн можно увидеть. JoniDen 15 Февраля 2017 20:58⁴ 0 Да я с тобой соглашусь, фирма, продажа, и т.д. использует линию, что и в данном меню есть. Kosten 15 Февраля 2017 21:00⁵ 0 Вот только не пойму, там ссылки идут, и они идут на открывание окна, как скачать, они за какую функцию отвечают. JoniDen 15 Февраля 2017 21:04⁶ 0 Не совсем понял вопроса. Сопрано 15 Февраля 2017 21:04⁷ 0 Так вот под такую тема, основном предоставляют DEMO, просто на горизонтальное меню не сложно сделать. Так не чего, понравилось, можно и изменить, но только под фиксированную ширину. JoniDen 15 Февраля 2017 21:07⁸ 0 Demo я скинул Админу в ЛС, если решит добавит, а нет так уж извиняйте. FeStemBer 15 Февраля 2017 21:08⁹ 0 Мне вот тоже интересно, просто не первый раз ссылки попадаются, они отвечают за функций или просто стоят. JoniDen 15 Февраля 2017 21:11¹¹ 0 Если ссылка имеет отдельную страницу, то полоска будет передвигаться, на счет Форума, файлов, и т.д. не знаю не проверял. Если у кого есть отдельная страница, можете проверить и уже дать точный ответ. Сопрано 15 Февраля 2017 21:10¹⁰ 0 Не думаю, что ссылки просто стоят, отвечают за что то, только видать не кто не знает.) tsakonter 15 Февраля 2017 21:15¹² 0 Просто для меня прекрасное меню, мне такой стиль нравится, это полоса и по ней ходят запросы, но только фон мне не очень, но думаю можно изменить. JoniDen 15 Февраля 2017 21:17¹³ 0 А фон прозрачный. То есть если у тебя на сайте черный, и у меню он будет черный, цветной, так же и у меню будет. А на скриншоте я тестировал у себя на сайте. Kosten 15 Февраля 2017 21:20¹⁴ 0 Здесь и логотип можно прикрутить с правой стороны или он просто пишется.
1 2 »