Как сделать выпадающий список в css jquery

Как сделать выпадающий список с красивым эффектом на CSS и JQuery.

Как сделать выпадающий список с красивым эффектом на CSS и JQuery.

Всем привет! Сегдня я покажу, как сделать выпадающий список с красивым эффектом на CSS и JQuery.

Посмотреть, как это работает, вы можете здесь

Теперь приступим к созданию

В .html файле пропишем следующую структуру

<div >
<div data-value="placeholder">
Choose wisely
</div>
<div data-value="wow">
Wow!
</div>
<div data-value="drop">
So dropdown!
</div>
<div data-value="select">
Very select!
</div>
<div data-value="custom">
Much custom!
</div>
<div data-value="animation">
Such animation!
</div>
</div>

Стили будут примерно такими. Однако вы можете их менять так, как захотите

$dark: #35414a;
$semilight: #86919a;
$blue: #5aafee;
*, *:before, *:after <
box-sizing: border-box;
margin: 0;
padding: 0;
>
@font-face <
font-family: pfs-bold;
src: url(&#039;https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf&#039;);
>
body <
background: $dark;
>
.drop <
width: 20em;
margin: 5em auto;
font-family: pfs-bold;
color: $semilight;
text-transform: uppercase;
position: relative;
transition: width 0.5s;
will-change: width;

.option <
padding: 1em;
cursor: pointer;
background-color: #485761;

.option <
transform: translateZ(0);
opacity: 1;

.option <
transition: background-color 0.1s;

&:after, &:before <
content: "";
position: absolute;
top: 1.5em;
right: 1em;
width: 0.75em;
height: 0.75em;
border: 0.2em solid $semilight;
transform: rotate(45deg);
transform-origin: 50% 50%;
transition: opacity 0.2s;
>
&:before <
border-left: none;
border-top: none;
top: 1.2em;
>
&:after <
border-right: none;
border-bottom: none;
opacity: 0;
>
>

.mini-hack <
opacity: 0;
transform: translateY(-50%);
>

И, наконец, простой скрипт на JQuery.

$(document).ready(function() <
$(".drop .option").click(function() <
var val = $(this).attr("data-value"),
$drop = $(".drop"),
prevActive = $(".drop .option.active").attr("data-value"),
options = $(".drop .option").length;
$drop.find(".option.active").addClass("mini-hack");
$drop.toggleClass("visible");
$drop.removeClass("withBG");
$(this).css("top");
$drop.toggleClass("opacity");
$(".mini-hack").removeClass("mini-hack");
if ($drop.hasClass("visible")) <
setTimeout(function() <
$drop.addClass("withBG");
>, 400 + options*100);
>
triggerAnimation();
if (val !== "placeholder" || prevActive === "placeholder") <
$(".drop .option").removeClass("active");
$(this).addClass("active");
>;
>);

function triggerAnimation() <
var finalWidth = $(".drop").hasClass("visible") ? 22 : 20;
$(".drop").css("width", "24em");
setTimeout(function() <
$(".drop").css("width", finalWidth + "em");
>, 400);
>
>);

Вот так просто можно сделать красивый выпадающий список на JQuery.

Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Выпадающий список в jQuery

Dropdown Check List – это плагин для jQuery, с помощью которого можно превращать обычный HTML-элемент в выпадающий список. Плагин поддерживает почти все популярные браузеры (Internet Explorer, Firefox, Opera, Safari и Chrome).

Выпадающий список в jQuery

Плагин Dropdown Check List динамически генерирует блок с чекбоксами и заголовками, которые заменяют элемент "select". Вы можете отредактировать внешний вид посредством внесения изменений в код CSS.

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

Плагин Dropdown Check List можно скачать под лицензионным соглашением Dual MIT. Более подробную информацию и демо-файлы Вы можете скачать на сайте плагина .

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Pin It

jQuery-плагин Easy List Splitter

jQuery-плагин для редактирования WYSIWYG HTML – CLEditor

Создаем навигацию в алфавитном порядке с помощью SliderNav

Плагин jQuery – Flip

Плагин для jQuery: Стильное отображение списка популярных товаров/услуг

JeegooContext: плагин jQuery для создания составных контекстных меню

TableSorter: создание гибких таблиц на клиентской стороне в jQuery

Создаем верхнюю или нижнюю скользящую панель с помощью Slide Box

Плагин бесконечной карусели для jQuery

Плагин для jQuery – Color Picker

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

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

Решено с помощью CSS! Выпадающие меню

Решено с помощью CSS! Выпадающие меню

CSS становится все более мощным, и с помощью таких функций, как CSS-сетка и пользовательские свойства (также называемые переменные CSS), мы можем реализовать многие действительно креативные решения. Некоторые из этих решений имеют своей целью не только сделать Интернет красивее, но и сделать его более доступным, и улучшить опыт создания доступных стилей. Я определенно придерживаюсь этой точки зрения!

Общий шаблон пользовательского интерфейса, который мы видим в Интернете, &#8212; это выпадающие меню. Они используются для более детального отображения связанной информации, не нагромождая большого количества кнопок, текста и параметров. Чаще всего они используются для областей заголовка и навигации сайта.

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Давайте посмотрим, можем ли мы создать одно из этих меню с помощью только CSS. Мы создадим список ссылок внутри компонента навигации следующим образом например:

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

Теперь у нас есть двухуровневая система навигации. Чтобы содержимое было скрыто и отображалось, когда мы хотим, нам нужно применить некоторый CSS. Все свойства стилей для ясности взаимодействия были удалены из следующего примера:

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

Проблема

Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете &#8212; это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=&#187;navigation&#187; &#8212; это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.

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

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

Причина заключается в том, что, хотя мы настраиваем состояние наведения указателя для родительского элемента, когда мы переходим от родительского элемента к одному из элементов списка внутри него, мы теряем этот стиль. Это логично с точки зрения CSS, но это не то, что нам нужно.

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: &#171;:focus-inside&#187;

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *