Мне нужна отзывчивая кнопка: У нас есть 15 кнопок в меню. Когда браузер изменения размера, некоторые кнопки добавить к <select>
так: Отзывчивое меню с изменением размера
Я имею this jsFiddle продемонстрировать проблему:
Мне нужна отзывчивая кнопка: У нас есть 15 кнопок в меню. Когда браузер изменения размера, некоторые кнопки добавить к <select>
так: Отзывчивое меню с изменением размера
Я имею this jsFiddle продемонстрировать проблему:
Это слишком много манипуляций при изменении размера окна. Я не знаю, можно ли это сделать с помощью CSS. Вы должны предпочесть это.
Но здесь работает, но грязно fiddle with Javascript/jQuery. Вы должны послушать событие resize
.
$(document).ready(function (event) {
buildMenu();
$(window).resize(function (event) {
buildMenu();
});
});
Огромное спасибо :) Ты действительно помог мне;) – mghhgm
Ваш код неполный. Когда я выбираю от
Я только хотел чтобы показать вам логику. Это не полное приложение. –
сделать это наоборот, это более гибкая, поэтому, ситуация по умолчанию выпадающее меню.
В javascript прислушиваться к событию изменения размера окна, изменять размер, измерять ширину, начинать добавлять параметры из выпадающего меню, пока оно не станет шире экрана, удалите последний элемент, сделанный.
Вы можете использовать $(window).on('resize', function() { ... });
для обнаружения изменения муравья в ширину и действовать соответствующим образом.
Вот код JQuery, который работает
$(function() {
$("<select />").appendTo($("nav"));
var $select = $('nav select');
$select.hide();
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo($select);
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo($select);
});
$(window).on('resize', function() {
console.log($(window).width());
if($(window).width() < 960) {
$($select).show();
$('nav ul').hide();
}
else if($(window).width() > 960) {
$($select).hide();
$('nav ul').show();
}
});
$select.change(function() {
window.location = $(this).find("option:selected").val();
});
});
Вы могли бы дать каждую кнопку и дублированный вариант класса, а затем использовать медиа-запросы, чтобы показать и скрыть те, которые вы хотите отобразить, сохраняя логику в JS к минимуму:
@media (max-width: SIZE-1) {
li.about-us,
li.support-1,
li.support-2,
li.support-3,
li.etc {
display: none;
}
option.about-us,
option.support-1,
option.support-2,
option.support-3,
option.etc {
display: none;
}
}
Что вы сделали до сих пор? – Sourabh
Посмотрите это для демонстрации: http://css-tricks.com/examples/ConvertMenuToDropdown/ – Sourabh
Вы пытались добавить функцию '$ (window) .resize()'? – ntgCleaner