« Широкое горизонтальное меню с логотипом для uCoz »

Описание материала:

В этом материале, мы будем устанавливать на сайт в системе uCoz, широкое, темное, горизонтальное меню с логотипом. Меню сделано из темно-серого фона, в левой стороне расположен логотип с оттенками оранжевого и белого цвета, так же в логотипе есть иконка ноутбука оранжевого цвета. Категории меню в стандартном положение идет под цвет фона, но обведена обводкой серого цвета, а если навести на категорию курсор мыши, то оно меняется на оранжевый цвет. Данное меню отлично подойдет под светлый дизайн сайта, но в этом меню есть один минус, оно не адаптировано под мобильное устройство. В архиве материла Вы можете найти PSD логотипа, которое легко переделаете в программе PhotoShop.

Установка:
1. Скачиваем архив с нашего сайта и загружаем папку ie_gormenu в корень своего сайта
2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:

Код
/* Широкое горизонтальное меню с логотипом для uCoz */
.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:#f28c35;
  border:2px solid #f28c35;
  border-bottom:2px solid #f28c35;
  color:#fff;
}
/* InternetEmpire.Ru */

3. Заходим в ПУ - Управление дизайном - Верхняя часть сайта и в самый верх ставим данный код:
Код
<div class="ie-nav">
<div class="ie-full">
<a href="/" 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>


Готово!


Скачать ( Размер архива 78.4 Kb )

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

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 1006 | Загрузок: 64


Поделиться в соц. сетях:
Комментариев к материалу: 2
Александр 29.02.2016 в 21:02Спам
Красиво смотрится
2
Виктор Ягодин 01.03.2016 в 12:02
Абсолютно согласен)
0
avatar