Меню sidebar - как сделать его вывод при клике по нему, а не при наведении Есть решение
Весь смысл в заголовке, от себя только добавлю, что при адаптивном дизайне, когда я смотрю с мобильного сайдбар не работает так, как в default 2.0. Кликая по нему я попадаю на страницу каталога, а раньше у меня открывалось всё дерево меню.
Помогите перевести sidebar на вызов по клику
15 ответов
Потому что в мобильной версии нет события over, так как нет мыши. Там есть события touchstart, touchned и т.д. Поэтому надо проверять, если это мобильное устройство то открывать блок с категориями по клику, в противном случае по ховеру
это все понятно. Как мне назначить открытие сайдбара по клику, так сказать, чтобы было.
я же не вижу ваш код. Как я могу сказать?. Вы бы хоть ссылку на сайт показали
да, конечно, вот от он raketa.host.webasyst.com
блин без поллитры не разберешь. Зачем надо было под иконку отдельный блок ставить и вешать событие на LI а не на ссылку.
У вас на мобильном срабатывает клик по ссылке. Событие надо вешать на ссылку.
Сложно объяснить.. делается всё на коленке.. без понятия и знания html, css и в целом всего этого.
вот кусок одной категории
<li><a href="#"><div id="iconsettings"class="cat-icon-1"></div>
<span>Вытяжки</span></a>
<div class="flyout">
<div class="container">
<div class="departments">
{wa_print_tree tree=$wa->shop->categories(84, null, true,true) unfolded=true collapsible_class='collapsible' class="menu-v" elem ='<a href=":url" title=":name " class="cat-depth-:depth"><img src=":params.icon">:name.</a>'}
</div>
</div>
</div>
</li>
Для начала в HTML кода может быть только один элемент с ID iconsetings. ID это уникальный идентификатор
Да, но он ведь задает у меня стиль иконки. То есть каждый блок идет как отдельный элемент. от куда каждый блок будет знать какой стиль иконки ему брать, если он у него прописан не будет?
Или имеется ввиду, что мне нужно поменять с id на class. а сами иконки облачить в id, так как у них разные наименования?
ID должен быть уникальный, задавайте через класс. Это как урок. Теперь по вашему вопросу. Всю конструкцию вашу ссылки с фоном удалите вместо нее вставьте
<a href="#" class="iconsettings cat-icon-1">Вытяжки</a>
В CSS добавляем
a.iconsettings {
display: inline-block;
height: 32px;
line-height: 32px;
padding-left: 52px;
}
a.cat-icon-1 {
background: url('/wa-data/public/site/img/bt.png') 10px 50% no-repeat;
}
Сначала добейтесь правильного отображения.
потом в http://raketa.host.webasyst.com/wa-data/public/sit...
Замените
var bindEvents = function() { var $selector = $(".flyout-nav > li"); $selector.on("mouseenter", function() { showSubMenu( $(this) ); }); $selector.on("mouseleave", function() { hideSubMenu( $(this) ); }); $selector.on("click", function() { var $li = $(this), is_active = $li.hasClass(storage.activeClass); if (is_active) { var href = $li.find("> a").attr("href"); if ( href && (href !== "javascript:void(0);") ) { hideSubMenu( $li ); } } else { showSubMenu( $li ); } });};
на
var bindEvents = function() {
var $selector = $(".flyout-nav > li>a.iconsettings");
$selector.on("click", function() {
var $li = $(this),
is_active = $li.hasClass(storage.activeClass);
if (is_active) {
hideSubMenu( $li );
} else {
showSubMenu( $li );
}
return false;
});
};
Сделал всё как в Уроке.. пока ни как. при нажатии действий не происходит.
Проще заплатить я думаю.
В любом случае тебе спасибо за труд..
Тут ведь всего поменять принцип вывода. Не уч то здесь дел столько?
в моем коде замените var $li = $(this), на var $li = $(this).parent("li"),
Спасибо, ты помог.