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