I need to responsive button like this:
we have 15 buttons on a menu. When the browser is resizing, some buttons add to <select>
like this:
I have this jsFiddle to demonstrate the problem:
See Question&Answers more detail:osI need to responsive button like this:
we have 15 buttons on a menu. When the browser is resizing, some buttons add to <select>
like this:
I have this jsFiddle to demonstrate the problem:
See Question&Answers more detail:osYou can use $(window).on('resize', function() { ... });
to detect ant change in width and act accordingly.
Here's a jQuery code that works
$(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();
});
});