Javascript

Мобильное выпадающее меню select

Скрипт для создания мобильного выпадающего меню.

Верстка:

<div class="sect-nav">
    <div class="items">
        <a href="q">Какая-то ссылка</a>
        <a href="w">Какая-то ссылка</a>
        <a href="e" class="active-item">Какая-то ссылка 2222</a>
        <a href="r">Какая-то ссылка</a>
        <a href="t">Какая-то ссылка</a>
        <a href="y">Какая-то ссылка</a>
    </div>
</div>

Стили:

.items a {text-decoration: none; color: saddlebrown;}
select {width: 100%; height: 40px; border: 1px solid saddlebrown; display: none}
@media (max-width: 767px) {
    select {display: block}
    .items {display: none}
}

Скрипт:

$(' <select/>').appendTo('.sect-nav');
$('.sect-nav a').each(function () {
   var el = $(this);
   $(' <option/>', {
       "value": el.attr("href"),
       "text": el.text()
   }).appendTo('.sect-nav select');
})
$('.sect-nav select').change(function () {
    window.location = $(this).find("option:selected").val();
})
$('select option').each(function () {
    if($(this).val() == $("a.active-item").attr("href")) {
       $(this).attr("selected", "selected");
    }
})

Подробнее в формате видео:


Возврат к списку

сайт на Bitrix

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

Социальные сети

Рандом новостей