Каталог на планшете с большим разрешением
Добавлено: 25.04.2018, 20:47
В стандартном шаблоне, если зайти на планшете с разрешением больше чем 992px, меню каталога остается десктопное. А оно построено на hover, что делает его полностью не функциональным на тач-устройствах.
Данное решение позволяет эмулировать наведение мышки (hover) при первом касании экрана, а при втором ведет себя как обычный клик мышкой. Таким образом можно открыть многоуровневое десктопное меню на планшете.
1) Файл design/okay_shop/html/categories.tpl
после строки
вместо
пишем
2) Файл design/okay_shop/js/okay.js
После
добавляем
3) Файл design/okay_shop/css/responsive.css
Строка 416 вместо
пишем
4) Файл design/okay_shop/css/style.css
Строка 672 вместо
пишем
Данное решение позволяет эмулировать наведение мышки (hover) при первом касании экрана, а при втором ведет себя как обычный клик мышкой. Таким образом можно открыть многоуровневое десктопное меню на планшете.
1) Файл design/okay_shop/html/categories.tpl
после строки
Код: Выделить всё
{if $c->subcategories && $c->has_children_visible}вместо
Код: Выделить всё
<li class="category_item">пишем
Код: Выделить всё
<li class="category_item has-child">2) Файл design/okay_shop/js/okay.js
После
Код: Выделить всё
// Выпадающие блоки
$('.fn_switch').click(function(e){
.....
});добавляем
Код: Выделить всё
$('ul li.category_item.has-child').on("touchstart", function (e) {
'use strict'; //satisfy code inspectors
var link = $(this);
if (link.hasClass('hover')) {
return true;
} else {
if (link.parent().is('.level_1')) {
$('ul li.category_item.has-child').removeClass('hover');
} else {
link.siblings('.hover').removeClass('hover');
}
link.addClass('hover');
e.preventDefault();
return false;
}
});3) Файл design/okay_shop/css/responsive.css
Строка 416 вместо
Код: Выделить всё
.category_item:hover > .subcategory {пишем
Код: Выделить всё
.category_item:hover > .subcategory, .category_item.hover > .subcategory {4) Файл design/okay_shop/css/style.css
Строка 672 вместо
Код: Выделить всё
.category_link:hover,
.category_link:hover .arrow_right {
color: #1480a8;
}пишем
Код: Выделить всё
.category_link:hover,
.category_link:hover .arrow_right,
.category_item.hover > .category_link{
color: #1480a8;
}