Как прятать элементы горизонтального меню в блок при уменьшении ширины?

Question

[weranda]

Приветствую

Не могу понять, как перемещать элементы горизонтального меню в отдельный блок и из него обратно в меню при его сужении и расширении соответственно. Пример меню.


Может быть есть готовые скрипты, опробованные в бою!?

Answer 1

[Максим]

по моему вчера этот вопрос был - пример от туда : codepen.io/lukejacksonn/pen/BowbWE

Answer 2

[Механик]

Делаете 2 блока с меню, например. С помощью медиа-запросов при ширине окна больше 767px, к примеру, мобильный блок скрываете, десктопный показываете. При ширине меньше - наоборот. Все просто, вроде.

Comments

[weranda]

Не тот вариант. Я предполагаю, что вы предлагаете сделать два одинаковых меню и каждому пункту при определенной ширине страницы задавать стили. Если так, то при добавление и удалении пунктов меню, придется лезть в файл стилей, а это не тот вариант, который разыскиваю. В искомом мне варианте пункт меню перемещается из меню в блок подменю.

[Механик]

weranda: Прошу прощения, недопонял. Вы имеете ввиду как прятать их туда по одному? Тут JS. Получаете все пункты меню, и ширину каждого, суммируете, сравниваете с шириной окна браузера. Если сумма ширины всех пунктов больше шиниры окна - последний пункт перемещаете в другой div (раскрывающийся).

[Механик]

weranda: Точнее, не с шириной окна браузера сравниваете, а с шириной контейнера, в котором лежит меню.