Голубое горизонтальное меню для uCoz
Отличное, а главное просто и не грузящее ваш сайт меню для системы uCoz. Меню фиксированной. Что примечательно, так это то, что при наведении на категорию меню, она будет менять цвет. Изменить параметры меню не составит проблем.
Установка голубого меню для сайта uCoz:
1) В самый вниз таблицы стилей CSS вставляем код:
Код
/*------ http://softkafe.ru/----*/
.menu a {
text-decoration: none;
color: #fff;
text-shadow: 0 1px #2b6a83;
font-weight: bold;
float: left;
display: block;
}
.menu a:hover { color: #276a85; text-shadow: 0 1px #e1eff5; }
.drop-down a {
float: none;
min-width: 90px;
}
.menu a {
display: block;
padding: 10px 15px;
}
.drop-down-menu {
float: left;
display: block;
}
.menu-title {
cursor: default;
padding: 10px 15px;
}
.activate {
display: none;
position: absolute;
cursor: pointer;
width: 100%;
height: 40px;
margin: 0 0 0 -15px;
opacity: 0;
}
@media only screen and (min-width: 800px) {
.drop-down-menu:hover .drop-down {
display: block;
}
.drop-down {
position: absolute;
}
}
@media only screen and (max-width: 799px) {
.menu a, .drop-down-menu {
float: none;
}
.activate {
display: block;
}
}
/* Skin */
.menu a, .drop-down-menu {
background: #44a7cf;
background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));
background: -moz-linear-gradient(top, #44a7cf, #317794);
}
.menu a:hover, .drop-down-menu:hover {
background: #5a6470;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#a2cfe0));
background: -moz-linear-gradient(top, #feffff 0%, #a2cfe0 100%);
}
.drop-down a {
background: #222;
}
.drop-down a:hover {
background: #111;
}
@media only screen and (min-width: 800px) {
.first {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.last {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.drop-down .last {
border-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
@media only screen and (max-width: 799px) {
.menu {
background: #44a7cf;
background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794));
background: -moz-linear-gradient(top, #44a7cf, #317794);
}
:checked ~ .menu-title {
background: #495261;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#495261), color-stop(100%,#38404b));
background: -moz-linear-gradient(top, #495261 0%, #38404b 100%);
}
.menu a, .drop-down-menu {
background: none;
}
.drop-down a {
background: #222;
}
}
/* IE */
.ie8 .drop-down-menu:hover .drop-down { display: block; }
.ie8 .drop-down { position: absolute; }
.drop-down {
max-height: 0;
overflow: hidden;
}
.ie8 .drop-down-menu:hover .drop-down {
max-height: 200px;
}
@media only screen and (min-width: 800px) {
.drop-down-menu:hover .drop-down {
max-height: 200px;
}
}
@media only screen and (max-width: 799px) {
.activate:checked ~ .drop-down {
max-height: 200px;
}
}
.drop-down, .menu a, .drop-down-menu {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
/*------ http://softkafe.ru/----*/
2) В то место где хотите видеть меню вставляете код:
Код
<nav class="menu">
<a class="first" href="/">Главная</a>
<a href="/load">Форум</a>
<a href="/load">Фильмы</a>
<a href="/load">Мульфильмы</a>
<a href="/load">Поиск</a>
<a href="/load">Выход</a>
<a class="last" href="/load">Добавить материал</a>
</nav>