Засовываете это дело в контейнер, там же скрытую кнопку для открывания, при нужной ширине выставляете списку 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
}
и т.д. и т.п.
