» »

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


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

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

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

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

Установка:

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

Код
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />

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

Код
<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.05.2017 Просмотров: 375 Комментарий: (4)

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

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

Комментарий: 4
Kosten
Kosten 25.05.2017 14:111
0
Чисто на стилях создана навигация, как понимаю. его даже можно под темный оттенок сделать.
JoniDen
JoniDen 25.05.2017 14:182
0
Да ради Бога делайте.
Kosten
Kosten 25.05.2017 15:474
0
JoniDen, когда ты ставил, ты не смотрел адаптивность?
csafrones
csafrones 25.05.2017 15:423
0
Это меню адаптивной или простое?
avatar