How to fold the list when the screen is reduced?

Question

css

Hello!
Let's imagine that there is a conditional list with inline-block in a line. How to make it so that when the screen is reduced, if the elements do not fit into the width, they are nested in the last item in the dropdown? Thank you.

Answer 1

You put this thing in the container, there is also a hidden button for opening, with the desired width, set the list to poisition: absolute; top - *container height*, list items - display: block, display the button and assign a click event for this button.
And if you don’t know what width to write in media , and it can change, then
in your case it’s better to describe all this through an additional container class .menu-collapsed for example

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

Well on and on

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

etc. etc.