» »

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


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

Это красиво сделано темного горизонтальное меню под сайта uCoz. На нем с левой стороны будет логотип а также формы созданы специально под разделы вашего ресурса. Можно сказать даже кнопки, так как под них идут стили и вы можете вывести оттенок и главное сделать шикарный обвод на них. Безусловно логотип будет под ссылку и при наведение его небольшой эффект произойдет.

Горизонтальное меню сайта uCoz

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

Установка:

Сам код, но основном, это вверх сайта и в самый его потолок:

Код
<div class="ie-nav">  
<div class="ie-full">  
<a href="http://zornet.ru/" class="ie-logo"></a>  
<ul class="ie-nav">  
<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="#">PSD исходники</a></li>  
<li><a href="#">CSS Элементы</a></li>  
</ul>  
</div>  
</div>

CSS:

Код
.ie-full {  
  width:1140px;  
  margin:0 auto;  
}  

.ie-nav {  
  background:url(/ie_gormenu/ie-nav.png) repeat-x 0 0;  
  height:89px;  
  overflow:hidden;  
}  

a.ie-logo {  
  background:url(/ie_gormenu/ie-logo.png) no-repeat 0 0;  
  width:207px;  
  height:51px;  
  display:block;  
  float:left;  
  margin:17px 0 0 -30px;  
  transition:all 0.3s ease;  
}  

a.ie-logo:hover {  
  opacity:0.5;  
}  

ul.ie-nav {  
  float:right;  
  height:37px;  
  margin:25px -30px 0 0;  
   
}  

ul.ie-nav li {  
  float:left;  
  height:33px;  
  margin:0 0 0 15px;  
  display:block;  
}  

ul.ie-nav li a {  
  text-decoration:none;  
  display:block;  
  height:33px;  
  line-height:34px;  
  padding:0 13px;  
  font-size:16px;  
  color: #fff;  
  border: 2px solid #333;  
  border-radius:10px;  
  transition:all 0.3s ease;  
  font-family:'Cuprum';  
}  

ul.ie-nav li a:hover,  
ul.ie-nav li.active a {
  background: #4761C7;
  border: 2px solid #1C3B71;
  border-bottom: 2px solid #0C2552;
  color:#fff;
}

Скачиваем архив и папку ie_gormenu закидываем файловый менеджер. 
Подойдет как можно увидеть под любую тему, здесь только нет под меню, но так отлично смотрится.
Источник: http://internetempire.ru/
10.02.2016 Загрузок: 17 Просмотров: 980 Комментарий: (7)

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

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

Комментарий: 7
tsakonter
tsakonter 10.02.2016 00:161
0
Больше всего адаптированное меню, так как у uCoz все всегда стандартно, меньше стилей, здесь все четко сделано и нормально место под логотип оставили.
Kvint
Kvint 10.02.2016 00:203
0
Это точно, меньше стилей, главное работает.
Canon
Canon 10.02.2016 00:182
0
Нормально сделано.
Сафрон
Сафрон 10.02.2016 00:275
0
Когда стили присутствуют, то всегда красиво сделано.
Сопрано
Сопрано 10.02.2016 00:244
0
Кому нужно с другим оттенком, то темно желтый, то на источнике такой можете скачать.
Kosten
Kosten 10.02.2016 00:296
0
Чтоб не искали, вот это горизонтальное меню, только вместо синего, темно желтая гамма цвета. Также как написано, можете сами выставить, но придется фотошоп применить, если панель саму под другой цвет делать.
Maryges
Maryges 10.02.2016 00:327
0
Вот и поменяю свое старое меню, хотя почти похоже, но это явно намного лучше смотреться будет. Это можно сказать простое меню, на которое всего 2 ссылки идут, это логотип, что обязательно, но сейчас можно сделать и без него, но что удивительно сам фон, что давно на CSS перекинули.
avatar