Responsive Resize Menu

Question

I need to respond to the button as follows: we have 15 buttons in the menu. When the browser resizes, some buttons add to <select> like this:

I have this jsFiddle to demonstrate the problem:

Answer 1

This is too much manipulation when resizing a window. I do not know if this can be done using CSS. You should prefer this.

But here is a working but dirty fiddle with Javascript / jQuery . You must listen to the event resize.

$(document).ready(function (event) {

    buildMenu();
    $(window).resize(function (event) {
        buildMenu();
    });

});

Answer 2

$(window).on('resize', function() { ... }); w40 > .

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();
});
});

. . :

Answer 3

, , .

javascript , , , , , , .

Answer 4

, -, , , 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;
    }
}