Меню sidebar - как сделать его вывод при клике по нему, а не при наведении Есть решение

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

Помогите перевести sidebar на вызов по клику

15 ответов

  • 1
    Markus 6 августа 2015 03:35 #

    Потому что в мобильной версии нет события over, так как нет мыши. Там есть события touchstart, touchned и т.д. Поэтому надо проверять, если это мобильное устройство то открывать блок с категориями по клику, в противном случае по ховеру

    • +1
      Роман Петунин Роман Петунин 6 августа 2015 04:30 #

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

  • 1
    Markus 6 августа 2015 04:40 #

    я же не вижу ваш код. Как я могу сказать?. Вы бы хоть ссылку на сайт показали

  • 1
    Markus 6 августа 2015 05:05 #

    блин без поллитры не разберешь. Зачем надо было под иконку отдельный блок ставить и вешать событие на LI а не на ссылку.

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

    • +1
      Роман Петунин Роман Петунин 6 августа 2015 05:13 #

      Сложно объяснить.. делается всё на коленке.. без понятия и знания 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>

      • +1
        Markus Markus 6 августа 2015 05:21 #

        Для начала в HTML кода может быть только один элемент с ID iconsetings. ID это уникальный идентификатор

        • +1
          Роман Петунин Роман Петунин 6 августа 2015 05:28 #

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

          Или имеется ввиду, что мне нужно поменять с id на class. а сами иконки облачить в id, так как у них разные наименования?

  • 1
    Markus 6 августа 2015 05:41 # Решение

    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;

    }

  • 1
    Markus 6 августа 2015 05:44 # Решение

    Сначала добейтесь правильного отображения.

    потом в 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;

    });


    };

  • 1
    Markus 6 августа 2015 06:46 #

    Проще заплатить я думаю.

    • +1
      Роман Петунин Роман Петунин 6 августа 2015 07:03 #

      В любом случае тебе спасибо за труд..

      Тут ведь всего поменять принцип вывода. Не уч то здесь дел столько?

  • 2
    Markus 6 августа 2015 07:04 # Решение

    в моем коде замените var $li = $(this), на var $li = $(this).parent("li"),

  • 1
    Роман Петунин 6 августа 2015 07:37 #

    Спасибо, ты помог.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите