Представляю вашему вниманию, простенькое горизонтальное меню цветовой окраски воды... Меню фиксированное и пр наведении на ссылку будет менять цвет...
Установка:
Это в таблицу стилей:
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>
Готово.
Другие новости |
Поделиться ссылкой
|