Скрипт для создания мобильного выпадающего меню.
Верстка:
<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");
}
})
Подробнее в формате видео: