Сообщений в теме: 2

[badisoft]

А кто как выходит из ситуации, когда hover в принципе не применим в силу отсутствия курсора мыши как такового?
Куча всяческих меню и прочих красивых выпадающих при наведении мыши каталогов теряют свою функциональность.

Опознать устройство без мыши относительно легко. Эстеты типа меня могут использовать развесистую библиотеку WURFL (или сервис Яндекса, кстати!), а практики - любую из имеющихся в интернете функций типа is_mobile(), закрывающую вопрос на 99%.

А дальше-то что делать? У меня пока идея очень тупая - в случае элемента, для которого в "нормальном" виде существует и hover, и onclick по первому onclick эмулировать hover, а только по второму выполнять нормальный onclick. Т.е. если штатно по ховеру на категории вываливается список подкатегорий, а по клику происходит переход в эту категорию, то на планшете первый клик должен вызывать эмуляцию ховера и только второй (на той же категрии) - переход в категорию.

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

[Dbus]

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

[badisoft]

Практика (краткое описание идеи, использованной в уже реализованной конкретике):
1. заводим, например, в core/includes файлик is_mobile.php с примерно таким содержимым:

<?php

function is_mobile()

{

#тут возвращающая true/false функция, определяющая с какого устройства на сайт зашли

}

$smarty->assign('is_mobile',is_mobile());

?>

Это поможет в дальнейшем грузить один из двух вариантов JS-библиотеки - под планшет и обычный.

2. обязательно по {if $is_mobile} добавляем в штатно выпадающие по ховеру подменю пункт (кнопку, иконку) "Закрыть". Само-то оно на планшете не закроется .

3. вместо обработки ховера (в моем случае это были .mouseenter и .mouseleave) делаем обработку .click(), причем так, чтобы первый клик на категории открывал список подкатегорий (подменю), а только второй вызывал штатный переход в эту категорию. Тут вариантов исполнения много. Я в ссылки категорий первого уровня поставил onclick="return false;", а по .click() меняю для кликаемой категории на "return true;". Таким образом при втором клике на категории первого уровня происходит уже не открытие подменю (оно и так открыто), а переход в категорию первого уровня.

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


PS. Конкретику могу выложить, но врядли она интересна, т.к. это чей-то явно заказной модуль new_cat_tree_menu.tpl.html + cat_menu.js + css