Как складывать список при уменьшении экрана?

Question

[lavezzi1]

Здравствуйте!
Представим, что есть условный список с inline-block в строчку. Как сделать, чтобы при уменьшение экрана, если элементы не влезают в ширину, вкладываются в последний пункт в dropdown? Спасибо.

Comments

[Damir Aushenov]

вам бы код выложить

Answer 1

[Inwork277]

Засовываете это дело в контейнер, там же скрытую кнопку для открывания, при нужной ширине выставляете списку poisition: absolute; top - *высота контейнера*, элементам списка - display: block, отображаете кнопку и прописываете событие на клик для этой кнопки.

А если не знаете какую ширину писать в media, и она может меняться, то

В Вашем случае лучше всё это описывать через дополнительный класс контейнера .menu-collapsed например

$(window).on("load resize", function(){
    if($(".menu").width()>=$(window).width()){
        $(".menu-wrapper").addClass("menu-collapsed");
    } else {
        $(".menu-wrapper").removeClass("menu-collapsed");
    }
});

Ну и дальше

.menu-collapsed ul{
    position: absolute;
    top: /* высота кнопки */;
    right: 0px; /* или как Вам надо */
}
.menu-collapsed ul li{
    display: block;
}
.menu-button{ /* Ваша скрытая кнопка */
    display: block
}

и т.д. и т.п.

Comments

[lavezzi1]

Спасибо, но я так понял при таком подходе все кнопки разом поместятся в скрытую кнопку. А нужно по очереди, то есть по мере уменьшения экрана

[lavezzi1]

Cyber Katze: Как пушить их в дропдаун? Допустим есть 5 элементов в строку, при уменьшении экрана допустим меньше чем 1024, 2 элемента из 5 складываются в дропдаун, если меньше 768 то все складываются в дропдаун