Автоматическое скрытие выпадающего меню в навигации

Заставляем выпадающее меню автоматически скрываться через некоторое время.

  1. Next
    Совместимость с XenForo:
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    До недавнего времени текущая работа навигации в XenForo меня вполне устраивала, однако так сложилось, что мне пришлось взяться за нестандартный стиль, где одной из "фишек" была как необычная навигация и стандартный подход: "навёлся, открыл, кликнул, закрыл" для стиля не подходил.

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

    Примечание: правка применяться ко всем всплывающим элементам на форуме. Сделайте бекап xenforo.js до внесения в него изменений. Всё что вы делаете, вы делаете на свой страх и риск. Меню может иногда не скрываться(во всяком в моих тестах было пару раз), лечение или другого варианта не знаю.

    Открываем xenforo.js и ищем в нём:
    Путь: js/xenforo/xenforo.js

    Код:
    if (!XenForo.isTouchBrowser())
    {
          this.$clicker.mouseover($.context(this, 'controlHover')).hoverIntent(
                    {
                        sensitivity: 1,
                        interval: 100,
                        timeout: 0,
                        over: $.context(this, 'controlHoverIntent'),
                        out: function(){}
          });
    }
    Проще всего эту часть найти по фразе $clicker.mouseover.

    Меняем значение timeout(в ms). Оптимально от 500 до 1000.
    Заменяем
    Код:
    out: function(){}
    на
    Код:
    out: c.context(this, "checkifstillhover")

    Далее смотрим где заканчивается этот блок в который мы вносили правки и ниже вставляем следующий код:

    Код:
    checkifstillhover: function (a, b) {
                if (!(this.$menu.is(":hover"))) {this._hideMenu(a, !b)}
            },
    Для наглядности, в итоге получаем:

    Код:
    if (!XenForo.isTouchBrowser())
                {
                    this.$clicker.mouseover($.context(this, 'controlHover')).hoverIntent(
                    {
                        sensitivity: 1,
                        interval: 100,
                        timeout: 500,
                        over: $.context(this, 'controlHoverIntent'),
                        out: c.context(this, "checkifstillhover")
                    });
                }
    
                this.$control = this.addPopupGadget(this.$clicker);
    
                // the popup group for this menu, if specified
                this.popupGroup = this.$control.closest('[data-popupgroup]').data('popupgroup');
    
                //console.log('Finished popup menu for %o', this.$control);
                },
         
                checkifstillhover: function (a, b) {
                       if (!(this.$menu.is(":hover"))) {this._hideMenu(a, !b)}
                },
Поделиться этой страницей в