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

Question

[Danya Wyse]

В интернете кучу вариантов dropdown меню, опытные ребята подскажите как правильно чтобы не "схавать" какой нибудь галимый контент и не тащить его из сайта в сайт.
Нужно реализовать к примеру меню с одним подменю
В интернете кто как его только не верстает
Есть выпадение меню например про hover, а есть при клике по нему
вот например
https://codepen.io/tutsplus/pen/bGVPVrY взял с этого гайда, хорош ли он ? https://webdesign-tutsplus-com.translate.goog/arti...
Вот второе меню, тут уже нужно просто наводиться чтобы подменю выскакивало
https://www.cssscript.com/demo/responsive-single-l...
Есть меню на HTML,CSS,JS
А есть на чистом CSS
В чем их отличия если работают абсолютно одинаково?

Comments

[Антон Литвиненко]

некоторые всю жизнь ищут идеальное меню...

Answer 1

[Ольга]

Лично мое мнение такое:
1. То, что может быть сделано на css без извращений, должно быть сделано на css. Это надежней и качественней в работе.
2. Если пользователь водит мышкой по экрану - меню должно выпадать по наведению, если оно не спрятано в бургер-кнопку
3. Это уже вкусовщина, но делать списками то, что не является списками(в данном случае меню) - для меня такой же атавизм, как верстать весь сайт таблицами

Comments

[Danya Wyse]

А еще:
В интернете кучу этих "решений" уже написано
Но я хочу научиться писать меню сам чтобы в последующем не возвращаться к этому вопросу и тупо не копировать решения в верстку раз за разом, знаете хорошие ресурсы по меню с обсьянением кода? Или же меня только ютуб спасет?

[Антон Литвиненко]

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

[Ольга]

Антон Литвиненко, если хочется семантичности - надо использовать nav, а так это "просто так привыкли". Сначала навешиваем семантические теги с базовыми стилями,а потом героически эти стили сбрасываем.

[Антон Литвиненко]

Ольга, спасибо за подсказку. но дело тут не в семантичности а в доступности. скринридер прочитает что это список с количеством ссылок, а слепой человек решит себе - хочет он прослушивать это количество ссылок или нет. ну а так то да, я тоже заворачиваю меню в nav

[Ольга]

Danya Wyse, "научиться" в верстке для многих : попробовать,получить шишки и выбрать что-то для себя, т.к. даже выровнять блок по вертикали можно минимум 5ю способами, хотя в идеале лучше знать все и пользоваться всеми в зависимости от ситуации. Наверняка найдется дизайнер или клиент, который все-равно придумает,как сделать твой "идеальный шаблон" не подходящим. Но это все лирика. Мой ,практически постоянный вариант такой(в качестве корневого тега можно использовать nav, если верстка семантичная и это меню навигации по сайту или странице):

<div class="menu">
	<div class="item"><a href="#" class="link">text</a></div>
	<div class="item"><a href="#" class="link">text</a></div>
	<div class="item"><a href="#" class="link">text</a></div>
</div>

либо двухуровневое

<div class="menu">
	<div class="item parent">
		<a href="#" class="link">text</a>
		<div class="sub">
			<div class="item"><a href="#" class="link">text</a></div>
			<div class="item"><a href="#" class="link">text</a></div>
			<div class="item"><a href="#" class="link">text</a></div>
		</div>
	</div>
	<div class="item"><a href="#" class="link">text</a></div>
	<div class="item"><a href="#" class="link">text</a></div>
	<div class="item parent">
		<a href="#" class="link">text</a>
		<div class="sub">
			<div class="item"><a href="#" class="link">text</a></div>
			<div class="item"><a href="#" class="link">text</a></div>
		</div>
	</div>
</div>

если уровней много + отображение в зависимости от уровня меняетя,лучше добавить еще классов

<div class="menu">
	<div class="item parent lvl1">
		<a href="#" class="link">text</a>
		<div class="sub">
			<div class="item lvl2"><a href="#" class="link">text</a></div>
			<div class="item lvl2"><a href="#" class="link">text</a></div>
			<div class="item lvl2 parent">
				<a href="#" class="link">text</a>
				<div class="sub">
					<div class="item lvl3"><a href="#" class="link">text</a></div>
					<div class="item lvl3"><a href="#" class="link">text</a></div>
				</div>
			</div>
		</div>
	</div>
	<div class="item lvl1"><a href="#" class="link">text</a></div>
	<div class="item lvl1"><a href="#" class="link">text</a></div>
	<div class="item parent lvl1">
		<a href="#" class="link">text</a>
		<div class="sub">
			<div class="item lvl2"><a href="#" class="link">text</a></div>
			<div class="item lvl2"><a href="#" class="link">text</a></div>
		</div>
	</div>
</div>

ну и как писали ниже,все зависит от задачи, примерно такой общий шаблон у меня, он корректируется по ситуации ,в зависимости от хотелок

Answer 2

[strelok011]

Дополню немного куратора - ваше меню должно решать ВАШУ проблему.
Всякие образцы в интернете - могут решать а могут и не полностью. Работает ли адаптив для разных разрешений, поддерживается ли тач, сколько уровней вложенности, нужно ли скрывать скролл для длинных списков (и всё же меню - это именно список), нужно ли скрывать подменять десктопное меню на мобильное...
Когда составите список требований - тогда и только тогда нужно будет подбирать конкретную реализацию, либо опираясь на примеры пилить своё.
Халтура - она не универсальная :)