Как сделать закрепленное меню (шаблоны YOOtheme — YOO Eat Theme)

Шаблоны разработчика YOOtheme достаточно популярны у вебмастеров. Тем не менее, традиционно, все в Joomla приходится «допиливать» в «ручном режиме».

При использовании шаблона YOO Eat столкнулся с проблемкой: заказчик жаждет иметь на своем сайте «закрепленное» меню, а в шаблоне данный функционал предусмотрен, но не реализован. По счастью, я не первый и не последний столкнулся с данной проблемой. В Интернет есть решение поставленной задачи.

Но: на английском и не совсем корректно изложен материал: важна версия фреймворка, на которой работает админпанель шаблона. Стоит обновиться перед началом работы (на день публикации это Warp Framework 7.3.36., по ссылкам — архивы: Uikit 3.0.3. и Warp Framework 7.3.36.). Процесс обновления обычный, не будем на этом останавливаться.

Переходим сразу к созданию «закрепленного» меню, пошагово.

Шаг 1

Открываем файл по адресу: мойсайт.ru/templates/yoo_eat/config.xml

Прописываем в админпанели шаблона функцию «закрепления» меню в виде чекбокса следующим образом:

        <field type="section" name="Navigation" description="Enable the fixed Navigation." />
        <field type="checkbox" name="fixed_navigation" value="1" label="Fixed Navigation." />

Я лично добавил эту опцию перед функцией Insert your Google Analytics (примерно на 53-й строке файла), но место можно, понятно, выбрать любое удобное.

Шаг 2

Открываем файл: мойсайт.ru/templates/yoo_eat/layouts/theme.php

Находим в нем строку: <div class="tm-top-block tm-grid-block">

Добавляем код, получая в итоге:

   <div class="tm-top-block tm-grid-block">
   <?php if ($this['widgets']->count('menu + search')) : ?>
   <nav class="tm-navbar uk-navbar" <?php if ($this['config']->get('fixed_navigation')) echo 'data-uk-sticky'; ?>>

Возможно эти строки уже прописаны. Зависит от степени «поломки» шаблона и его версии.

Шаг 3

Подключаем скрипт для реализации функции. Для этого:

Открываем файл: мойсайт.ru/templates/yoo_eat/layouts/theme.config.php

Добавляем строчку кода:

$this['asset']->addFile('js', 'warp:vendor/uikit/js/components/sticky.js');

В блок под комментарием: // add scripts, (примерно 116-я строка).

Шаг 4

Открываем файл: мойсайт.ru/templates/yoo_eat/less/uikit/uikit.less

Добавляем строчку кода:

  @import "../../warp/vendor/uikit/less/components/sticky.less";

В блок под комментарием: // Components: JavaScript, (примерно 17-я строка).

Шаг 5

Прописываем нужные стили в файл: мойсайт.ru/templates/yoo_eat/css/custom.css

  [data-uk-sticky].uk-active.tm-navbar {z-index: 1000;}

Возможно, что-то еще придется дописать в css, мне «сошло и так».

Шаг 6

Заходим в админпанель шаблона и, в настройках Settings, — включаем «флаг»: Fixed Navigation.

Если все вышеизложенное реализовано аккуратно, то меню станет «закрепленным». У меня лично — заработало. Удач.

PS: Шаблоны YOOtheme крайне востребованы и все работают на том же Warp. Очевидно, что «метода» подойдет и для иных шаблонов. С поправками на классы меню.

Ссылка на первоисточник: YOOtheme.