Меню выпадающее при наведении: Как сделать всплывающее меню при наведении

  ...
 Анимации 
 Добавьте  data-animations = "{bottom} {left} {top} {right}" , чтобы включить пользовательские анимации. Используемый файл animate.css также может быть анимирован с помощью настраиваемой анимации, поскольку имена анимаций являются классами CSS для анимации.
 Нижняя анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 Левая анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 Лучшая анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
 Правильная анимация
 DefaultbouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInLeftfadeInRightfadeInUpflipflipInXflipInYrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInDownslideInLeftslideInRightslideInUpzoomInzoomInDownzoomInLeftzoomInRightzoomInUpflashhingelightSpeedInpulserubberBandshakeswingtadawobble
  data-animations = "fadeInDown fadeInLeft fadeInUp fadeInRight"  
 html — Как отображать раскрывающееся меню и элементы подменю при наведении курсора, не щелкая 
  На этот вопрос уже есть ответы :
 Закрыт 3 года назад.
 Как показать элементы раскрывающегося меню при наведении курсора, а не при нажатии
 Здесь у меня есть раскрывающееся меню, которое отображается при нажатии, но я хочу, чтобы он отображал элементы меню при наведении курсора. То же самое и с пунктами подменю. Пожалуйста, дайте мне знать, если мне что-то не хватает
 HTML
  

  

    

      
         Переключить навигацию 
         
         
         
      
       Меню начальной загрузки 
    
    
  

  
 CSS
  @import 'https: // fonts.googleapis.com/css?family=Montserrat|Open+Sans ';
.navbar-brand {
  семейство шрифтов: 'Montserrat', без засечек;
  текст-преобразование: прописные буквы
}

.navbar .nav {
  семейство шрифтов: «Open Sans», без засечек;
  преобразование текста: прописные буквы;
  межбуквенный интервал: 3 пикселя;
  размер шрифта: 1.2rem
}

.navbar-inverse {
  цвет фона: # 003300
}

.navbar-inverse .navbar-nav> .active> a: наведение,
.navbar-inverse .navbar-nav> li> a: hover,
.navbar-inverse .navbar-nav> li> a: focus {
  цвет фона: # 002200
}

.navbar-инверсия.navbar-nav> .активные> а,
.navbar-инверсия .navbar-nav> .open> a,
.navbar-инверсия .navbar-nav> .open> a,
.navbar-inverse .navbar-nav> .open> a: hover,
.navbar-инверсия .navbar-nav> .open> a,
.navbar-inverse .navbar-nav> .open> a: hover,
.navbar-inverse .navbar-nav> .open> a: focus {
  цвет фона: # 003300
}

.выпадающее меню {
  цвет фона: # 006B00
}

.dropdown-menu> li> a: hover,
.dropdown-menu> li> a: focus {
  цвет фона: # 002200
}

.navbar-inverse {
  фоновое изображение: нет;
}

.выпадающее меню> li> a: hover,
.dropdown-menu> li> a: focus {
  фоновое изображение: нет;
}

.navbar-inverse {
  цвет границы: # 003300
}

.navbar-inverse .navbar-brand {
  цвет: #FFFFFF
}

.navbar-inverse .navbar-brand: hover {
  цвет: # FFCC00
}

.navbar-inverse .navbar-nav> li> a {
  цвет: #FFFFFF
}

.navbar-inverse .navbar-nav> li> a: hover,
.navbar-inverse .navbar-nav> li> a: focus {
  цвет: # FFCC00
}

.navbar-инверсия .navbar-nav> .active> a,
.navbar-инверсия .navbar-nav>.открыть> а,
.navbar-inverse .navbar-nav> .open> a: hover,
.navbar-inverse .navbar-nav> .open> a: focus {
  цвет: # FFCC00
}

.navbar-inverse .navbar-nav> .active> a: наведение,
.navbar-inverse .navbar-nav> .active> a: focus {
  цвет: # FFCC00
}

.dropdown-menu> li> a {
  цвет: #FFFFFF
}

.dropdown-menu> li> a: hover,
.dropdown-menu> li> a: focus {
  цвет: # FFCC00
}

.navbar-inverse .navbar-nav> .dropdown> a .caret {
  цвет верхней границы: #FFFFFF
}

.navbar-инверсия .navbar-nav>.dropdown> a: hover .caret {
  цвет верхней границы: #FFFFFF
}

.navbar-inverse .navbar-nav> .dropdown> a .caret {
  цвет нижней границы: #FFFFFF
}

.navbar-inverse .navbar-nav> .dropdown> a: hover .caret {
  цвет нижней границы: #FFFFFF
}
  
 
 Мега-раскрывающихся меню при наведении курсора — Smashing Magazine 
 Краткое резюме ↬
 Нужны ли нам в 2021 году мега-выпадающие всплывающие меню? Возможно нет.Давайте рассмотрим, что нужно учитывать при проектировании и создании мега-раскрывающегося списка, альтернативы всплывающим меню и мелкие детали для разработки лучшего UX.
 Сложные веб-сайты часто полагаются на сложную навигацию. Когда веб-сайт содержит тысячи страниц, часто в сочетании с микро-веб-сайтами и сотнями подразделов, в конечном итоге навигация станет глубокой и широкой. А с  такой сложной многоуровневой навигацией , для показа широты возможностей требуется совсем немного места.Подумайте о крупных розничных магазинах электронной коммерции и крупных корпоративных сайтах, обслуживающих множество аудиторий и имеющих множество точек входа.
 Неудивительно, что распространенный способ справиться с этой сложностью — быстро предоставить клиентам большой объем навигации. Именно поэтому мега-выпадающие списки   стали своего рода учреждением в Интернете — хотя в основном для сложных и крупных проектов. Мега раскрывающийся список   — это, по сути, большой оверлей, который появляется на действиях пользователя. Обычно он включает в себя смешанный набор ссылок, кнопок, эскизов, а иногда и сам по себе вложенные раскрывающиеся списки и оверлеи.
 На протяжении десятилетий обычным поведением для этого вида навигации является открытие меню при наведении курсора мыши  на . На протяжении десятилетий обычная жалоба пользователей на этот шаблон заключалась в абсолютном отсутствии уверенности и контроля над тем, как и когда открывается и закрывается суб-навигация.
 Иногда неожиданно появляется подменю  , а иногда оно внезапно исчезает, а иногда остается на экране какое-то время, хотя указатель мыши уже находится в совершенно другой части страницы или на другой странице вообще.
 Один из многих. Мега-выпадающее меню открывается при наведении курсора на Wayfair.com. Обычный компонент для крупных розничных магазинов. (Большой превью)
 Основная причина неудобства использования мега-выпадающих списков —  несоответствие намерений и ожиданий . С помощью наведенных меню мы пытаемся вывести конкретное намерение и действовать в соответствии с ним, отслеживая поведение мыши, однако у наших клиентов могут быть очень разные цели и очень разные ограничения при доступе к странице.
 Поведение клиента обычно непредсказуемо, даже несмотря на то, что наша аналитика может рассказать немного другую историю с точками данных, собранными и нормализованными за более длительный период времени. Мы просто редко можем точно предсказать поведение.
 Типичные сценарии, которые мы обычно исследуем:
 Клиент  нацелился на ссылку категории  и направляется туда напрямую, чтобы изучить элементы под-навигации в этой категории.
 Клиент перемещает мышь к цели  на экране , но траектория, по которой мышь должна перемещаться , охватывает навигационную ссылку , которая открывает мега-раскрывающийся список.
 Навигация в парящих туннелях может быть неприятной. От: Выпадающие меню с более простыми путями перемещения мыши. (Большой превью)
 Однако есть и другие ситуации, которые следует учитывать. Назову лишь несколько:
 Заказчик хочет  искать варианты  в мегаполисе при вводе автозаполнения поиска. Для этого они должны постоянно открывать мега-раскрывающийся список или использовать отдельные вкладки просмотра, расположенные рядом.
 Заказчик  может использовать трекпад  (или мышь) для управления большим дополнительным дисплеем, поэтому движения указателя будут более медленными, резкими и неточными.Это привело бы к тому, что мега-раскрывающийся список непроизвольно открывался бы каждый раз, когда пользователь делает паузу при переходе к CTA или корзине покупок в верхней части страницы.
 Клиент хочет открыть страницу категории  , поэтому он переходит к ссылке категории, щелкает по ней, но мерцает, потому что мега-раскрывающийся список отображается с задержкой.
 С  вложенными подменю в мега-раскрывающемся списке  заказчик хочет изучить аналогичные элементы в той категории, к которой он в настоящее время относится, но из-за вложенности им приходится снова и снова открывать мега-выпадающее меню, и путешествовать по одному и тому же парящему туннелю снова и снова.
 Представьте себе ситуацию, когда вы хотите  изменить размер окна , и как только вы собираетесь привязаться к правому краю окна, всплывающее меню продолжает отображаться — просто потому, что вы слишком близко переместили курсор мыши.
 Пользователь  начинает медленно прокручивать , чтобы оценить содержимое страницы, но меню продолжает появляться. И каждый раз, когда пользователь отталкивает курсор, чтобы прочитать содержимое мега-выпадающего меню, меню случайно исчезает.
 Проблема в том, что нам нужно  поддерживать все эти намерения,  и все эти случайности, но в то же время мы должны убедиться, что мы не создаем раздражающих и разочаровывающих впечатлений ни в одном из этих случаев.Конечно, как дизайнеры и разработчики, мы изобрели ряд методов для решения этой проблемы.
 Задержка входа / выхода при наведении 
 Одним из первых решений, а также одним из наиболее распространенных, является введение задержки на вход / выход при наведении курсора. Нам нужно убедиться, что меню  не открывается и не закрывается слишком рано . Для этого мы вводим задержку, обычно около 0,5 секунды. Это означает, что мы предоставляем клиентам буфер   продолжительностью около 0,5 секунды, чтобы:
 При необходимости пересечь траекторию к удаленной цели, или
 Укажите, что они намереваются изучить навигацию, оставаясь на ссылке на категорию в мега-раскрывающемся списке, или
 Исправьте ошибку, если они случайно вышли за границы мега-выпадающего списка.
 Другими словами, пока клиент остается  в пределах  оверлея мега-выпадающего меню, мы продолжаем его отображать. И мы скрываем оверлей, как только клиент переместил курсор мыши за пределы оверлея суб-навигации как минимум на 0,5 секунды.
 Хотя он решает проблему  случайного мерцания  на странице, он вводит задержку   в тех случаях, когда пользователь покинул мега-раскрывающийся список более чем на 0,5 секунды. В результате он замедляет каждое взаимодействие с мега-выпадающим списком по всему сайту.К сожалению, это очень быстро становится очень заметным, особенно если навигация используется много.
ADAC.de с задержкой нарастания 100 мс и переходом затухания 300 мс. Это может быстро разочаровать людей, которые часто используют мега-выпадающие списки.
 Некоторые реализации добавляют переход  fade-in / fade-out , чтобы сделать появление мега-выпадающего меню менее внезапным, но на практике это приводит к увеличению задержки входа / выхода до 0,8–0,9 с, что также вводит более заметное отставание.Примером этого является ADAC.de с задержкой нарастания 100 мс и переходом затухания 300 мс. (Однако этот переход не применяется при переключении между разными категориями в мега-раскрывающемся списке.)
 Очевидно, что чем дольше наложение остается видимым, тем жестче мы наказываем людей, которые  намеренно хотят избежать  наложения. На самом деле это становится проблемой, поскольку мы вводим поверхностный тайм-аут между действием пользователя и ответом пользовательского интерфейса.
 Прощающие пути движения мыши: треугольник траектории 
 Вместо того, чтобы вводить задержку, мы можем попытаться более щедро указывать маршруты, по которым будут путешествовать клиенты.Поскольку движения мыши по своей природе неточны, чтобы свести к минимуму разочарование, мы можем избежать узких туннелей  наведения  и сделать коридоры перемещения больше.
 Например, мы можем использовать технику треугольников Amazon, в которой мы построили траекторию , треугольник , который соединяет текущее положение указателя мыши с краями мегараспадающей области. Если эта область должна появиться рядом с категориями справа (как показано на изображении ниже), мы соединяем указатель мыши с правым верхним и правым нижним краями контейнера, в котором перечислены категории.
 Старомодно, но хорошо: треугольник амазонки соединяет текущее положение указателя мыши и правый верхний и правый нижний края контейнера списка категорий. (Большой превью)
 Пока пользователь остается в пределах треугольника или всей мегапападающей области, наложение все еще отображается. Если пользователь решит перемещаться на  за пределы треугольника , содержимое оверлея с мегастекущим списком изменится соответствующим образом. И, конечно же, он полностью исчезнет сразу после того, как пользователь вообще выйдет за пределы списка категорий.
 Крис Койер подчеркивает некоторые технические сложности этой техники в своем посте «Выпадающие меню с более простыми путями движения мыши», а также в простой демонстрации JavaScript Александра Попова в «Меню с учетом цели».
 С помощью этой техники мы  минимизируем трение  внезапного исчезновения и повторного появления суб-навигации. Но это может стать неэффективным, если ссылки категорий расположены слишком близко друг к другу или мы отображаем всплывающее меню, наведя курсор на большую кнопку.Мы можем сделать немного лучше с областями выхода пути SVG.
 Области выхода пути SVG 
 При вычислении треугольника траектории с помощью предыдущей техники иногда мы не только отслеживали точное положение указателя мыши, но также  пересчитывали треугольник  при каждом перемещении указателя — все время. Мы можем улучшить эту стратегию, вычислив общую область наложения  SVG  один раз и отследив, находится ли указатель мыши внутри нее — без постоянного пересчета треугольника.Прекрасным примером этого является реализация Hakim el Hattab, которая динамически рисует области с помощью SVG в зависимости от положения элемента навигации на экране.
 Реализация Hakim el Hattab, которая динамически рисует области с помощью SVG в зависимости от положения элемента навигации на экране. (Большой превью)
 Решение
 Hakim на самом деле является адаптивным, поэтому, если суб-навигация не умещается на экране, она будет  плавать рядом с основным элементом навигации , отображаемым во всю ширину или высоту.Площадь пути SVG будет пересчитана соответствующим образом, но только если пользователь прокручивает вертикально или горизонтально. Вы можете увидеть рабочую демонстрацию техники в действии в режиме отладки Хакима шаблона меню.
Как рассчитываются пути SVG. Из фантастического выступления Хакима о создании лучших интерфейсов.
 Хотя эта опция точна и  полностью устраняет задержку , которую мы наблюдали с задержками наведения, она вызовет мерцание, когда клиент случайно перемещается по большому списку категорий, который запрашивает открытие мега-раскрывающегося списка для каждого элемента навигации.
 Опять же, корень проблемы в том, что клиенты  не имеют никакого контроля , когда открываются и закрываются мега-выпадающие списки, и они часто не понимают, когда эти меню появятся или исчезнут. Эта непредсказуемость часто приводит к ошибкам и разочарованию. Но иногда в мега-раскрывающихся списках есть еще более скрытые проблемы с доступностью.
Больше после прыжка! Продолжить чтение ниже ↓
 Ловушки мега-выпадающих списков, открывающихся при наведении курсора 
 Как упоминалось выше, все перечисленные выше методы преследуют одну и ту же цель.Они пытаются  предсказать намерение пользователя  открыть и закрыть меню навигации, полагаясь на некоторые наблюдения, касающиеся скорости движений мыши, продолжительности пребывания в одной области или точного положения на экране. Эти прогнозы   в какой-то момент потерпят неудачу для некоторых клиентов, и с этим мало что можно сделать.
 Мега-выпадающие списки, открывающиеся при наведении курсора, имеют множество проблем с доступностью. Очевидно, нам необходимо поддерживать навигацию  внутри  — мегараспадающего меню для пользователей, использующих только клавиатуру, и мы должны гарантировать, что элементы также должным образом объявляются для программ чтения с экрана.Но также с точки зрения общей компоновки, мы должны быть осторожны с тем, где размещается мега-выпадающий список.
 Поиск прерван мега-выпадающим списком 
 Если какая-либо важная функция отображается достаточно близко к мега-выпадающему меню навигации, это обычно вызывает много проблем и жалоб. Например, если строка поиска  отображается над мега-выпадающей областью , это в конечном итоге вызовет невероятное количество трения и разочарования.
 Если не используется достаточно длительная задержка на вход / выход при наведении курсора, оверлей-мегаползун  всегда  будет мешать между поиском и результатами поиска, как в случае с Thesauraus.com ниже. Каждый раз, когда пользователь уходит от панели поиска к результатам (и обратно), ему мешает мега-выпадающий список.
Разочаровывающий опыт на Thesaurus.com. Меню продолжает отображаться вверх и вниз при переходе к (относительно небольшой) панели поиска.
 Несколько суб-навигации появляются с задержкой 
 Опыт будет обременительным, когда есть  нескольких суб-навигации, , открывающихся при наведении курсора  с задержкой , одна за другой. Прискорбным примером этого в действии является приведенный ниже веб-сайт Vodafone.Если в этом случае каждый элемент навигации также действует как отдельная ссылка на категорию (в дополнение к открытию мега-раскрывающегося списка), мы должны ожидать большого количества  кликов ярости  по всему веб-сайту.
Несколько суб-навигации открываются при наведении, с задержкой, одна за другой. Довольно громоздкий пример Vodafone.
 В приведенном выше примере имеется 4 уровня навигации, отображаемых друг под другом, и 2 из них открываются при наведении курсора с переходом  300 мс . В то же время, поскольку каждый заголовок категории также является ссылкой на страницу категории, пользователи также могут переходить прямо на страницу категории.Но после того, как они щелкнули — и пока они ждут появления новой страницы, — всплывающее меню ненадолго станет наполовину разорванным, часто не имея достаточно времени, чтобы перейти в нужный вид для регистрации покупателем.
 Добавьте к этому любые проблемы с памятью или обработкой на немного более старом устройстве пользователя, пару  тяжелых расширений браузера  и антивирусную проверку, работающую в фоновом режиме, и общее впечатление быстро станет невыносимым.
 Кроме того, поскольку 4-й уровень навигации появляется только при наведении курсора, если 3-й уровень навигации уже открыт, а 3-й уровень навигации появляется только при наведении курсора, если 2-й уровень навигации уже открыт, для перемещения между страницами 4-й уровень, пользователи должны повторно открывать навигацию снова и снова и помнить, где они нажимали ранее, чтобы навести туннель на 4-й уровень.
 Мы в основном  умножаем задержки и проблемы с туннелем наведения , о которых мы говорили ранее, всегда заставляя пользователей ждать появления навигации и прося их быть очень точными в коридоре наведения, как только появится навигация  . Вот откуда исходит разочарование.
 4 уровня навигации на Vodafone. Было бы неплохо держать их всех на виду, по крайней мере, на 4-м уровне. (Большой превью)
 В случае, если вам все же приходится иметь дело со сложной навигацией такого типа, возможно, стоит проверить, исчезнут ли проблемы, когда  используется только одно (а не два) всплывающее меню .Это меню будет немного больше, и все параметры будут помещены в столбцы. Или, если возможно, для каждой категории рассмотрите возможность отображения всех параметров навигации в этой категории в виде постоянной панели навигации   (боковая панель или липкая верхняя панель) — обычно это должно полностью устранить все эти проблемы.
 Заголовки категорий делают слишком много вещей 
 Как мы видели ранее, иногда заголовки категорий  имеют две разные функции . С одной стороны, каждый заголовок категории может быть связан со страницей категории, чтобы клиенты могли щелкнуть по ним, чтобы перейти прямо на страницу.С другой стороны, они также могли открывать мега-выпадающий оверлей. Поэтому, если пользователь наведет курсор на заголовок в течение достаточно долгого времени, откроется мега-раскрывающийся список, но пользователь, возможно, уже щелкнул ссылку, и это вызовет мерцание. Для клиентов трудно оправдать ожидания, когда интерфейс на самом деле не дает никаких подсказок.
 В одном из предыдущих проектов The Guardian в раскрывающемся списке была ссылка «Спортивный дом». (Большой превью)
 Есть несколько вариантов решения этой проблемы:
 Чтобы указать, что заголовок категории является ссылкой, может быть полезно  подчеркнуть  it,
 Чтобы сделать различие между заголовком категории и раскрывающимся списком более очевидным, добавьте вертикальный разделитель (например,грамм. вертикальная линия) и значок (шеврон),
 Оставьте заголовок категории, открывающий только мега-раскрывающийся список, а  добавьте ссылку на раздел «Главная» категории   в пределах  мега-раскрывающегося оверлея. Это также может быть заметная кнопка «Просмотреть все параметры» (см. Пример The Guardian выше).
 Как упоминалось выше, иногда можно увидеть дополнительный значок  , используемый для обозначения того, что меню открывает наложение, а заголовок категории является ссылкой.В наших тестах юзабилити мы заметили, что всякий раз, когда присутствует значок (и не имеет значения, какой это значок), пользователи часто мысленно различают действие, которое будет вызвано щелчком по значку, и действие, предложенное. щелчком по названию категории.
 В первом случае они обычно ожидают, что откроется раскрывающийся список, а во втором — появится страница категории. Что еще более важно, они, похоже, ожидают, что меню откроется при нажатии / щелчке , а не при наведении курсора на .
 Mailchimp — хороший пример мега-раскрывающегося списка, который позволяет избежать большинства проблем, описанных выше, при этом названия категорий действуют только для открытия мега-раскрывающегося списка. Раскрывающийся список  доступен для пользователей клавиатуры  со стилем : focus . После выбора каждая категория выделяется как  с подчеркиванием , и это может заставить некоторых людей предположить, что заголовок превратился в ссылку, особенно потому, что подчеркивание точно такое же подчеркивание для ссылки «Цены» в верхней части навигации.Возможно, выделение его цветом фона было бы немного более надежным. Отличный справочный пример для всплывающих меню.
 В целом кажется хорошей идеей  избегать перегрузки заголовков категорий  множеством функций. Это касается не только мега-выпадающих меню, но и почти всех меню, включая аккордеоны или всплывающие подсказки: вся область   должна служить расширением, показывая параметры навигации при нажатии или щелчке. В большинстве случаев это более просто и менее неприятно.
 Одна из распространенных причин, почему мега-выпадающие списки часто открываются при наведении курсора, потому что многие крупные компании хотят быстро предоставить своим клиентам широкий спектр возможностей, доступных на сайте. С изменением параметров навигации при наведении указателя мыши мы можем быстрее отображать больше вариантов, а покупатель может быстрее изучить больше вариантов. Вот почему, например, трудно представить себе крупного продавца электронной коммерции без большого навигационного оверлея.
 Тем не менее, рекомендуется проверить, остаются ли время взаимодействия и рейтинг кликов прежними (или увеличиваются), если навигация при наведении курсора заменяется навигацией по нажатию / нажатию  .Фактически, большинство проблем, перечисленных выше, можно легко решить, выполнив именно это: наложение мега-выпадающего меню будет открываться и закрываться только тогда, когда пользователь явно запрашивает это конкретное действие. Следовательно, нет необходимости отслеживать указатель мыши или точно настраивать задержки входа / выхода при наведении курсора. Кроме того, поскольку на мобильных устройствах все равно нет зависания, нам нужно предоставить возможность открывать меню при нажатии / щелчке для мобильных устройств тем или иным способом, чтобы мы могли просто сохранить это так и для больших экранов.
 Хорошим примером этого в действии является веб-сайт Еврейского музея в Берлине.Мало того, что верхняя панель навигации открывает мега-раскрывающиеся меню при нажатии и щелчке, но также и навигация на боковой панели на основе значков. Кроме того, поскольку пользователь должен активно открывать / закрывать оверлей, мы можем  выделить выбранную категорию  с помощью стилей : focus /: active .
 На веб-сайте не используются значки, указывающие на то, что меню может быть открыто или закрыто, а пункты меню не являются ссылками, ведущими на отдельную страницу. Это делает общее впечатление очень спокойным и предсказуемым, хотя, вероятно, медленнее отображает параметры навигации по сравнению с меню при наведении курсора.
 Однако, поскольку на веб-сайте не так много параметров навигации для отображения, похоже, это работает очень хорошо. И это отличный справочный пример  , который следует иметь в виду при работе с доступным мега-раскрывающимся списком, который открывается при нажатии / щелчке.
 Если у вас немного больше навигации, чуть более сложным примером является Allianz.de. Вместо использования одного большого оверлея с мега-раскрывающимся списком, суб-навигация сгруппирована в более мелкие раскрывающиеся списки. Однако в меню не всегда отображаются все параметры для каждой категории.Вместо этого он выделяет  наиболее важных опций  со ссылкой для просмотра всех опций внизу. Единственная деталь, которой может не хватать, — это шеврон, указывающий на то, что раскрывающееся меню появляется при нажатии.
 На мобильных устройствах мега-раскрывающийся список представляет собой группу  аккордеонов  с хорошим выбором цветового контраста и отступов для обозначения иерархии навигации. Каждый аккордеон никогда не отображает более 4 элементов навигации одновременно. Отличный справочный пример для сложной мега-выпадающей навигации, которая хорошо работает.
 Вроде все как надо. Группа гармошек с отступами и хорошим типографским / цветовым контрастом на Allianz.de. (Большой превью)
 Если вы ищете техническую реализацию, вы можете проверить «Хвала однозначному меню щелчков», в котором Марк Рут-Уайли показывает, как создать доступное меню щелчков. Идея состоит в том, чтобы начать создание меню в виде контекстного меню только для CSS, которое использует  li: hover> ul  и  li: focus-within> ul  для отображения подменю.
 Затем мы используем JavaScript для создания элементов   , устанавливаем атрибуты  aria  и добавляем обработчики событий. Окончательный результат доступен как пример кода на CodePen и как репозиторий GitHub. Это также должно быть хорошей отправной точкой для вашего меню.
 Само собой разумеется, что не все мега выпадающие меню при нажатии / щелчке работают хорошо. Target.com — еще один интересный пример доступной, большой навигации, которая избегает многоколоночного макета и показывает только один уровень навигации по времени — все открывается при нажатии / щелчке.
Цель избегает многоколоночной компоновки и показывает только один уровень навигации по времени — все открывается при нажатии / щелчке
 В раскрывающемся списке параметры отображаются только в одном столбце за раз, поэтому, перемещаясь по категориям, вы всегда остаетесь сфокусированным. внутри того же оверлея  на экране. Каждый выбранный раздел занимает весь столбец. Впечатления предсказуемы и спокойны, но, опять же, покупатель может видеть меньше навигации за раз.
Dinoffentligetransport.dk использует несколько столбцов, с навигацией вверху, дополненной значком шеврона, и открывающейся при нажатии / щелчке.
 Dinoffentligetransport.dk, веб-сайт службы общественного транспорта из Дании, вместо этого использует  с несколькими столбцами , с навигацией вверху, дополненной значком шеврона, и открывающейся нажатием / щелчком.
 В некоторых других реализациях можно увидеть несколько наложений , появляющихся поверх  друг друга. Фактически, именно так обстоит дело с Unilever (пример ниже).При нажатии / щелчке открывается мега-раскрывающийся список с одновременным отображением нескольких шевронов. Что представляет собой каждый шеврон? И чего ожидать покупателю, нажимая на них?
 У Unilever.com есть пара шевронов в выпадающем списке. (Большой превью)
  «Наши бренды»  ведет к  отдельной странице , в то время как каждая метка под ней открывает новое навигационное наложение поверх мегападающего списка. Вы заметили, что «Все бренды» подчеркнуты, а остальные элементы навигации — нет? Видно замысел дизайнеров при создании меню.Действительно,  «Все бренды»  — это ссылка, в то время как другие ярлыки открывают оверлей:
 (Большой превью)
 При наличии всех этих опций, как бы мы могли обойтись без отображения мега-выпадающего меню навигации  на мобильном телефоне ? Как оказалось, группировать такие оверлеи с мега-выпадающими списками на мобильных устройствах сложно: обычно не хватает места или наглядных пособий, чтобы выделить разные уровни по-разному и сделать их легко различимыми. В приведенном выше примере может потребоваться некоторое время, чтобы выяснить, на какую страницу мы на самом деле попали.
 Немного сложно понять, где именно мы сейчас находимся. (Большой превью)
 Немного легче понять, на каком уровне мы сейчас находимся и какие возможности у нас есть с аккордеонным подходом, как мы можем видеть на Dinoffentligetransport.dk. Тем не менее, было бы неплохо подчеркнуть ссылки в каждом подразделе, поскольку они направляют клиентов на страницу категории. Кроме того, вся панель категорий, вероятно, должна быть интерактивной и расширять аккордеон.
 Простой и предсказуемый с 3-мя уровнями навигации. (Большой превью)
 В приведенном выше примере большую часть времени мы, вероятно, сможем отображать ограниченное количество разделов навигации за раз. Но если заголовки каждого раздела относительно короткие, мы могли бы  разделить экран по горизонтали  и отображать несколько уровней одновременно. LCFC.com — хороший пример этого шаблона в действии.
 Разделенное меню, используемое в LCFC.com. Это хорошее использование доступного пространства. (Большой превью)
 Какой вариант лучше всего работает? 
 По моему личному опыту, когда мы сравниваем реализации мега-раскрывающихся списков на мобильных устройствах, вертикальные аккордеоны оказываются на  быстрее и предсказуемее , чем наложения (будь то одностолбцовые или многослойные). А разделенное меню   кажется более быстрым и предсказуемым, чем аккордеоны.
 Есть несколько  преимуществ , которые обеспечивают как аккордеоны, так и разделенные меню:
 Нет необходимости отображать кнопку «Назад» для возврата на родительскую страницу.
 Глаз не должен переключаться между верхней частью меню навигации и суб-навигацией раздела при каждом прыжке.
 Клиенты могут перемещаться между несколькими уровнями быстрее: вместо того, чтобы нажимать «Назад» несколько раз, они могут перейти к интересующей их гармонии.
 Клиенты могут исследовать несколько разделов одновременно (если реализация не закрывает автоматически один аккордеон при открытии другого). Это невозможно с наложениями.
 В целом,  аккордеоны и разделенные меню кажутся лучшим вариантом . Но они, похоже, не работают хорошо, когда используется много навигации. Если в каждой категории более  6–7 элементов , оказалось хорошей идеей либо добавить кнопку «Просмотреть все» под 6–7 элементами в другом аккордеоне (или на отдельной странице), либо вместо этого использовать наложения.
 Итак, в зависимости от объема навигации, мы можем  начать с разделенных меню , затем, если это нецелесообразно, перейти к аккордеонам, а если навигация все еще усложняется, в конечном итоге превратить аккордеоны в наложения.
 Когда мега-выпадающий список может и не понадобиться 
 Мы уже упоминали о работе команды Gov.uk в предыдущей статье, но их идеи также ценны в контексте мега-раскрывающихся списков. Для большой многоуровневой навигации команда решила использовать выводы эксперта по форме Кэролайн Джарретт по принципу «одна штука на страницу». По словам Кэролайн, «вопросы, которые естественно« сочетаются друг с другом »с точки зрения дизайнеров […], не обязательно должны находиться на одной странице, чтобы работать для пользователей».Кэролайн в первую очередь применила его к дизайну веб-форм, но мы могли применить его и в контексте навигации.
 Таким образом, идея состоит в том, чтобы  полностью избежать сложных мега-выпадающих списков  и предоставить клиентам четкий, структурированный способ навигации по траншеям веб-сайта, от одной страницы к другой. В случае Gov.uk, похоже, это происходит с помощью хорошо продуманной информационной архитектуры и руководств, которые ведут посетителей через предсказуемые шаги к цели.
 Многие страницы структурированы в виде пошаговых руководств на [Gov.uk] (https://www.gov.uk/buy-a-vehicle). (Большой превью)
 Кантон Цюрих использует тот же образец. Вместо слоев мега-раскрывающейся навигации все параметры отображаются в структурированном виде, при этом основные темы отображаются вверху как «Самые популярные темы», а навигация в каждом разделе отображается в виде липкой панели навигации вверху.
Никаких мега-выпадающих списков прицелов. Вместо этого — структурированная управляемая навигация с одной страницы на другую.О Кантоне Цюрихе.
 Альтернативный подход — использовать шаблон навигации  «Я хочу» . В дополнение к обычной навигации мы могли бы предоставить «раскрывающийся список навигации», чтобы позволить клиентам  создать навигационный запрос  по своему выбору и быть направленным прямо на страницу, которую они ищут. По сути, это серия раскрывающихся списков, которые появляются под другим, чтобы пользователь мог выбрать, что он собирается делать или находить на веб-сайте.
Создайте свой собственный навигационный запрос, сосуществующий с обычной навигацией, на Commonbond.
 Некоторое время шаблон использовался на Commonbond (см. Видео выше), а также на Corkchamber.ie. Интересный, хотя и нетрадиционный способ предоставить доступ к глубокому уровню навигации без необходимости использования мега-раскрывающегося списка.
Создайте свой собственный навигационный запрос, сосуществующий с обычной навигацией, на Corkchamber.ie.
 Контрольный список для проектирования мегабонирующей навигации 
 Каждый раз, когда мы заводим разговор о мега-выпадающих меню, кажется, что все объединяются в несколько групп: одни коллеги предпочитают наведение курсора, другие предпочитают касаться и щелкать, третьи предпочитают и то, и другое, а другие не возражают, пока есть ссылка на категорию и значок, открывающий меню.
 Невозможно сказать, что один подход всегда лучше других, но как с точки зрения технической реализации, так и с точки зрения UX,  открытие меню нажатием / щелчком  обычно вызывает гораздо меньше проблем и гораздо меньше разочарований, позволяя при этом простую реализацию, и, таким образом, обеспечивает предсказуемую и спокойную навигацию. Перед тем, как перейти к всплывающему меню, мы могли бы сначала попробовать сохранить поведение касания / щелчка, измерить взаимодействие и изучить, нужен ли наведение в конце концов.
 И, как всегда, вот несколько общих вещей, которые следует учитывать при проектировании и создании мега-раскрывающегося списка:
 Избегайте размещения важных, часто используемых элементов рядом с мега-раскрывающимся списком навигации (например,грамм. панель поиска, CTA, значок корзины покупок) (при наведении),
  Избегайте множественных суб-переходов  в мегаполисе, появляющихся друг за другом с задержкой (при наведении курсора),
  Избегайте перегрузки заголовков категорий  множеством функций.
 Подчеркните заголовки категорий, чтобы идентифицировать их как ссылки на страницу категории (конечно, если они связаны со страницей категории).
 Если можете, добавьте ссылку  «Главная» или кнопку  «Просмотреть все» в каждую подкатегорию вместо того, чтобы напрямую связывать категорию.
  Избегайте горизонтальных наложений  и подумайте о замене их вертикальными гармошками и разделенными меню,
  Добавьте значок , чтобы указать, что заголовок категории запускает мега-раскрывающийся список при нажатии (например, шеврон), и всегда делайте его достаточно большим для удобного нажатия (например, 50 × 50 пикселей),
  Избегайте длительных переходов между появлением / исчезновением  при появлении / исчезновении мега-выпадающего списка (не более 300 мс),
 Рассмотрите возможность тестирования структурированного руководства или навигационного запроса (шаблон навигации «Я хочу») вместо или в дополнение к мега-раскрывающемуся списку.
  По возможности избегайте всплывающих меню при наведении курсора .
 (il)
 Как показать и скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS 
 Используйте псевдокласс CSS : hover  
 Если вы просто хотите показывать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript. Вы можете сделать это, просто используя свойство CSS  display  и псевдокласс : hover .
 В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS.
  




<стиль>
    ul {
        отступ: 0;
        стиль списка: нет;
        фон: # f2f2f2;
    }
    ul li {
        дисплей: встроенный блок;
        положение: относительное;
        высота строки: 21px;
        выравнивание текста: слева;
    }
    ul li a {
        дисплей: блок;
        отступ: 8px 25px;
        цвет: # 333;
        текстовое оформление: нет;
    }
    ul li a: hover {
        цвет: #fff;
        фон: # 939393;
    }
    ul li ul.падать{
        минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
        фон: # f2f2f2;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
    }
    ul li: hover ul.dropdown {
        дисплей: блок; / * Показать раскрывающийся список * /
    }
    ul li ul.dropdown li {
        дисплей: блок;
    }



    

        
  На главную  
        
  О компании  
        

             Продукты & # 9662; 
            

                
  Ноутбуки  
                
  Мониторы  
                
  Принтеры  
            
        
        
  Связаться  
    

  
 Раскрывающееся меню
 при наведении курсора не работает на мобильном телефоне 
 Привет @ hbl52,
 Не могли бы вы поделиться с нами своим сайтом? Разве раскрывающееся меню недоступно при нажатии? (При наведении не работает на мобильных устройствах)
 С уважением, 
 Родика
 Привет Родика
 Я просто подключил свой сайт (отключил режим обслуживания).Вы можете это увидеть: https://cooperationsante.fr
 Вы можете протестировать меню: «Qui Sommes-nous». где у вас есть 5 подменю. На ПК или портативном ПК подменю работает как при щелчке, так и при наведении курсора. 
 Но я попытался проверить это на мобильном телефоне, не работает.
 Когда я запустил этот сайт, версия Neve была такой: И подменю работает правильно. Я думаю, эта проблема возникла с последней версией Neve. 
 Название темы: Neve 
 URI темы: https://themeisle.com/themes/neve/ 
 Автор: ThemeIsle 
 URI автора: https: // themeisle.com 
 Описание: Neve — это сверхбыстрая, легко настраиваемая многоцелевая тема. Он идеально подходит для блогов, малого бизнеса, стартапов, агентств, фирм, магазинов электронной коммерции (витрина WooCommerce), а также сайтов личных портфолио и большинства типов проектов. Neve, полностью оптимизированная для AMP и отзывчивая тема, загружается за считанные секунды и отлично адаптируется на любом устройстве просмотра. Несмотря на то, что она легкая и имеет минималистичный дизайн, тема легко расширяема, она имеет сильно оптимизированный для SEO код, что приводит к высшим позициям в результатах поиска Google.Neve отлично работает с Gutenberg и наиболее популярными конструкторами страниц (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve также готов к работе с WooCommerce, адаптивен, готов к RTL и переводу. Не смотрите дальше. Neve — идеальная тема для вас! 
 Версия: 1.0.22 
 Лицензия: Стандартная общественная лицензия GNU v2 или более поздняя версия 
 URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html 
 Текстовый домен: neve 
 WordPress Доступен: да 
 Требуется лицензия : нет
 С уважением, Бернар ………
 стр.СУБЪЕКТ: У меня есть снимок экрана, но я не знаю, как я могу присоединиться к нему с этим письмом
 привет Родика,
 Чтобы протестировать навигационную панель, я установил ширину id: div [role = ”navigation”] на 1120px. Я сделал много вещей после и забыл удалить это. Теперь работает кроме зависания.
 с уважением Бернар …….
 Привет Родика,
 У меня аналогичная проблема с Neve:
 Выпадающее меню «Мобильное меню» появляется ЗА всем остальным… Думаю, именно поэтому оно не работает на моем сайте (надеюсь, это именно так!)… И фон выпадающего меню не белый, прозрачный, и я не знаю, как его изменить. белый для всех мобильных телефонов с дополнительным CSS.
 Надеюсь, ты сможешь мне помочь.
 Сайт: https://operacionjaguar.org/new/
 Привет,
 Прошу прощения за задержку с ответом. Не могли бы вы, ребята, сообщить нам, сохраняется ли проблема с последней версией темы Neve?
 Привет, Мадалин, 
 у нас проблема с выпадающим меню. когда активна реклама Google. 
 Пожалуйста, помогите нам
 Сайт: www.jazzinfamily.com
 Здравствуйте, Мадалин,
 Я просто пробую мобильное меню с последней версией темы Neve, но оно все еще не работает.Я использовал этот код, чтобы исправить проблему:
 ul # nv-primary-navigation.menu {
 фон: #FFFFFF; 
 позиция: относительная; 
 z-индекс: 9999; 
 отступ: 1px 10px 1px 10px
}
AC
 (@purplecodes)
 Поддержка Themeisle
 Привет @jazzinfamily,
 Я проверил ваш сайт на мобильном устройстве с помощью браузера Chrome, теперь подменю работает. 
 Подтвердите, устранена ли проблема.
 @elidewa — спасибо за то, что поделились кодом, хотя я тестировал это локально и не смог воспроизвести проблему, это хорошая ссылка.
 Привет @purplecodes, 
 Нет, к сожалению, я все еще вижу проблему. 
 Я бы отправил видео о проблеме, но здесь это невозможно.
 Привет @jazzinfamily
 Не могли бы вы использовать такое приложение, как Dropbox https://www.dropbox.com/, чтобы поделиться своим видео?
 Ждем вашего ответа — Хорошего дня!
 Выпадающее меню начальной загрузки при наведении курсора CSS 
  Выпадающее меню Bootstrap при наведении курсора  с примером CSS, с помощью которого вы получите лучший трюк с CSS для решения вопроса «Как сделать раскрывающееся меню панели навигации Bootstrap при наведении курсора, а не при щелчке».
   Примечание:   Выпадающий CSS будет работать с любыми выпадающими кнопками начальной загрузки.
 Если хотите, меню начальной загрузки автоматически при наведении курсора, без щелчка по заголовку меню или стрелке. Поэтому вам нужно добавить следующий код CSS в свой стиль CSS и навести курсор на раскрывающееся меню, и откроются раскрывающиеся подменю.
 См. Больше  советов и приемов CSS  и коллекция примеров исходного кода  компонентов  Bootstrap 5, которые могут быть полезны в ваших шаблонах начальной загрузки HTML.
 Добавить раскрывающийся список CSS 
  .dropdown: hover .dropdown-menu {
    дисплей: блок;
    маржа сверху: 0 пикселей;
}  
 Выпадающее меню при наведении курсора Полный код 
  


    
    
    
    
    
    <стиль>
        .dropdown: hover .dropdown-menu {
            дисплей: блок;
            маржа сверху: 0 пикселей;
        }
    


    
             
            
            

                

                    

                         На главную 
                    
                    

                         Цены 
                    
                    

                        
                        Услуги
                        
                        

                            
  Services One  
                            
  Две службы  
                            
  Три услуги  
                        
                    
                    

                        
                        Характеристики
                        
                        

                            
  Свойств один  
                            
  Свойства два  
                            
  Свойства три  
                        
                    
                
            

        

    

    
    

  

Bootstrap Nav Menu Выпадающее меню при наведении

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

  Фрагмент CSS Язык: Css
.dropdown: hover .dropdown-menu {
   дисплей: блок;
}  

Пример кода: