Как так разместить список подменю?

Question

[rinaz22]

Всем привет! Сделал боковое меню и у некоторых есть подменю. Хотел сделать подменю как на картинке, но не получается. Т.е. список должен чередовать в такой же последовательности(1, 2, 3), а если ширины достаточно, то все в 1 ряд и наоборот.

<ul>
	<li>
		<a href="#">123 <i class="fas fa-angle-right"></i></a>
		<ul class="subcategory">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</li>
</ul>

Answer 1

[Aricus]

Странное дизайнерское решение. Лучше бы, конечно, по-другому расположить, но если необходимо именно так, видимо, без js не обойдётся. Нужно сделать функцию, которая, изменяет классы, выстраивая элементы в нужном порядке, и вызывать её при загрузке страницы и изменении ширины окна.

$(document).ready(function () {
	functuion resizeSubmenu() {
		...
	}
	resizeSubmenu();
	$(window).on('resize', function(){
		resizeSubmenu();
	});
});

Comments

[rinaz22]

А как можно по другому?

[Aricus]

Если нужно, чтобы они занимали именно всю ширину, тогда логичнее, по мере уменьшения ширины:
1 2 3

1 2
3

1
2
3
Но обычно подменю делают параллельно меню, и тогда занимать они должны не ширину, а высоту. Тогда так, как у вас, по мере уменьшения высоты:
1
2
3

1 3
2

1 2 3
И то, и другое, легко делается с помощью флексбоксов.

[rinaz22]

Aricus, список будет большой, поэтому вариант
1
2
3
не подходит, может не влезть

[Aricus]

Если не будет хватать как высоты, так и ширины, то не влезет в любом случае. Тогда нужно добавлять overflow: auto; , что ли. А если будет хватать не будет хватать только высоты/ширины, в зависимости от расположения, то флексбоксы будут перестраиваться во второй, третий и т.д. столбец/ряд.

[Aricus]

rinaz22, Попробуйте разные варианты в генераторе.