Как сделать закрепленное меню (шаблоны 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.
Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.