Вход в личный кабинет   Зарегистрировать аккаунт

Голубое горизонтальное меню для Юкоз

Опубликовано 27-01-2013, 15:37 в разделе Меню для сайта Юкоз
Голубое горизонтальное меню для Юкоз


Простое горизонтальное меню для сайтов в системе Юкоз в голубой цветовой гамме (под цвет воды)... По структуре меню фиксированное, из особенностей можно отметить изменение цвета при наведении курсора мышки.

 

.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>

 

На этом установка завершена!

» » Голубое горизонтальное меню для Юкоз
Опубликовал Татьяна   Прочитано (раз): 1196   |   Оставлено комментариев: 0
Добавить свой комментарий