Является ли верным реализация menu таким образом?

Question

[Максим]

Необходимо реализовать меню в PC версии по hover а в мобильной версии по click и выдумал такое

<menu class="desctop"> 
    <ul> 
      ......
   </ul>
 </menu>
  <menu class="mobile"> 
    <ul> 
      ......
   </ul>
  </menu>

@media screen and (max-width:....) {
      .desctop{
          display:none;
    }
    .mobile{
      display:block; /*по ситуации*/
   }
  }

Было ли в вашем случае примеры с подобной реализацией ?Насколько это верно ?

Answer 1

[Konstantin Trunov]

Ну во первых, <menu> и вложенный в него<ul>, уже не особо корректно.
Используйте просто ul > li либо menu > li.
Подробнее можете прочитать тут htmlbook.ru/html/menu

Во вторых объясните подробнее, что вы хотите делать с меню?
При наведении/клику на какой либо элемент , чтобы оно появлялось?

Answer 2

[Ankhena]

1.
Если menu, то ul лишний https://webref.ru/html/menu
Если хочется ul, то nav

2.
Чаще всего не надо 2 раза писать меню.
Меню одно и меняется только его положение выстраивание с помощью CSS (например, flex).
Делается кнопочка, бутербродик, скрытая на десктопах, видимая на мобильных.
На мобильных меню сначала скрыто и открывается по кнопочке.

Comments

[Максим]

офигеть , как изменилось всё , ul не надо уже , спасибо - буду чаще читать спецификацию ,
А по поводу двух одинаковых тегов - это пример просто , меня интересует сама реализация , такое допустимо ? если одно запросом скрывается а другое появляется ?

[Ankhena]

. Shadow:
Нормально:
- если одно скрывается, а другое показывается
- если видоизменяется, перестраивается, меняется порядок

Не очень нормально:
Когда блок в коде дублируется и в одном месте скрывается, в другом показывается.
Это допустимо, если других вариантов совсем совсем нет.

[Максим]

Ankhena W: если бы можно было 10 раз выбрать верный ответ - я бы выбрал

[Ankhena]

. Shadow: Спасибо :)

[Ankhena]

. Shadow: Давайте в Вашем вопросе писать.

Все правильно. На большом экране кнопка скрыта. На маленьком показана.
Но дальше при клике, Вы ее скрываете и JS инлайново(!) прописывает display:none. А значит CSS в файле это уже не перебьет при увеличении экрана.
Просто нужно дописать дополнительные условия.

[Максим]

Ankhena W: какое условие ? мне в голову ни лезет что я упустил

[Максим]

Ankhena W: именно по этому я и писал именно о двух меню , в одном разрешение одно показано а в мобилке другое которое просто дублирует вывод из php

[Ankhena]

. Shadow: Зачем разные? Если они отличаются только тем, что одно в строчку, другое в столбик.
Добавить нужно только поведение кнопки.

[Максим]

Ankhena W: ну так то да ! но не в кнопке вроде проблема , а пропадает всё меню полностью , а на jquery не знаю как задать prevent.default для этого поведения

[Ankhena]

. Shadow:
Делаем так:
1. Поправьте все теги, как я писала раньше. С незакрытым div браузеры имеют право делать вообще что хотят.
2. Опишите последовательность действий при котором исчезает меню (у меня не пропадает и я не придумала)
3. В каком браузере смотреть?

[Максим]

Ankhena W: codepen.io/Geyan/pen/ObQpwq?editors=110 вот смотрите , поиграйте там, заметьте - без танцев с бубном и jquery это сделает без проблем , поверьте я не спорю просто не умею выражать мысли буквами

[Ankhena]

. Shadow: JQ нужен для разворачивания по кнопке.

Тоже самое с одним меню: codepen.io/anon/pen/mOXWQQ

[Ankhena]

. Shadow: Но Вам-то надо не это.

Надо чтобы на маленьких меню было сначала скрыто и открывалось только по клику на кнопку.

[Максим]

Ankhena W: ну да , вы правы мне надо типа вот этого : codepen.io/Geyan/pen/BQYWvg

[Максим]

Ankhena W: только что бы оно сложилось в кубик а в десктопе на весь экран

[Ankhena]

. Shadow: Вас научить делать с одним меню, без дублирования или код показать?

[Максим]

Ankhena W: вот было бы классно , на самом деле без дублирования не умею ,.

[Ankhena]

. Shadow:

Логика:
1. В html есть только кнопка и меню
2. Кнопку скрываем на десктопах. На мобилках показываем. (у меня в коде media стоит 600, слишком много вкладок в браузере, не сворачивается)
3. У меню 2 разных вида, настраиваются в CSS (ну или больше, еще для планшетов, пока это не важно). Сначала делаем без скрытия, просто настраиваем внешний вид.
4. Прячем меню на маленьких.
5. JS/JQ по клику на кнопку разворачиваем меню и меняем класс кнопки, чтобы было понятно, что по клику на нее меню свернется.
6. На этом было бы все для нормальных людей. Но разработчики любят таскать браузер за край и изменять размер.
Есть ситуация: в маленьком окне меню развернули и свернули. Если после этого увеличим окно, меню останется в скрытом положении. Для этого принудительно в JS уберем это скрытие.

Код: codepen.io/Ankhena/pen/ZBrKbK

[Максим]

Ankhena W: блеск - ещё б в технику эту вникнуть , а не использовать готовое

[Ankhena]

. Shadow: На самом деле правильнее манипулировать классами, а не slidetoggle, особенно, если начальный dislpay отличался от block.

[Максим]

Ankhena W: всё в вашем меню сделано офигенно , за исключением : open close , который остаётся

[Ankhena]

. Shadow: так я и расписала по пунктам, чтобы была понятна логика.

[Ankhena]

. Shadow: open close и должен оставаться.

Или на мобильном меню всегда показывается?

Если всегда показывается, то кнопка вообще не поняла зачем и все делается обычными media, как показывала выше codepen.io/anon/pen/mOXWQQ

[Максим]

Ankhena W: это детали уже , фигня т.е , спасибо за науку , по моему backend проще

[Ankhena]

. Shadow: разбирайтесь :)

[Максим]

Ankhena W: кстати (друг вам это нужно знать) , маленький и бесплатный тестировщик можно сделать самому на frame , указываете ему ширину которая интересует и мин-хайгхт , и всё