| Шаблоны для uCoz [198] Шаблоны — это лицо вашего сайта, его стиль и цвет выбирать Вам, а для хорошего выбора нужен большой ассортимент шаблонов, именно такой, какой находится в нашем каталоге. Шаблоны для uCoz на любой вкус: Адаптированные, игровые, варез-шаблоны, универсальные, визитки, одностраничники, образовательные, портфолио и многие другие в нашем архиве. |
| Скрипты для uCoz [420] Скрипты сайта — это руки вашего сайта, чем функциональнее Ваш сайт, тем лучше для пользователей и современнее он будет выглядеть. Повысить функционал сайта, просто налепив разных скриптов не значит сделать сайт лучше, наоборот тем самым Вы можете нагрузить свой сайт и замедлить его загрузку, поэтому используйте скрипты только в меру необходимого. |
| Меню для Сайта [44] Меню — это глаза вашего сайта,их красота это второстепенное аспект,на который опираются вебмастеры,самое главное-это его компактность и удобство использования. |
| Шапки для Сайта [15] Шапки для сайта — это графическое изображение,иногда встречаются и анимированные,которые располагаются в самом верху вашего сайта. |
| Кнопки для Ucoz [29] Кнопки для Ucoz-такого рода приспособления украшают сайт и в некоторых случаях являются необходимым элементом сайта.К примеру для того что бы скачать с сайта файл нужна соответствующая кнопка скачать,которая и будет тем связующим элементом между пользователем и местом хранения файла |
| Шаблоны DLE [15] |
| Софт [2] |
| Вид материалов [97] Виды материалов — отвечают за отображение материалов в списке какого-либо модуля. |
| Информеры [39] Информеры — дополнительные возможности, которые позволяют сделать вывод материалов из определенного модулей на одной или нескольких страницах сайта. Для примера можете посмотреть на информер «Новое на форуме», который находится у нас на сайте справа в блоках. Информер позволит сделать сайт максимально удобным для посетителей. |
| Иконки форума [6] Иконки форума-графическое изображение находящиеся на форуме сайта и выполняет функцию декорации и сигнализации о том,что данная тема либо закрыта,либо эта тема популярна среди пользователей |
| Иконки групп [21] Иконки групп-показывает всем посетителям сайта,что данный пользователь занимает определенную должность на сайте и имеет некоторые привилегии перед остальными пользователями сайта |
| Слайдеры [0] |
| Прелоадеры (Загрузка) [0] |
| Ajax окна для uCoz [0] |
5 733 Скрипты / Menu & Nav
Эффект зачеркивания при наведении в меню
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
11 821
Скрипты / Menu & NavSlinky — адаптивное многоуровневое меню
Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
3 896
Скрипты / Menu & NavГибкое горизонтальное меню
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
6 667
Скрипты / Menu & NavSlide out sidebar меню
Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
5 001
Скрипты / Menu & NavMega dropdown меню
Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
9 599
Скрипты / AccordionВертикальное accordion меню
Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.
3 360
Скрипты / AccordionВертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.
4 154
Скрипты / Menu & NavДиагональное меню на CSS
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
2 823
Скрипты / Menu & NavLavalamp меню на CSS3
Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.
3 183
Скрипты / Menu & NavАнимированный border с меню
Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
10 815
Скрипты / Menu & NavАдаптивное много-уровневое меню
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css 3 231
Скрипты / Menu & NavПлагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.
меню » Страница 2 » Скрипты для сайтов
3 231 Скрипты / Menu & NavПлагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.
Выезжающие иконки меню при наведении
Меню с векторными иконками. Слегка спрятанные изначально иконки, выезжают при наведении на них курсора мыши. Очень напоминает популярный плагин социальных иконок для wordpress.
3 790
Скрипты / Menu & NavCSS3 меню с overlay эффектом
При клике по кнопке, поверх контента накладывается меню, пункты которого дополнены иконками из шрифта, позволяя избежать пикселизации картинок, так как иконки выполнены в векторе. Смотрится оригинально и экономит место на странице.
5 049
Скрипты / Menu & NavАдаптивное многоуровневое меню
Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. «Детки» заменяют собой «родителей» не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.
3 353
Скрипты / Menu & NavАдаптивное Retina меню
Красочное адаптивное меню с поддержкой Retina дисплеев. В зависимости от размера окна браузера меню принимает один из трех видов: для десктопов — обычное горизонтальное отображение, двухколоночное для планшетов и мобильная версия ввиде иконки-ссылки для отображения и скрытия пунктов меню на экранах небольших размеров. Для поддержки Retina используются иконки ввиде шрифта, а не ввиде картинок, таким образом мы избегаем пикселизации при изменении размера.
2 100
Скрипты / Menu & NavГоризонтальное меню на CSS3
Симпатичное горизонтальное CSS3 меню с всплывающими пунктами при наведении.
3 795
Скрипты / Menu & NavВыпадающее меню на CSS3
Горизонтальное меню с выпадющими подпунктами с использованием css3.
2 218
Скрипты / Menu & NavРазмытое меню на CSS3
Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.
4 304
Скрипты / Menu & NavДерево меню на jQuery
Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.
2 127
Скрипты / Menu & NavJQuery плагин, позволяющий сделать горизонтальную навигацию, которая будет занимать всю ширину контейнера в котором находится. Добавлена также и поддержка IE7.
3 152
Скрипты / Menu & NavГоризонтальное меню с выпадающими подпунктами
Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.
1 573
Скрипты / Menu & NavМеню с эффектом подпрыгивания
Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.
Анимированное меню для сайта
Время чтения: 2 мин. 
С помощью небольшого плагина мы создадим анимированное меню, которое будет занимать весь экран и будет находится вверху страницы (то есть не будет занимать место на самой странице, а лишь в 45 пикселей сверху). Плагин для создания анимированного меню содержит ряд настроек, которые мы также рассмотрим (можно устанавливать скорость анимации при появлении элементов меню, выбирать тип анимации, с которым будут появляться элементы списка).
Все примеры меню смотрите ниже по ссылке:
Посмотреть примерСкачать
Как сделать анимированное меню у себя на сайте?
HTML часть
Скачиваем библиотеку jQuery(здесь) и плагин jquery.fullpage-menu.js со стилями(здесь), а затем подключаем между тегами <head> </head>:
1 2 3 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="css/fullpage-menu.css" /> <script type="text/javascript" src="js/jquery.fullpage-menu.js"></script> |
Разметка несложная:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body>
..
<div>
<ul>
<li><a href="#menu1">..</a></li>
..
</ul>
<nav>
<a target="_blank" href="#">
<span>...</span>
Элемент меню
</a>
..
</nav>
</div>
..
</body> |
Сами элементы меню находятся в блоке с классом sidemenu. Внутри есть маркированный список, который содержит две общие категории (в примере это «Главное меню» и «Рубрики»), и два блока <nav>, содержащих элементы двух этих категорий.
А сам переключатель размещается с помощью следующего кода:
1 | <div><a href="#">Меню</a></div> |
jQuery часть
С HTML мы закончили и сейчас перед закрывающим тегом </body> необходимо вставить следующий код:
1 2 3 4 5 6 7 | $(".sidemenu").fullpageMenu({
openButton: "Меню",
closeButton: "Закрыть X",
animationSpeed: 100,
autoNumber: true,
animation: "fadeInLeft"
}); |
Что это за свойства:
- openButton — определяет текст, который расположен на кнопке открытия меню. По умолчанию этот текст «Меню».
- closeButton — определяет текст, который расположен на кнопке закрытия меню. По умолчанию этот текст «Закрыть X».
- animationSpeed — с помощью этого свойства можно определять скорость появления элементов меню. По умолчанию это значение равно 100.
- autoNumber — с помощью данного свойства можно задавать автоматическую нумерацию элементов меню. По умолчанию стоит значение true.
- animation — определяет тип анимации. Доступны следующие типы анимации: «fadeInLeft», «fadeInRight», «fadeInUp» и «fadeInDown».
Вывод
Простой в использовании плагин, который позволяет создать красивое анимированное меню у себя на сайте. Также это меню можно сделать фиксированным (при прокрутке меню это меню будет зафиксировано сверху) — урок о фиксированном позиционировании.
Успехов!
С Уважением, Юрий Немец
Источник: http://www.onextrapixel.com/2014/05/22/create-a-fully-animated-full-page-menu-with-jquery-fullpage-menu-js/
Делаем активный пункт меню с помощью JavaScript
Ваш сайт может быть продуман до мелочей, но если Вы не стали уделять внимание максимально удобному оформлению меню, то сайт едва ли можно назвать комфортным. Итак, для того чтобы оформить активный пункт меню, обратимся за помощью к CSS и одному простому коду JavaScript. С ними можно легко и просто сделать меню более удобным в использовании.
По сути, подсветка активного пункта в меню встречается практически на любом сайте. Возможно, пользователь и не обращает на эту деталь никакого внимания ровно до того момента, пока не наткнется на меню без подсветки. В этом случае быстро сосредоточить внимание на нужном пункте становится сложнее.
К всеобщему удивлению стоит отметить, что найти готовое стороннее решение оказалось не так просто. В связи с чем был написан небольшой код JavaScript. Преимущества этого кода заключаются в его простоте — он доступен каждому, кто знаком с основами JavaScript. Во-вторых, код можно достаточно легко встроить в любой шаблон вне зависимости от того, какая система управления у Вашего сайта — WordPress, Joomla или прочие.
С чего начать?
Первым делом необходимо подключить JQuery библиотеку. Сделаем это с помощью этого кода (вставлять между <head> и </head>):
<script type=»text/javascript» src=»<a href=»http://code.jquery.com/jquery-latest.js»>http://code.jquery.com/jquery-latest.js</a>»> </script> |
Понять суть процесса будет легче, если Вы самостоятельно создадите какое-либо меню между <body></body>. Например:
<ul> <li> <a href=»#» >1</a></li> <li><a href=»#»>1</a></li> <li><a href=»#» >1</a></li> <li><a href=»#» >1</a></li> <li><a href=»#» >1</a></li> </ul> |
В этом образце приводится самое простое меню. В данном случае ему был присвоен класс “menu”, но по сути можно задать любой класс. Присвоив различные классы, Вы убережете себя от путаницы в дальнейшем, и работать станет гораздо удобнее.
Теперь у нас есть меню. На следующем этапе необходимо четко понять, какого результата мы хотим добиться – как именно будет представлен активный пункт меню в тот момент, когда пользователь находится на данной странице. Тут обратимся к CSS: присвоим новый класс непосредственно активному пункту меню. Допустим, имя класса будет active ( опять же, вы вольны в выборе имени класса). Код должен выглядеть следующим образом:
.active { font-family: Trajan Pro, Times New Roman; color: #ffffff; font-variant: small-caps; font-size:16px; padding-left:7px; word-spacing: 1px; } |
Не забывайте, что указанные в CSS параметры обязательно относятся к активному пункту меню.
Следующим шагом станет скрипт: его задача — определить, какая страница активна у пользователя. Далее, если данная страница соответствует запрошенной, необходимо присвоить заданному пункту его класс active. Соответственно, пункт изменит цвет, шрифт и задний фон. Код необходимо заключать в теги <head></head>:
$(function () { $(‘.menu a’).each(function () { var location = window.location.href; var link = this.href; if(location == link) { $(this).addClass(‘active’); } }); }); |
Как уже было сказано выше, это — JavaScript код. Он выполняет следующее: вызванная функция загружает данные из меню, а именно — из тега. Адрес страницы, на которой находится пользователь, функция присваивает переменной location. Далее функция обращается к атрибуту ссылки под тегом, которой присваивает значение переменной link. Если пользователь находится на нужной странице, эти функции будут равны. Тогда функция addClass даст возможность присвоить ссылке новый класс active. А сам стиль уже был ранее прописан в CSS.
Так можно сделать любое меню с активной ссылкой. В целом, на этом задача считается выполненной.
Возможно, Вам будет интересно ↓↓↓
меню » Страница 4 » Скрипты для сайтов
990 Скрипты / Menu & NavИнтересный jQuery плагин создающий необычное меню с возможностями CSS3, такими, как вращение и тени. И опять же использование CSS3 ограничивает использование этого плагина в старых браузерах. Меню отобразится, но эффектов вы не увидите.
2 876
Скрипты / Menu & NavМеню аккордеон на CSS3
Меню в стиле аккордеона сделанное на CSS3 с использованием изображений к пунктам навигации.
1 417
Скрипты / Menu & NavЗафиксированная навигация
Зафиксированная на странице навигация с выезжающими пунктами меню при наведении на jquery. Элементы полупрозрачные.
1 357
Скрипты / Menu & NavCSS3 меню
Аккуратненькое и стильное меню на css3. Впрочем его элементы можно использовать и как кнопки для сайта.
1 151
Скрипты / Menu & NavЛетающее за курсором меню
Раскрывающееся двух уровневое меню, которое отслеживает положение курсора мыши и на некотором расстоянии следует за ним. Чтобы меню меньше отвлекало оно сделано прозрачным.
977
Скрипты / Menu & NavНавигация со слайд эффектом
Навигация в которой смена подменю происходит с эффектом смещения, который реализуется благодаря плагину easing. Похожий эффект, только на prototype реализован на сайте apple.
2 271
Скрипты / Menu & NavГоризонтальное меню с CSS или JS
Меню с использованием затемнения FADE на jQuery или же просто на CSS — выбор за вами. Подойдет для сайтов с темными дизайнами.
1 389
Скрипты / Menu & NavРазмытое меню с переходами на CSS3
Очень много интересных вещей можно сделать благодаря свойствам, которые привнес CSS3. В сегодняшнем уроке по экспериментируем с текстовыми тенями и переходами, для достижения эффекта размытости при наведении на меню курсора мыши. Основная идея заключается в том, чтобы размыть другие элементы навигации, акцентируя внимание на том пункте, на который наводим мышкой.
2 025
Скрипты / Menu & NavАнимированное меню на CSS
Простое, красочное и элегантное вертикальное меню анимированное с помощью CSS3.
1 619
Скрипты / Menu & NavДинамичное меню
Меню с эффектом волны для пунктов. При наведении курсора, элемент отодвигается вправо. Незатейливо, но сипатично.
1 313
Скрипты / Menu & NavВыпадающее GUI меню
Красиво оформленное на jQuery выпадающее меню.
1 154
Скрипты / Menu & NavИнтересное меню на CSS и jQuery
Выпадающее меню с плавным эффектом появления подпунктов и фоновым изображением для них. Поддерживается Firefox, Safari, Chrome.
меню » Страница 3 » Скрипты для сайтов
3 555 Скрипты / Menu & NavВыпадающее адаптивное меню
Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.
2 168
Скрипты / Menu & NavМногоуровневое выпадающее меню
Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.
1 483
Скрипты / Social MediaКруглое социальное меню
Сделаем круглое социальное меню в котором не используются изображения. Иконки социальных сервисов берутся из специального шрифта.
1 558
Скрипты / Menu & NavМногоцветное меню на CSS3
Горизонтальное выпадающее меню, фишка которого состоит в том, что выпадающие блоки могут изменять цвет на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на jаvascript.
2 011
Скрипты / Menu & NavВыпадающее CSS3 меню
Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.
1 360
Скрипты / Menu & NavПарящее навигационное меню
Реализованное только на CSS3 меню, в котором появление его подпунктов сопровождается анимацией похожей на полет.
1 392
Скрипты / Menu & NavCSS3 эффекты для меню
Анимируем меню, используя свойства css3 не прибегая к помощи jQuery.
1 410
Скрипты / Menu & NavAndroid dock-меню
Красивое анимированное док-меню похожее на используемое в системе Android. Когда пользователь кликнет по стрелке на док-панели, то из под неё последовательно появятся иконки. Вместе с этим и сама док-панель повернется в 3D.
1 005
Скрипты / Menu & NavРазноцветное jQuery меню
Красочное горизонтальное jQuery меню. При перемещении куросра по пунктам меню за ним будет двигаться прямоугольник заданного цвета, чем то напоминает меню в стиле лава ламп.
1 060
Скрипты / Menu & NavТемное двух уровневое CSS3 меню
Двух уровневое горизонтальное темное CSS3 меню. Никаких изображений, только градиент.
1 905
Скрипты / Menu & NavCSS lava lamp меню
Горизонтальное меню с выпадающими подпунктами в стиле лава лампы сделанное только с использованием возможностей CSS3. Данный вариант подойдет для сайтов в темной цветовой гамме.
1 205
Скрипты / Menu & NavМеню с эффектом размытия
Пример создания просто CSS3 меню с эффектом размытия (blur).