» »

Горизонтальное меню 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.02.2017 Просмотров: 919 Комментарий: (22)

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

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

Комментарий: 22
Kosten
Kosten 15.02.2017 20:511
+2
Мне так кажется, что такой стиль навигаций можно поставить и на другую тему, просто такое горизонтальное меню, редко можно встретить по своему стилю и функциям.
JoniDen
JoniDen 15.02.2017 20:522
0
Да ради Бога если будет смотреться, а функционал маленький как видишь.
Kosten
Kosten 15.02.2017 20:563
0
Просто мне такой дизайн почему то "симпатичен" в том, что идет линия и на ней прописаны категорий. Работаю по продаже ссылок, вот основном на официальных ресурсах, такой тип дизайн можно увидеть.
JoniDen
JoniDen 15.02.2017 20:584
0
Да я с тобой соглашусь, фирма, продажа, и т.д. использует линию, что и в данном меню есть.
Kosten
Kosten 15.02.2017 21:005
0
Вот только не пойму, там ссылки идут, и они идут на открывание окна, как скачать, они за какую функцию отвечают.
JoniDen
JoniDen 15.02.2017 21:046
0
Не совсем понял вопроса.
Сопрано
Сопрано 15.02.2017 21:047
0
Так вот под такую тема, основном предоставляют DEMO, просто на горизонтальное меню не сложно сделать.

Так не чего, понравилось, можно и изменить, но только под фиксированную ширину.
JoniDen
JoniDen 15.02.2017 21:078
0
Demo я скинул Админу в ЛС, если решит добавит, а нет так уж извиняйте.
FeStemBer
FeStemBer 15.02.2017 21:089
0
Мне вот тоже интересно, просто не первый раз ссылки попадаются, они отвечают за функций или просто стоят.
JoniDen
JoniDen 15.02.2017 21:1111
0
Если ссылка имеет отдельную страницу, то полоска будет передвигаться, на счет Форума, файлов, и т.д. не знаю не проверял. Если у кого есть отдельная страница, можете проверить и уже дать точный ответ.
Сопрано
Сопрано 15.02.2017 21:1010
0
Не думаю, что ссылки просто стоят, отвечают за что то, только видать не кто не знает.)
tsakonter
tsakonter 15.02.2017 21:1512
0
Просто для меня прекрасное меню, мне такой стиль нравится, это полоса и по ней ходят запросы, но только фон мне не очень, но думаю можно изменить.
JoniDen
JoniDen 15.02.2017 21:1713
0
А фон прозрачный. То есть если у тебя на сайте черный, и у меню он будет черный, цветной, так же и у меню будет. А на скриншоте я тестировал у себя на сайте.
Kosten
Kosten 15.02.2017 21:2014
0
Здесь и логотип можно прикрутить с правой стороны или он просто пишется.
1 2 »
avatar