Статьи

Создание гладкого выпадающего меню с помощью CSS и jQuery

Октябрь 26, 2017

Позвольте мне объяснить структуру HTML, которая будет использоваться здесь. В этом примере мы будем использовать краткий список из 8 стран. Список создается с использованием элемента Definition List (DL). Почему этот элемент? Это похоже на неупорядоченный / упорядоченный список — единственное отличие состоит в том, что DL состоит из двух элементов: DT (термин) и DD (определение). Это делает его идеальным кандидатом на выпадающий элемент. Элемент DT может использоваться для отображения свернутого состояния с выбранной в данный момент опцией, в то время как DD может показывать все доступные опции во вложенной UL. Вот пример структуры:

<dl class="dropdown">

    <dt><a href="#"><span>Please select the country</span></a></dt>

    <dd>

        <ul>

            <li><a href="#">Brazil</a></li>

            <li><a href="#">France</a></li>

            <li><a href="#">Germany</a></li>

            <li><a href="#">India</a></li>

            <li><a href="#">Japan</a></li>

            <li><a href="#">Serbia</a></li>

            <li><a href="#">United Kingdom</a></li>

            <li><a href="#">United States</a></li>

        </ul>

    </dd>

</dl>

Чтобы сделать Drop Down функциональным, мы должны добавить несколько важных стилей CSS. Прежде всего мы должны сбросить поля и отступы для DD, DT и UL. DD будет позиционироваться относительно, так что вложенный UL может быть абсолютно позиционирован. Как я упоминал ранее, в свернутом состоянии будет виден только DT. Он содержит ссылку с пролетом внутри, а два элемента создают раздвижные двери , метод, который часто используется для создания кнопок и вкладок. Стиль UL прост, он будет расположен на 2 пикселя ниже DT и изначально скрыт.

<dl class="dropdown">

    <dt><a href="#"><span>Please select the country</span></a></dt>

    <dd>

        <ul>

            <li><a href="#">Brazil</a></li>

            <li><a href="#">France</a></li>

            <li><a href="#">Germany</a></li>

            <li><a href="#">India</a></li>

            <li><a href="#">Japan</a></li>

            <li><a href="#">Serbia</a></li>

            <li><a href="#">United Kingdom</a></li>

            <li><a href="#">United States</a></li>

        </ul>

    </dd>

</dl>

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



Давайте заставим это работать

Пришло время задействовать jQuery. Каждый щелчок по DT (фактически ссылка внутри DT) будет переключать вложенный UL.

$(".dropdown dt a").click(function() {

    $(".dropdown dd ul").toggle();

});

Это была самая простая часть. Теперь давайте смоделируем другие функции элемента Select. Когда вы выбираете опцию из списка (UL), она становится выбранной опцией и отображается внутри ссылки в DT. Приведенная ниже функция заменяет HTML-код выбранного элемента внутренним HTML-кодом нажатой ссылки. В конце он скрывает вложенный UL.

$(".dropdown dd ul li a").click(function() {

    var text = $(this).html();

    $(".dropdown dt a span").html(text);

    $(".dropdown dd ul").hide();

});

Это больше похоже на Drop Down, но есть еще кое-что, что нужно сделать. Во-первых, как только вы откроете вложенный UL, нажав Drop Down, он останется видимым . И это ошибка. Хотя могут быть лучшие решения, я придумал это:

$(document).bind('click', function(e) {

    var $clicked = $(e.target);

    if (! $clicked.parents().hasClass("dropdown"))

        $(".dropdown dd ul").hide();

});

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

Как насчет выбранного значения?

Несмотря на то, что он выглядит хорошо, он наверняка станет головной болью для разработчиков. Элемент select имеет атрибут «value», в котором вы можете хранить некоторые данные, которые затем необходимо отправить на сервер. Этот атрибут обычно заполняется идентификаторами записей, хранящихся в базе данных. В нашем примере со списком стран более вероятно, что для любой серьезной обработки на сервере понадобится идентификатор какой-либо страны. Итак, как хранить эти значения и как их выбрать?

Давайте изменим структуру HTML с начала этого урока и добавим элемент <span> внутри ссылок в UL. Каждый <span> имеет класс «value» и реальное значение внутри него.

<dl class="dropdown">

    <dt><a href="#"><span>Please select the country</span></a></dt>

    <dd>

        <ul>

            <li><a href="#">Brazil<span class="value">BR</span></a></li>

            <li><a href="#">France<span class="value">FR</span></a></li>

            <li><a href="#">Germany<span class="value">DE</span></a></li>

            <li><a href="#">India<span class="value">IN</span></a></li>

            <li><a href="#">Japan<span class="value">JP</span></a></li>

            <li><a href="#">Serbia<span class="value">CS</span></a></li>

            <li><a href="#">United Kingdom<span class="value">UK</span></a></li>

            <li><a href="#">United States<span class="value">US</span></a></li>

        </ul>

    </dd>

</dl>

Было бы странно иметь коды рядом с названиями стран в списке, поэтому давайте спрячем эти промежутки 

.dropdown span.value { display:none;}

И это единственное изменение, которое нам нужно сделать, чтобы сделать этот Drop Down полностью функциональным. Еще раз взгляните на обработчик кликов для ссылок в UL — он заменяет внутренний HTML-код ссылки в DT внутренним HTML-кодом нажатой ссылки. Это означает, что у tlink в элементе DT будет <span> с включенным значением.

var text = $(this).html();

$(".dropdown dt a span").html(text);

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

function getSelectedValue(id) {

    return $("#" + id).find("dt a span.value").html();

}

Код работает во всех основных браузерах: Firefox, Safari, Google Chrome, Opera (9.64), Internet Explorer 7 и 8. Он работает даже в IE6, хотя и требует некоторой доработки 🙂

Разве не так просто?

Я думаю, что переосмысление Drop Down не было так сложно, хотя может показаться, что это так. Есть несколько функций, которые необходимо реализовать, чтобы иметь достоверную симуляцию, но каждая из них проста и понятна. Вам когда-нибудь приходилось изобретать Drop Down? Каковы ваши переживания? В любом случае, дайте мне знать ваши мысли!

30
Share: