Пятница, 22.01.2021, 02:10
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта

Наш опрос
Нужны ли опросы на сайте?


Всего ответов: 1378

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 2
Гостей: 2
Пользователей: 0


Зарегистрировано 31030 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1130 материала(ов), Оставлено 5155 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Поиск



установить такую кнопку twitter
или такую
красивая кнопка Twitter

Расскажи Друзьям!
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Меню для uCoz сайта » Добавлено [14.11.2013, 13:54]

Креативное анимированное оранжевое меню для uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Одна из наиболее любимых наших тем оформления - креативные меню. Такие, знаете, необычные штуковины, которые с одной стороны очень стильные и отлично вписываются в дизайн сайта, но с другой стороны имеют в себе изюминку на которую смотришь и понимаешь "Вот это да, это человек с умом подошел к оформлению сайта".

  • Официальный клуб автовладельцев автомобиля новая Лада Приора 2, который можно найти по ссылке http://new-priora.ru/ предлагает посмотреть фотографии авто, а так же узнать интересную информацию, например что нового в Приоре и какие технические спецификации и комплектация этого отечественного автомобиля.

Буквально недавно мы нашли еще одно интересное меню, как раз отвечающее нашим требованиям - креативно и стильно. Написано традиционно для Ucoz на СС3 и требует JQuery. Менюшка оранжевая и анимированная - раскатывается такая сильная легкая ленточка горизонтально, но имеет две точки перегиба, которые, кстати реагируют на наведение мышки и слегка сжимаются, как две пружинки. И разжимаются, когда мышку убираешь. Сами иконки меню в неактивном состоянии затемненные, но при наведении мыши, тут же становятся яркими и красочными. Очень приятная штуковина для сайта, можно поиграть с пружинкой-ленточкой, а изменение яркости элементов меню при нажатии радует простотой идеи и стильным эффектом. В код встроить проблем не составит. .

Выбираете место куда - и вписываете. Забирайте себе, устанавливайте и пишите комментарии.

Важно! Все картинки из прикреплённого архива залейте в папку images

Установка:

В то место, где должно быть меню, вставляйте:
<div class="k84proapomenu2">
<div class="point1" alt="">
<div class="underpoint under3">
<a href="#"><img src="/images/file_document_paper_green_g38856.png" /></a>
<a href="#"><img src="/images/file_document_paper_green_g11853.png" /></a>
<a href="#"><img src="/images/file_document_paper_green_g9959.png" /></a>
<a href="#"><img src="/images/file_document_paper_green_g21731.png" /></a>
</div>
</div>
<div class="point2">
<div class="underpoint under1">
<a href="#"><img src="/images/file_document_paper_red_g14302.png" /></a>
</div>
</div>
<div class="point3">
<div class="underpoint under2">
<a href="#"><img src="/images/file_document_paper_orange_g21455.png" /></a>
<a href="#"><img src="/images/file_document_paper_orange_g18390.png" style="margin-left:15px;" /></a>
</div>
</div>
</div>

<script>
// Креативное меню by k84pro & Apocalypse
$('.k84proapomenu2 .point2').hover(function() {
$('.k84proapomenu2 .point3').css('margin-top', '-74px');
}, function() {
$('.k84proapomenu2 .point3').css('margin-top', '-72px');
});
// apo-ucoz.com (c) 2013
</script>


В самый низ своего css вставляйте:
.k84proapomenu2 {
height:100px;
width:auto;
}

.k84proapomenu2 * {
transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;
}

.k84proapomenu2 div[class^="point"] img:hover {
opacity:1 !important;
}

.underpoint {
position:absolute;
width:50px;
height:50px;
margin-left:25px;
margin-top:15px;
cursor:pointer;
}

.underpoint img {
opacity:0.5;
width:50px;
height:50px;
}

.under1 img {
margin-top:15px;
margin-left:5px;
}

.under2 {
margin-top:28px;
margin-left:50px;
width:250px;
}

.under3 {
margin-top:20px;
margin-left:30px;
width:350px;
}

.under3 img {
margin:0px 10px;
}

.k84proapomenu2 .point1 {
width:450px;
height:80px;
background: rgb(252,134,83); /* Old browsers */
background: -moz-linear-gradient(left, rgba(252,134,83,1) 8%, rgba(247,125,76,1) 35%, rgba(234,94,46,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(8%,rgba(252,134,83,1)), color-stop(35%,rgba(247,125,76,1)), color-stop(100%,rgba(234,94,46,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8653', endColorstr='#ea5e2e',GradientType=1 ); /* IE6-9 */
}

.k84proapomenu2 .point2 {
width:140px;
height:90px;
background:url('/images/k84apo2.png') repeat-x;
position: absolute;
margin-top: -80px;
margin-left: 351px;
z-index:1;
}

.k84proapomenu2 .point2:hover {
background:url('/images/k84apo2u.png') repeat-x;
position: absolute;
margin-top: -83px;
}

.k84proapomenu2 .point3 {
width:275px;
height:90px;
background:url('/images/k84apo3.png') repeat-x;
position: absolute;
margin-top: -72px;
margin-left: 428px;
z-index: 2;
}

.k84proapomenu2 .point3:hover {
background:url('/images/k84apo3u.png') repeat-x;
margin-top:-76px !important;
}

PSD исходник также в комплекте

Спасибо создателям:
Графика: k84pro
Вёрстка: Apocalypse


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Креативное анимированное оранжевое меню для uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Меню для uCoz сайта | Добавил: scripts_for_ucoz | Теги: uCoz, меню, анимированное, Оранжевое, Креативное
Просмотров: 4190 | Загрузок: 15 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz