Мобильное (сенсорное) устройство, удобное выпадающее меню в css/jquery

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

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

Я видел следующий сайт и как-то их меню работает именно так: http://www.hgtv.com/ Вы можете просмотреть это на планшете и щелкнуть по главному меню, снова коснуться этого элемента, и вы узнаете, что я имею в виду.

Но как я могу найти или загрузить точную аналогичную настройку для моего собственного сайта?

Заранее спасибо

ОТВЕТЫ

Ответ 1

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

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

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

Для этого вам нужно будет добавить настраиваемое событие, например "touch" в jQuery. См. Сообщение ниже для способа сделать это:

Как распознать события касания, используя jQuery в Safari для iPad? Возможно ли это?

Ответ 2

Вот что я получил:

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

jQuery(document).ready(function(){
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
    if(isTouchDevice()) {
        // 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
        jQuery("#menu-main-menu > li > a").click(function(event) {
            // Perform a reset - Remove the "clicked" class on all other menu items
            jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked");
            jQuery(this).toggleClass("clicked");
            if (jQuery(this).hasClass("clicked")) {
                event.preventDefault();
            }
        });
    }
});

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

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

Ответ 3

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

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

При тестировании на рабочем столе я никогда не мог получить прошедшее время быстрее, чем около 150 мс между зависанием и щелчком, независимо от того, как быстро я щелкнул. При тестировании на iPad (4-й ген) прошедшее время между зависанием и щелчком всегда составляло около 7-8 мс. Поэтому я выбрал пороговое время 50 мс, чтобы щелкнуть. Функция jQuery, которую я написал, выглядит следующим образом (это предполагает стандартное меню наведения курсора вложенного списка):

  function initNav(){
    // make drop-downs work properly with touchscreens by preventing instant hover-click
    $( some_selector_for_your_top_level_list_items ).each(function(){
      var li = $(this);
      li.mouseover(function(){
        // store time of hover event
        li.data( 'hoverTime', new Date().getTime() );
      });
      li.children('a').click(function(){
        // only allow click if at least 50ms has elapsed since hover
        return ( new Date().getTime() - li.data('hoverTime') ) > 50;
      });
    });
  }

Работаю как шарм. Возможно, 50 мс могут быть слишком низкими для более медленных устройств.

Для не-JS вы по-прежнему будете иметь поведение наведения CSS по умолчанию как резерв.

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

Ответ 4

Попробуйте следующее: http://suanaikyeo.com/blog/make_dropdown/

Я уже пробовал, и он работает как для зависания, так и для события click.