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

Наш опрос
Какую социальную сеть предпочитаете?


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

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


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

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

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

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

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


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

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



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

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

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

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

Креативное анимированное меню uCoz

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

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

Хотим поделиться красивейшим и очень стильным меню с эффектом легкой анимации, которое подойдёт к одностраничному сайту шаблону. Оно простое и легкое, и если надумаете скачивать после ознакомления - специальным бонусом идет исходник, который вы тоже можете покрутить в своих умелых руках и настроить меню так как вам больше нравится. Ну или просто пользуйтесь плодами нашего труда. Использованной CSS3 и JQuery  традиционно для Ucoz. Мы поместили горизонтально вверху экрана. Менб представляет собой простенькую серую трубу, по которой очень плавно и четко скользит контрастный красный элемент, подсвечивающий элементы меню. Если изначально они были прописаны красным шрифтом на сером фоне, то при перемещении бегунка становятся белыми на красном. Красный бегунок очень чувствителен к мыши и следует за ней, быстро меняя направление.

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

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

Установка:

В то место, где должно быть меню, вставляйте:

<ul class="k84apomenu">
<div class="listact"></div>
<div class="k84apolist">
<a href="/"><li style="color:#fff !important;">На главную</li></a>
<a href="/forum"><li>Форум</li></a>
<a href="/blog"><li>Блог</li></a>
<a href="/gb"><li>Гостевая</li></a>
<a href="http://apo-ucoz.com"><li>На apo-ucoz</li></a>
</div>
</ul>

<script>
$(document).ready(function() {
// ApoTeam (c) 2013
$('.listact').css({'margin-left': $('.k84apomenu li:first').offset().left-48 + 'px', 'width': parseInt($('.k84apomenu li:first').css('width')) + 100 + 'px'});
$('.k84apomenu li').mouseover(function () {
$('.k84apomenu li').removeAttr('style');
$(this).attr('style', 'color:#fff !important');
$('.listact').css({'margin-left': $(this).offset().left-48 + 'px', 'width': parseInt($(this).css('width')) + 100 + 'px'});
});
// by k84pro & Apocalypse
});
</script>


В самый низ вашего css вставляйте:
.k84apomenu {
width:100%;
height:70px;
background:url('/images/k84maintube.png') repeat-x;
}
.k84apolist {
position:absolute;
z-index:2;
}
.k84apomenu li {
list-style:none;
display: inline-block;
margin:28px 10px 0px 0px;
padding-left:50px;
padding-right:50px;
font-weight: bold;
color:red;
text-decoration:italic;
transition:color .3s ease;
-o-transition:color .3s ease;
-webkit-transition:color .3s ease;
-moz-transition:color .3s ease;
}
.listact {
position:absolute;
color: #fff !important;
height: 70px;
text-align: center;
background: url('/images/k84main.png') no-repeat;
background-size:100% 70px;
padding:28px 0px 0px -5px;
margin-top: 0px !important;
cursor:pointer;
transition:all .3s ease;
-o-transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
}

Спасиво авторам -

Графика: k84pro
Вёрстка: Apocalypse


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



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


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


Всего комментариев: 1
1 Black-Yellow   (19.01.2014 21:59) [Материал]
Цитирую - .. которое подойдёт к одностраничному сайту шаблону..
-------------------
А почему только к одностраничному сайту ? Если его сразу поставить в верхнюю часть сайта - будут глюки ? wacko

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

Хостинг от uCoz