CSS Мегаменю при наведении на ссылку со следующей вернется к первой выбранной ссылке - PullRequest
Новая
       5

CSS Мегаменю при наведении на ссылку со следующей вернется к первой выбранной ссылке

0 голосов
/ 12 января 2020

Я пытаюсь создать мега-меню, используя руководство, которое нашел Валериу Тимбу c здесь: https://designmodo.com/create-css3-mega-menu/

Я узнал во время игры вокруг при этом, когда выбран элемент меню для отображения div меню (меню 1), то при выборе другого меню (menu 2) для отображения его div меню, если вы перемещаете мышь ниже выбранного div меню (menu 2 - как если вы пытаетесь выбрать элемент из только что выбранного элемента div), выбранное меню возвращается к первому выбранному элементу меню (меню 1).

Это происходит только для пунктов меню, идущих справа налево - это не происходит для предметов, идущих слева направо. в веб-демонстрации это выглядит так, как будто происходит в обоих направлениях, в моем личном тесте это происходит только справа налево

Чтобы воспроизвести поведение, выполните следующие действия на демонстрационной странице здесь: https://designmodo.com/demo/css3megamenu/

  1. наведите курсор на элемент меню «Доходы»
  2. наведите курсор на любой элемент меню слева от него - например, «Лучшие оценки» или «Что нового» ", (для этого примера мы будем использовать ссылку" Что нового ", поскольку в выпадающем меню есть элементы)
  3. , как только элементы" Что нового "отображаются, переместите указатель мыши вниз, чтобы выбрать элемент из выпадающего меню «Что нового» * ​​1022 *
  4. экран возвращается к меню «Доходы».

Делаем то же самое, но в противоположном направлении слева направо то есть, если сначала выбрать элемент меню «Что нового», а затем навести курсор на элемент меню «Доходы», будет отображаться правильное поведение, при котором перемещение мыши не приведет к возврату к ранее выбранному элементу меню.

Чтобы посмотреть, что происходит в Пожалуйста, посмотрите видео здесь: https://imgur.com/a/3Jg4w0b

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

1 Ответ

0 голосов
/ 12 января 2020

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

При определении пунктов меню в раскрывающемся разделе меню необходимо установить CSS для дисплея в значение «Нет» (вместо «Блок», показанный в демонстрационной версии), чтобы вообще не было доступа к элементу div.

Несмотря на то, что элемент div выглядит скрытым, поскольку видимость и переполнение установлены на «Скрытый», он Похоже, область div по-прежнему существует, поэтому при наведении курсора на элемент меню все равно действует, как если бы был выбран предыдущий элемент раскрывающегося меню, поскольку в этом раскрывающемся меню по-прежнему отображается элемент div.

При наведении курсора CSS, дисплей должен быть установлен в «Блок», который будет рисовать элемент только при наведении курсора на ссылку.

...