lavezzi1
@lavezzi1

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

Здравствуйте!
Представим, что есть условный список с inline-block в строчку. Как сделать, чтобы при уменьшение экрана, если элементы не влезают в ширину, вкладываются в последний пункт в dropdown? Спасибо.
  • Вопрос задан
  • 767 просмотров
Пригласить эксперта
Ответы на вопрос 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
}


и т.д. и т.п.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы