ОТЛИЧНОЕ ГОРИЗОНТАЛЬНОЕ МЕНЮ
17.05.2015, 21:59 | |
Представляю вашему вниманию, простенькое горизонтальное меню цветовой окраски воды... Меню фиксированное и пр наведении на ссылку будет менять цвет... Установка: Это в таблицу стилей: Код .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; } А это туда где хотим видеть меню: Код <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> | |
| |
Просмотров: 347 | Загрузок: 0 | |
Всего комментариев: 0 | |