
Представляю вашему вниманию, простенькое горизонтальное меню цветовой окраски воды... Меню фиксированное и пр наведении на ссылку будет менять цвет...
Установка:
Это в таблицу стилей:
Code
.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;
}
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;
}
А это туда где хотим видеть меню:
Code
<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>
<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>
Готово.
Просмотров: 12049
|
Категория: Меню для ucoz | Добавил: NA
Другие новости |
Поделиться ссылкой
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.