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

Заставляем выпадающее меню автоматически скрываться через некоторое время.
Совместимость с 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)}
            },
Автор
Next
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Next