Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Эффектность простоты для Вашего выпадающего списка


А сегодня, нас ожидает jQuery плагин, который с помощью нескольких простейших эффектов, может придать нашему выпадающему меню удивительную притягательность.


    Сегодня, мы хотим с вами поделиться некоторыми простыми эффектами для раскрывающихся списков. Идея заключается в том,  чтобы трансформировать стандартное выпадающее меню, в нечто поистине привлекательное с помощью jQuery плагина. Всё реализовано так, что вы сможете самостоятельно создать своё, оригинальное меню, используя различную конфигурацию плагина и эффекты.

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

    Обратите ваше внимание, для корректной работы меню, необходима поддержка CSS3 эффектов со стороны браузера.

    Если у пользователя отключен JavaScript, для него будет показана простая реализация меню, с обычными эффектами.

    Шрифт – значки были созданы IcoMoon.

    И так, давайте начнём с разметки выпадающего списка:

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

    И сразу подключим  плагин:

$('#cd-dropdown').dropdown();

    Давайте, чуть трансформируем наш список, добавив необходимые элементы:

<div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
</div>

    Нажимая на любой элемент списка, мы будем присваивать ему класс "cd-active", и менять содержимое элемента span в блоках cd-dropdown. Это будет происходить при каждом нашем выборе.

    Настройки

    По умолчанию, доступны следующие параметры:

speed : 300,
easing : 'ease',
gutter : 0,
 
// первоначальный эффект списка
stack : true,
 
// задержка между переходами анимации
delay : 0,
 
// случайный угол и позиция элементов списка
random : false,
 
// вращение [right||left||false] : выберите, для вращения в левую или правую сторону, false - без вращения
// убедитесь, что для настройки преобразований, у вас есть все необходимые стили
rotated : false,
 
// опции для настройки слайд эффектов, поэкспериментируйте
slidingIn : false

    Общие стили вы сможете найти в файле common.css, а индивидуальные, для каждого примера, в файле styleN.css.

    Демонстрации

    Просмотрите все демонстрации, чтобы увидеть различные настройки плагина в действии:

Демонстрация 1: 5 элементов выпадающего списка, находятся на некотором отдалении друг от друга;
Демонстрация 2: то же что и в демонстрации 1, за исключением того, что каждый из элементов списка, дополнительно имеет случайное значение угла поворота влево;
Демонстрация 3: элементы меню, кроме смещения, располагаются ещё и по кругу;
Демонстрация 4: используется 3D вращение и drag&drop (перетащи и брось), зажмите левую клавишу мыши на активном элементе чтобы увидеть эффект;
Демонстрация 5: вариант меню, при котором его элементы, показываются и исчезают, используя анимацию сдвига влево/вправо;
Демонстрация 6: тоже, что и в демонстрации 5, только эффект происходит с задержкой.

    Надеюсь вам понравился этот небольшой плагин!

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 09.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 503
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
перевезти трактор
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
Щит мебельный сосна 40 мм
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: