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

Содержание

Выпадающее меню на Bootstrap 4 при наведении (событие hover)

Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство «display: none;», и переходит в «display: block;», когда срабатывает событие click и на оборот — чтобы скрыть, нужно опять нажать на меню.

На примере меню из документации Bootstrap 4:



<nav>

  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>

      <li>
        <a href="#">Главная</a>
      </li>

      <li>
        <a href="#">Один</a>
      </li>

      <li>
        <a href="#">Два</a>
      </li>

      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Три один</a>
          <a href="#">Три два</a>
          <a href="#">Три три</a>
        </div>
      </li>

    </ul>
  </div>

</nav>

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

Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:



nav.navbar .dropdown:hover > .dropdown-menu {
 display: block; 

Теперь при наведении, нашему списку будет присваиваться свойство «block» и он раскроется. Вот так легко это делается, не правда ли?

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:



@media only screen and (max-device-width: 992px){
    nav.navbar .dropdown:hover .dropdown-menu{
        display: none;
    }
}

Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.

Как отключить событие click и оставить только событие hover, вы можете прочитать в этой статье:

Переход по ссылке главного (верхнего) меню раскрывающегося списка в Bootstrap 4

 

Всем удачи!

 

Возможно вам так же будет интересно:

Как создать выпадающее меню WordPress

👍 Научим создавать сайты на WordPress бесплатно за 11 уроков. Подробнее →

Хотите добавить выпадающее меню на сайт WordPress, чтобы пользователи могли ориентироваться и легко находить информацию? Мы покажем, как это сделать.

Зачем нужны выпадающие меню?

В ВордПресс встроена система управления меню. Она позволяет даже новичкам добавлять удобную навигацию на сайт.

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

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

Посмотрим, что для этого нужно, и как это сделать на своем ВП-сайте.

Тема с поддержкой выпадающего меню

Отображение выпадающих элементов в ВордПресс полностью зависит от темы. Большинство поддерживает эту функцию. Но все равно вы должны в этом убедиться.

Как проверить?

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

Вот парочка отличных тем со встроенной поддержкой вертикального выпадающего меню.

  1. Astra – бесплатный многоцелевой WordPress-шаблон с несколькими готовыми демо-сайтами.
  2. Reboot – современная и быстрая премиальная блоговая/новостная тема со встроенным конструктором главной.
  3. Journal X – платная красивая журнальная WP-тема с бесконечной подгрузкой контента.

При этом разберем, как сделать выпадающее меню WordPress.

Шаг 1. Создаем меню

Если это уже сделано, то смело переходите ко второму шагу.

Сделаем простое меню.

В админке перейдите Внешний вид > Меню и нажмите создайте новое меню.

Дайте имя новому меню и кликните Создать меню.

В блоке слева отметьте нужные пункты и нажмите Добавить в меню, а затем Сохранить меню.

Шаг 2. Добавляем подпункты

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

Для примера создадим выпадающее меню из категорий постов.

Добавим их.

Если перейти на сайт, то навигация будет выглядеть:

Видно, что все пункты стали в один ряд, а выпадающего списка нет. Для этого дочерние элементы простым перетаскиванием поместите под родительскими.

После того, как сохраните изменения, на сайте появится выпадающий список:

Выпадающее меню через плагин

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

В каталоге есть несколько решений. Один из популярных – плагин Max Mega Menu. С ним вы создадите структуру меню любой сложности, сможете добавить эффекты при наведении и нажатии и другие полезности.

Установку и работу с ним мы рассматривали в одной из прошлых статей.

Заключение

Выпадающее меню WordPress делает удобной для пользователя навигацию по сайту, что позволит ему быстрее найти нужную информацию. Его просто создать, если выбранная WP-тема поддерживает отображение дочерних элементов. В другом случае придется установить плагин.

Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.

Мне нравится7Не нравится2

Если Вам понравилась статья — поделитесь с друзьями

Скрипт простого выпадающего вертикально меню

176

547

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

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

Для того чтобы получить точно такое же меню, как показано выше, для начала вставьте в шапку своего сайта (между тегами

<head> и </head>) следующий код:

HTML код:

<style type="text/css">
    .tab_menu { width: 100%; }
    .tab_menu div { padding: 3px; cursor: pointer; }
    .hide { visibility: hidden; }
    .show { visibility: visible; }
</style>

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

JavaScript код:

<script type="text/javascript">
 function show_Object1() { document.getElementById('div1').className='show'; }
 function hide_Object1() { document.getElementById('div1').className='hide'; }
 function show_Object2() { document.getElementById('div2').className='show'; }
 function hide_Object2() { document.getElementById('div2').className='hide'; }
 function show_Object3() { document.getElementById('div3').className='show'; }
 function hide_Object3() { document.getElementById('div3').className='hide'; }
</script>

Далее, в том месте Вашего сайта, где будет располагаться выпадающее меню, необходимо добавить описание разделов и подразделов меню следующим образом:

HTML код:

<table class="tab_menu">
<tr style="vertical-align: top;"><td>
 <div style="background-color: #00BB00;"
     onmouseover="show_Object1()" onmouseout="hide_Object1()">
  <b>Основные разделы</b>
 </div>
 <div id="div1" onmouseover="show_Object1()" onmouseout="hide_Object1()"
     class="hide" style="background-color: #E8FED8;">
  <a href="index.php" onmouseover="show_Object1()" onmouseout="hide_Object1()">
  Главная</a><br>
  <a href="news.php" onmouseover="show_Object1()" onmouseout="hide_Object1()">
  Новости сайта</a><br>
  <a href="plans.php" onmouseover="show_Object1()" onmouseout="hide_Object1()">
  Планы развития</a><br>
 </div>
</td><td>
 <div style="background-color: #00BB00;"
     onmouseover="show_Object2()" onmouseout="hide_Object2()" >
  <b>Скрипты</b>
 </div>
 <div id="div2" onmouseover="show_Object2()" onmouseout="hide_Object2()"
     class="hide" style="background-color: #E8FED8;">
  <a href="shadow_text.php" onmouseover="show_Object2()" onmouseout="hide_Object2()">
  Скрипт тени к тексту</a><br>
  <a href="gradient.php" onmouseover="show_Object2()" onmouseout="hide_Object2()">
  Градиентная заливка текста</a><br>
  <a href="simple_menu.php" onmouseover="show_Object2()" onmouseout="hide_Object2()">
  Простое меню</a><br>
 </div>
</td><td>
 <div style="background-color: #00BB00;"
     onmouseover="show_Object3()" onmouseout="hide_Object3()" >
  <b>Хитрости</b>
 </div>
 <div id="div3" onmouseover="show_Object3()" onmouseout="hide_Object3()"
     class="hide" style="background-color: #E8FED8;">
  <a href="create_rss.php" onmouseover="show_Object3()" onmouseout="hide_Object3()">
  Как сделать RSS-ленту</a><br>
  <a href="no_www.php" onmouseover="show_Object3()" onmouseout="hide_Object3()">
  Убираем www из адреса сайта</a><br>
 </div>
</td></tr>
</table>

Если Вы все сделали так, как написано в данной теме, то у Вас должно получиться точно такое же выпадающее вертикально меню, как и в нашем примере, показанном выше.

Дата создания: 19:23:31 14.10.2011 г.

Дата обновления: 21:34:55 04.04.2013 г.

Посещений: 42946 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Выпадающее меню на Drupal | Web On Life

Самое простое выпадающее меню делается при помощи CSS. Ничего сложного нет если вы знаете что такое каскадные таблицы стилей. Ещё можем сделать меню на Javascript. Тут посложнее но и возможностей больше. Что посоветовать тем кто не знаете ни CSS ни Javascript. Не мы первые кто хочет иметь на своём сайте выпадающее меню. Есть готовые решения нужно только подключить их к сайту. В этом нам помогут модули.

Nice Menu

Когда слышишь выпадающее меню в Drupal первое что приходит в голову Nice Menu. Этот модуль подключает к сайту jQuery плагин Superfish. С установкой проблем возникнуть не должно переходим к настройке. Настройка проходит в два этапа. Сначала определим общие настройки. Для этого перейдём  Конфигурация → Интерфейс пользователя → Nice menus.

В поле общее количество независимых блоков указываем количество меню которые мы хотим сделать выпадающими. Теперь переходим Структура → Блоки. В списке отключённых находим блок Nice Menu и начинаем его настраивать. К обычным для блоков настройкам(название, выбор региона, настройка видимости) модуль добавил несколько своих.

Улыбнуло название «Передок меню» — здесь нам предлагаю выбрать меню к которому будут применены superfish эффекты.

Следующий пункт, который может вызвать затруднения, это «Respect «Show as expanded» option. Если ваша цель выпадающее меню без ограничений по вложенности то оставьте значение «Нет» и переходите к пункту финальная настройка. Для тех кому интересно узнать подробности сначала разберёмся что это за опция такая «Show as expanded». Забудем пока о Superfish и рассмотрим обычное меню. У каждого пункта меню может быть подпункт или можно назвать его дочерний элемент. Так на картинке ниже у пункта «про интернет» есть подпункт «справочники».

Опция «Show as expanded», или для тех у кого русский интерфейс «показывать раскрытым», определяет в каких случаях показывать вложенные пункты. Давайте посмотрим на структуру меню.

Как видите у пункта справочники также есть подпункт но он не виден в меню. Происходит это потому что опция «показывать раскрытым» для «справочники» выключена.

Если бы мы писали скрипт для меню самостоятельно, то алгоритм выглядел бы так:

  1. Найти пункты меню у которых есть дочерние элементы.
  2. Скрыть дочерние элементы.
  3. При наведении на пункт открывать дочерние элементы.

Значит в нашем случае при наведении на «проинтернет» появился бы подпункт «справочник». При наведении на подпункт «справочники» его подпункт «про нас» не появиться, потому что он не выводится в меню. Таким образом мы можем ограничивать уровень вложенности для конкретного пункта выпадающего меню. Чтобы такая схема сработала с модулем Nice Menu нужно в Respect «Show as expanded» поставить да.

Финальная настройка

Как было бы здорово если бы мы имели уже работающее как надо меню. Но нет. Впереди нас ждёт правка CSS файлов. Для superfish меню по умолчанию прописаны стили, которые скорее всего вам не подойдут. Финальную настройку начнём с того что перейдем в папку с модулем  /sites/all/modules/nice_menu/css. Находим файл nice_menu_default.css и копируем его в папку с темой. Этот файл можно переместить в любое место но лучше если он будет в папке с темой под которую мы его подгоняем.

Переходим в админке Друпала Оформление → Настройки и указываем новое место расположения файла nice_menu_default.css

Открываем для редактирования скопированный файл. Он условно разделён на несколько разделов. Очень удобно, не нужно искать по всему файлу откуда что берётся. Первыми идут глобальные настройки.

Строка 28 background-color определяет фон нашего меню. Цвет фона указывается словами, RGB или hex. На рисунке представлен вариант hex. Чтобы не ошибиться с цветом фона я использую плагин rainbow для Firefox. Кликаем по значку плагина после кликаем на том участке страницы цвет которой мы хотим узнать и автоматически копируется код цвета. Теперь нужно вставить этот код в файл(Ctrl+V). Обратите внимание что перед кодом должен стоять значок «#».

Теперь удалим рамки вокруг пунктов меню. Для этого удалим строку 25 border: 1px solid #ccc; и следующую строку тоже. Чтобы окончательно разделаться с рамками удаляем строки 21 и 39 border-top: 1px solid #ccc;
Дальше идут стили для разных видов меню. Рассмотрим только для вертикального раскрывающегося в право.

Здесь нам нужно подправить только стили для фона. На 74 строке определяется цвет фона для пункта меню который имеет вложенные пункты, а на 79 для того же пункта но при наведении на него мышки. Также как и в глобальных настройках заменяем значение цвета.

Заканчиваю пост с чувством что у некоторых из вас остались вопросы, особенно по последнему пункту. В рамках статьи сделать с этим ничего не смогу. Просто физически невозможно перебрать все варианты. С другой стороны не правильно сначала пообещать выпадающее меню а потом кинуть читателей на последнем пункте. Поэтому все у кого возникли сложности с адаптацией выпадающего меню пишите в личку. Постараюсь помоч. Ну и конечно не забываем про коменты.

Как сделать выпадающий список при наведении курсора html

Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню

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

Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.

Навигация по странице:

В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.

У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс &#128578; ) на базе которого можно построить практически любое вертикальное выпадающее меню.

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.

Пара слов о преимуществе выпадающих меню:

  • можно вместить очень длинные меню в ограниченное пространство;
  • дизайн становится более изящным;
  • частично улучшаются поведенческие факторы.

Вертикальное выпадающее меню вправо

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.

Вертикальное выпадающее меню CSS

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

Вот такой не сложный пример выпадающего меню у меня получился.

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

Выпадающий список HTML

Привет! В этой статье вас ожидают примеры выпадающих списков и меню на CSS и, кто бы мог подумать, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.

Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=&#187;menu&#187;» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

<style >
/* Обнуляю отступы и убираю маркеры у списков. */
ul , li &#123;
margin : 0 ;
padding : 0 ;
list-style-type : none ;
&#125;

/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu &#123;
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;

/* Задаю стили для блоков выпадающего списка. */
# menu > li &#123;
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
&#125;

/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul &#123;
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
&#125;

/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul &#123;
display : block ;
&#125;
</style >

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

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

Как создать крутое выпадающее меню

Третье готовое, простое и функциональное решение для создания красивого горизонтального меню с выпадающим списком разнообразных элементов.

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

Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.

Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.

Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков <ul> в крутое и удобное в использовании выпадающее меню с несколькими элементами.

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

CSS-код, помещенный в <head> страницы:

Готово! Финальный результат:

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

< ul class = «ddropdownn» >
< li class = «ddropdownn-top» >
< a class = «ddropdownn-top» href = «/» > Красноярский край < / a >
< ul class = «ddropdownn-inside» >
< li >< a href = «/» > Минусинск < / a >< / li >
< li >< a href = «/» > Ачинск < / a >< / li >
< li >< a href = «/» > Красноярск < / a >< / li >
< li >< a href = «/» > Железногорск < / a >< / li >
< li >< a href = «/» > Канск < / a >< / li >
< li >< a href = «/» > Норильск < / a >< / li >
< / ul >
< / li >

< li class = «ddropdownn-top» >
< a class = «ddropdownn-top» href = «/» > Свердловская область < / a >
< ul class = «ddropdownn-inside» >
< li >< a href = «/» > Екатеринбург < / a >< / li >
< li >< a href = «/» > Верхняя Пышма < / a >< / li >
< li >< a href = «/» > Нижний Тагил < / a >< / li >
< li >< a href = «/» > Первоуральск < / a >< / li >
< li >< a href = «/» > Асбест < / a >< / li >
< li >< a href = «/» > Каменск-Уральский < / a >< / li >
< / ul >
< / li >
< / ul >

CSS-код, который я поместил в <head>:

Результат (без наведения курсора):

Результат (при наведении курсора):

Итоги: скачать готовый html+css код выпадающего списка меню

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

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

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

Как сделать выпадающее меню на HTML и CSS

В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.

Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.

Создание горизонтального выпадающего меню:

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

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

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.

Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul> , которые находятся внутри тега <li> , сделать позиционирование absolute и добавить ему свойство display: none , что бы блок не показывался на экране.

Последнее важное изменение, это при наведении мышкой на <li> , внутри которого есть <ul> , он появлялся, вот что получилось.

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

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.

Error

codegear.dev
Home
  • Privacy Policy
  • 日本語
  • 한국어
  • 简体中文
  • Русский
  • Español
  • Français
  • Deutsch
  • Italiano
  • Português

jquery выпадающее меню при наведении

Автор admin На чтение 4 мин. Просмотров 30 Опубликовано

При наведении на определенные псевдо-ссылки, должны появляться меню под ними. И чтоб он исчезал, если курсор отошел более чем, допустим, 200px от появившегося меню и псевдо-ссылки.
Ну или хотя бы не при наведении, а нажатии. То есть уже если кликнул куда-то вне меню, то оно пропадает.

Как в VK, к примеру:

Мне просто нужно знать какие проверки в JS совершать.

Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:

Как вы уже догадались, наше выпадающее меню построено на базе маркированных списков. При наведении курсора мыши на тег
Sub 1 … раскрываться будет все, что в него заключено, а именно:

Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:

Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:

Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:

В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.

Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.

Далее идет следующая конструкция:

Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода «css(‘background’, ‘url(«down.png»)’)”, происходит присваивание свойству стиля «background» значения «url(«down.png»)». «down.png» – это иконка, показывающая, что список может раскрываться.

Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:

Мы ищем тег родительскому элементу которого присвоен hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.

В первой функции прописано:

Конструкция «$(this)” означает, что нас интересует тот элемент, на который мы в данный момент навели (this от англ. этот). А навели мы на тег
Sub 1 …. . Далее у тега при помощи метода «children(«ul»)» мы ищем вложенный тег и методом «show()» отображаем его.

После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.

После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:

Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега строку .

Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function())». Выглядеть это будет следующим образом:

Подключение нашего скрипта необходимо перенести из тега в самый конец, перед закрывающим тегом

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

Но в данном уроке мы построим простое выпадающее меню с использованием jQuery. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом JavaScript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.

Сначала построим основной шаблон HTML5. Потребуется последняя версия jQuery, которую мы получаем из API Google. Также добавляем файл стилей styles.css, который будет представлен ниже:

Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5 © 2019 Евгений Попов. Все права защищены. Служба поддержки
Сайт мониторится с помощью сервиса ping-admin 🙂

Мега-раскрывающееся меню при наведении — Smashing Magazine

Краткий обзор ↬ Нужны ли нам мега-выпадающие меню в 2021 году? Возможно нет. Давайте рассмотрим, что следует учитывать при проектировании и создании мега-выпадающего меню, альтернативы всплывающим меню и мелкие детали для разработки лучшего UX.

Сложные веб-сайты часто полагаются на сложную навигацию. Когда веб-сайт содержит тысячи страниц, часто объединенных с микро-сайтами и сотнями подразделов, в конечном итоге навигация станет глубокой и широкой.А при такой сложной многоуровневой навигации , показывающей широту возможностей, требуется совсем немного места. Подумайте о крупных розничных интернет-магазинах и крупных корпоративных сайтах, обслуживающих множество аудиторий и имеющих множество точек входа.

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

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

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

Один из многих. Мега-раскрывающийся список открывается при наведении курсора на Wayfair.com. Обычный компонент для крупных розничных магазинов. (Большой предварительный просмотр)

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

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

Типичные сценарии, которые мы обычно исследуем:

  1. Клиент нацеливается на ссылку категории и переходит туда непосредственно, чтобы изучить элементы поднавигации в этой категории.
  2. Клиент перемещает мышь к цели на экране , но траектория, по которой мышь должна пройти , охватывает навигационную ссылку , которая открывает мега-раскрывающийся список.
Навигация по парящим туннелям может быть сложной. От: Выпадающие меню с более щадящими путями движения мыши. (Большое превью)

Однако существует множество других ситуаций, которые следует учитывать. Вот лишь некоторые из них:

  1. Клиент хочет, чтобы искал варианты мега-раскрывающегося списка при вводе автозаполнения поиска.Для этого они должны постоянно открывать мега-раскрывающийся список или использовать отдельные вкладки просмотра, расположенные рядом.
  2. Клиент может использовать трекпад (или мышь) для управления большим дополнительным дисплеем, поэтому движения указателя будут более медленными, резкими и неточными. Это приведет к непреднамеренному открытию мега-раскрывающегося списка каждый раз, когда пользователь делает паузу при переходе к CTA или корзине покупок в верхней части страницы.
  3. Клиент хочет открыть страницу категории , поэтому он переходит к ссылке на категорию, нажимает на нее, но испытывает мерцание, потому что мега-раскрывающийся список появляется с задержкой.
  4. С вложенными подменю в мегараскрывающемся списке клиент хочет изучить похожие элементы в категории, в которой он находится в настоящее время, но из-за вложенности ему приходится снова и снова открывать мегараскрывающийся список , и путешествуйте по одному и тому же парящему туннелю снова и снова.
  5. Представьте себе ситуацию, когда вы хотите изменить размер окна , и как только вы собираетесь привязаться к правому краю окна, продолжает появляться всплывающее меню — просто потому, что вы слишком близко переместили курсор мыши.
  6. Пользователь начинает медленно прокручивать вниз, чтобы оценить содержимое страницы, но меню продолжает всплывать. И каждый раз, когда пользователь убирает курсор, чтобы прочитать содержимое мегавыпадающего списка, меню случайно исчезает.

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

Задержка входа/выхода при наведении

Одним из первых решений, а также одним из наиболее распространенных до сих пор является введение задержки входа/выхода при наведении. Нам нужно сделать так, чтобы меню не открывалось и не закрывалось слишком рано . Для этого мы вводим задержку, обычно около 0,5 секунды. Это означает, что мы даем клиентам буфер примерно на 0,5 секунды для:

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

Другими словами, пока клиент остается внутри мега-раскрывающегося списка, мы продолжаем его отображать. И мы скрываем оверлей после того, как клиент переместит курсор мыши за пределы оверлея дополнительной навигации не менее чем на 0,5 секунды.

Хотя он решает проблему случайного мерцания на странице, он вводит отставание в случаях, когда пользователь покидает мега-раскрывающийся список более чем на 0,5 секунды. В результате это замедляет каждое взаимодействие с мега-выпадающим меню на всем сайте.К сожалению, это очень быстро становится очень заметным, особенно если много используется навигация.

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

Некоторые реализации добавляют переход постепенного появления/затухания , чтобы сделать появление мегавыпадающего списка менее внезапным, но на практике это приводит к увеличению задержки входа/выхода до 0,8–0,9 с, что также вводит более заметное отставание.Примером этого является ADAC.de с задержкой нарастания 100 мс и переходом на затухание 300 мс. (Однако переход не применяется при переключении между различными категориями мега-раскрывающегося списка.)

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

Прощение Пути движения мыши: Треугольник траектории

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

Например, мы можем использовать технику треугольника Amazon, в которой мы построили треугольник траектории , который соединяет текущее положение указателя мыши с краями мегавыпадающей области. Если эта область должна появиться рядом с категориями справа (как показано на изображении ниже), мы соединяем указатель мыши с правым верхним и правым нижним краями контейнера, в котором перечислены категории.

Старое, но хорошее: треугольник Амазонки соединяет текущее положение указателя мыши и верхний правый и нижний правый край контейнера со списком категорий. (Большой предварительный просмотр)

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

Крис Койер освещает некоторые технические тонкости этой техники в своем посте о выпадающих меню с более щадящими путями движения мыши, а также в простой демонстрации JavaScript Александра Попова в «Меню с учетом прицеливания».

С помощью этой техники мы минимизируем трение внезапного исчезновения и повторного появления субнавигации. Но это может стать неэффективным, если ссылки на категории расположены слишком близко друг к другу, или мы отображаем всплывающее меню, наводя курсор на большую кнопку.Мы можем сделать немного лучше с областями выхода пути SVG.

SVG Path Exit Areas

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

Реализация Хакима эль-Хаттаба, которая динамически рисует области с помощью SVG в зависимости от положения элемента навигации на экране. (Большой предварительный просмотр)

Решение Хакима на самом деле отзывчиво, поэтому, если вспомогательная навигация не помещается на экране, она будет плавать рядом с основным элементом навигации , отображаясь в полную ширину или высоту.Область пути SVG будет пересчитана соответствующим образом, но только если пользователь выполняет прокрутку по вертикали или по горизонтали. Вы можете увидеть рабочую демонстрацию метода в действии в режиме отладки Хакима шаблона меню.

Как рассчитываются пути SVG. Из фантастического доклада Хакима о создании лучших интерфейсов.

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

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

Еще после прыжка! Продолжить чтение ниже ↓

Подводные камни мега-раскрывающихся списков, открывающихся при наведении курсора

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

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

Поиск прерван мега-раскрывающимся списком

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

Если не используется достаточно длительная задержка входа/выхода при наведении, мега-раскрывающийся список всегда будет мешать между поиском и результатами поиска, как в случае с Thesauraus.ком ниже. Каждый раз, когда пользователь перемещается от панели поиска к результатам (и обратно), мега-выпадающий список мешает.

Разочаровывающий опыт на Thesaurus.com. Меню продолжает отображаться вверх и вниз при переходе к (относительно небольшой) строке поиска.

Несколько поднавигаций появляются с задержками

Опыт будет громоздким, когда несколько поднавигаций открываются при наведении с задержкой , одна за другой. Неудачным примером этого в действии является веб-сайт Vodafone ниже.Если в этом случае каждый элемент навигации также действует как отдельная ссылка на категорию (в дополнение к открытию мега-выпадающего списка), мы должны ожидать множество кликов ярости по всему веб-сайту.

Несколько вложенных навигаций, открывающихся при наведении, с задержкой, одна за другой. Довольно громоздкий пример Vodafone.

В приведенном выше примере 4 уровня навигации отображаются друг под другом, и 2 из них открываются при наведении с переходом 300 мс . В то же время, поскольку заголовок каждой категории также является ссылкой на страницу категории, пользователи также могут сразу перейти на страницу категории.Но после того, как они нажали — и пока они ждут появления новой страницы — всплывающее меню ненадолго примет свой полусломанный вид — часто не имея достаточно времени, чтобы перейти в надлежащий вид, чтобы быть зарегистрированным клиентом.

Добавьте к этому любые проблемы с памятью или обработкой на более старом устройстве пользователя, пару тяжелых расширений браузера и антивирусную проверку, работающую в фоновом режиме, и общий опыт быстро станет невыносимым.

Кроме того, поскольку 4-й уровень навигации появляется только при наведении, если уже открыт 3-й уровень навигации, а 3-й уровень навигации появляется только при наведении, если уже открыт 2-й уровень навигации, для перемещения между страницами На 4-м уровне пользователи должны снова и снова открывать навигацию и помнить, где они щелкнули ранее, чтобы навести туннель на 4-й уровень.

В основном мы умножаем задержки и проблемы с туннелем при наведении о которых мы говорили ранее, всегда заставляя пользователей ждать появления навигации, и просим их быть очень точными в пределах коридора при наведении когда навигация действительно появляется . Вот откуда идет разочарование.

4 уровня навигации на Vodafone. Может быть хорошей идеей держать их всех видимыми, по крайней мере, на 4-м уровне. (Большой предварительный просмотр)

Если вам приходится иметь дело со сложной навигацией такого рода, возможно, стоит проверить, исчезают ли проблемы, когда используется только одно (а не два) меню наведения.Это меню будет немного больше и будет содержать все параметры в столбцах. Или, если возможно, для каждой категории рассмотрите возможность отображения всех параметров навигации в этой категории в виде постоянной панели навигации (боковой панели или закрепленной верхней панели) — обычно это должно полностью устранить все эти проблемы.

Заголовки категорий выполняют слишком много функций

Как мы видели ранее, иногда заголовки категорий имеют две разные функции . С одной стороны, название каждой категории может быть связано со страницей категории, чтобы клиенты могли щелкнуть по ним, чтобы перейти прямо на страницу.С другой стороны, они также могут открыть мега-раскрывающийся оверлей. Таким образом, если пользователь наводит курсор на заголовок в течение достаточно долгого времени, откроется мега-раскрывающийся список, но пользователь мог уже щелкнуть ссылку, и это вызовет мерцание. Клиентам трудно иметь правильные ожидания, когда интерфейс на самом деле не дает никаких подсказок.

В одном из предыдущих дизайнов The Guardian была ссылка «Спортивный дом» в раскрывающемся списке. (Большой предварительный просмотр)

Есть несколько вариантов решения этой проблемы:

  1. Чтобы указать, что заголовок категории является ссылкой, может быть полезно подчеркнуть его,
  2. Чтобы сделать различие между заголовком категории и раскрывающийся список более очевиден, добавьте вертикальный разделитель (например,грамм. вертикальная линия) и значок (шеврон),
  3. Оставьте название категории, открывающее только мегараскрывающийся список, и добавьте ссылку на раздел «Главная» категории в мегараскрывающемся списке. Это также может быть заметная кнопка «Просмотреть все варианты» (см. пример The Guardian выше).

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

В первом случае обычно ожидается открытие выпадающего списка, а во втором — появление страницы категории. Что еще более важно, они, кажется, ожидают, что меню откроется при нажатиях/щелчках, а не при наведении .

Mailchimp — хороший пример мегараскрывающегося списка, который позволяет избежать большинства проблем, описанных выше, а заголовки категорий действуют только для открытия мегараскрывающегося списка.Выпадающий список доступен для пользователей клавиатуры со стилем :focus . После выбора каждая категория подсвечивается как с подчеркиванием , и некоторые люди могут предположить, что заголовок превратился в ссылку, особенно потому, что подчеркивание точно такое же, как и для ссылки «Цены» в верхней части навигации. Возможно, выделение его фоновым цветом было бы немного более пуленепробиваемым. Отличный справочный пример для всплывающих меню.

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

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

Тем не менее, было бы неплохо проверить, остаются ли время взаимодействия и рейтинг кликов неизменными (или увеличиваются), если навигация с наведением заменена навигацией касанием/кликом . На самом деле, большинство проблем, перечисленных выше, можно легко решить, сделав именно это: мегараскрывающийся оверлей будет открываться и закрываться только тогда, когда пользователь явно запрашивает это конкретное действие.Следовательно, нет необходимости отслеживать указатель мыши или настраивать задержки входа/выхода при наведении. Кроме того, поскольку в любом случае на мобильных устройствах нет наведения, нам нужно предоставить возможность открывать меню при касании/щелчке для мобильных устройств тем или иным способом, поэтому мы можем просто оставить его таким же и для больших экранов.

Хорошим примером этого в действии является веб-сайт Еврейского музея в Берлине. Не только верхняя панель навигации открывает мега-выпадающие меню при касании и щелчке, но и навигация на боковой панели на основе значков.Кроме того, поскольку пользователь должен активно открывать/закрывать оверлей, мы можем выделить выбранную категорию с помощью стилей :focus / :active .

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

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

Если у вас немного больше навигации, более продвинутым примером является Allianz.de. Вместо того, чтобы использовать один большой мегараскрывающийся оверлей, вложенная навигация сгруппирована в более мелкие раскрывающиеся списки. Однако в меню не всегда отображаются все параметры для каждой категории. Вместо этого он выделяет наиболее важных параметров со ссылкой для просмотра всех параметров внизу.Единственная деталь, которая может отсутствовать, — это шеврон, указывающий, что выпадающее меню появится при щелчке.

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

Кажется, все в порядке. Группа аккордеонов с отступами и хорошим типографским/цветовым контрастом на Allianz.де. (Большой предварительный просмотр)

Если вы ищете техническую реализацию, вы можете проверить In Praise of the Unambiguous Click Menu, в котором Марк Рут-Вили показывает, как создать доступное меню щелчка. Идея состоит в том, чтобы начать создавать меню как всплывающее меню только с помощью CSS, которое использует li:hover > ul и li:focus-within > ul для отображения подменю.

Затем мы используем JavaScript для создания элементов

Пример 3

Попутный ветер Выпадающие списки переходов продолжительности CSS при наведении сверху с Alpine js v3

 

  <голова>
    <метакодировка="UTF-8" />
    
    
    <скрипт отложить src="https://unpkg.com/[email protected]/dist/cdn.min.js">
  
  <тело>
      
    <дел>
        
<кнопка @mouseover="открыть = истина"> Раскрывающееся меню
<а href="#" > Выпадающий список 1 <а href="#" > Выпадающий список 2 <а href="#" > Выпадающий список 3 <а href="#" > Выпадающий список 4

Пример 4

Попутный ветер Значок перехода CSS Раскрывающиеся списки слева Hover с Alpine js v3

 

  <голова>
    <метакодировка="UTF-8" />
    
    
    <скрипт отложить src="https://unpkg.com/[email protected]/dist/cdn.min.js">
  
  <тело>
      

    <дел>
        
<кнопка @mouseover="открыть = истина"> <дел х-шоу = "открыть" x-transition.scale.origin.right > <а href="#" > Выпадающий список 1 <а href="#" > Выпадающий список 2 <а href="#" > Выпадающий список 3 <а href="#" > Выпадающий список 4

Пример 5 (рекомендуется)

Tailwind CSS Transition Dropdowns on left Hover with Alpine js v3.2/dist/tailwind.min.css" rel="stylesheet"> <скрипт отложить src="https://unpkg.com/[email protected]/dist/cdn.min.js"> <тело> <дел>

<кнопка @mouseover="открыть = истина"> Кнопка раскрывающегося списка
<а href="#" > Выпадающий список 1 <а href="#" > Выпадающий список 2 <а href="#" > Выпадающий список 3 <а href="#" > Выпадающий список 4
.

Добавить комментарий

Ваш адрес email не будет опубликован.