-2

Здравствуйте. Не мог бы кто-нибудь глянуть верстку почему моргает меню: адрес http://activities.ursmu.ru/, при наведении на пункт "ДУХОВНО-НРАВСТВЕННОЕ ВОСПИТАНИЕ" появляется всплывающее меню и оно постоянно моргает. Все стили перелопатил, не могу понять: почему оно моргает?

6
  • минимальный воспроизводимый пример должен быть в вопросе. Ссылки могут быть только дополнением
    – Grundy
    3 окт 2016 в 8:58
  • Google Chrome, и тоже не моргает
    – Ksenia
    3 окт 2016 в 9:00
  • Chrome Windows моргает, даже нажать невозможно. 3 окт 2016 в 9:00
  • Добавляй непосредственно в вопрос, разметку, стили, и возможно js-скрипты, если они исползьзуются
    – Grundy
    3 окт 2016 в 9:07
  • у меня моргает, когда вожу курсором по всплывшем подменю. такое может быть в случае, если, например, прописано условие наведения и на открытие и на закрытие этого меню - тогда оно будет открываться при наведении и сразу закрывать и сразу открываться и...
    – lexxl
    3 окт 2016 в 9:18

2 ответа 2

4

Проблема, из-за которой моргает раскрывающееся меню, состоит в следующем: раскрывающееся меню не является вложенным в основное меню (в структуре html)

Вы зарегистрировали событие mousemove на пункте основного меню, и пока мышь движется в его пределах, дополнительное меню отображается. Однако, как только вы наводите мышь на выпадающее меню (посмотрите картинку, и увидите область пересечения обоих меню) событие mousemove завершается и дополнительное меню скрывается (т.к. мышь уже не находится в пределах основного меню). После этого событие снова срабатывает (т.к. дополнительное меню уже скрыто и вы все еще находитесь в области пересечения) и ситуация повторяется.

введите сюда описание изображения

4
  • Тогда почему вот здесь работает как надо: edu.ursmu.ru 3 окт 2016 в 9:33
  • 1
    Там работает потому, что разработчик для отслеживания работы меню использует класс active, который при наведении добавляется и основному меню и выпадающему. Если вы копируете чей-то код, то следует до конца понимать как он работает. Вообще ужасная реализация с кучей событий и всяких классов, вместо того чтобы использовать банальный :hover.
    – Andrew B
    3 окт 2016 в 9:39
  • Я взял весь код оттуда и все равно моргает. 3 окт 2016 в 9:50
  • Открываете консоль (F12 в Google Chrome), открываете вкладку Elements и находите в коде ваше меню. Водите по нему и видите, что класс .active не добавляется. Делаете то же самое для сайта, где работает, и видите, что там этот класс добавляется при наведении. Это означает, что вы не все правильно скопировали.
    – Andrew B
    3 окт 2016 в 9:58
2

Потому что у вас <div class="foold"> стоит вне тэга <a> поставьте его внутрь тэга <a href="http://fane.ursmu.ru">Духовно-нравственное воспитание</a> Или лучше используйте список <ul>

2
  • Тогда почему тут edu.ursmu.ru нормально работает? Все взято оттуда. 3 окт 2016 в 9:36
  • 1
    Наверное потому что там js-ом добавляется класс .active и меню и ссылке.
    – SVE
    3 окт 2016 в 9:52

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.