В этом материале, мы будем устанавливать на сайт в системе 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;
}
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>
Готово!
){kind=link}