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

Горизонтальное меню с желтыми линиями uCoz

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

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

Фон у меню прозрачный.

Установка:

Подключаем перед /head стили шрифта:

Код

В блок, где хотите видеть меню:

Код

<nav class="main-nav">
<div class="gino_site-container">
  <div class="header-inner"></div>
<div id="main-menu"><ul class="menu">
<li><a href="http://zornet.ru/">ZORNET.RU -Сайт для uCoz</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">здесь категория</a></li>
<li><a href="#">здесь категория</a></li>
<li><a href="#">здесь категория</a></li>
<li><a href="#">здесь категория</a></li>
<li><a href="#">zornet.ru скрипты</a></li>
<li><a href="#">скрипты зорнет</a></li>
</ul></div>
</div>
</nav>

Стили CSS:

Код

.main-nav {
  background-color: transparent;
  position: relative;
  list-style-type: none;
  z-index: 99;
  min-height: 50px;
}
.main-nav .gino_site-container {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.gino_site-container {
  width: 1126px;
  margin: auto;
  position: relative;
}
.main-nav .header-inner {
  height: 50px;
  float: left;
}
#main-menu {
  font-size: 0;
}
.main-nav {
  background-color: transparent;
  position: relative;
  list-style-type:none;
  z-index: 99;
  min-height: 50px;
}
.main-nav li {
  display: block;
}
.main-nav #main-menu .menu > li {
  height: 50px;
  line-height: 50px !important;
  vertical-align: middle;
  display: inline-block;
}
.main-nav a {
  display: inline-block;
  text-decoration:none;
  text-transform: uppercase;
}
.main-nav li:hover, .main-nav a:hover {
  transition: opacity 0.2s ease-in-out 0.2s, visibility 0s ease-in-out 0.2s;
  -wekidit-transition: opacity 0.2s ease-in-out 0.2s, visibility 0s ease-in-out 0.2s;
}
.main-nav #main-menu .menu > li > a {
  position: relative;
  color: #111;
  padding: 0 25px;
  font-size: 17px;
  line-height: 50px;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  letter-spacing: 2px;
}
.main-nav #main-menu .menu > li:hover > a {
  border-right: 1px solid #ffcf01;
  border-left: 1px solid #ffcf01;
}
.main-nav #main-menu .menu > li {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-style: normal;
}

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

25 Мая 2017 Просмотров: 1503 Комментариев: (4)

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

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

JoniDen

Комментарии: 4
Порядок вывода комментариев: Kosten 25 Мая 2017 14:11¹ 0 Чисто на стилях создана навигация, как понимаю. его даже можно под темный оттенок сделать. JoniDen 25 Мая 2017 14:18² 0 Да ради Бога делайте. Kosten 25 Мая 2017 15:47⁴ 0 JoniDen, когда ты ставил, ты не смотрел адаптивность? csafrones 25 Мая 2017 15:42³ 0 Это меню адаптивной или простое?