OJS 3: выпадающее меню в сайдбаре

Уважаемые коллеги, в данном материале мы расскажем о том, как можно сравнительно быстро и просто добавить на сайт Open Journal Systems 3 красивое выпадающее меню.

Меню можно отобразить в боковой панели сайта (сайдбаре). Хорошо подойдет для архива, политик журнала или размещения любой другой информации на всех страницах сайта. Подойдет для базового шаблона OJS.

Образец меню Вы можете посмотреть на одном из наших сайтов.

1. Загружаем файл JS со скриптом

Вначале нужно взять файл menu.js и поместить в директорию «js» вместе с остальными скриптами. Директория находится в корне сайта. В результате должен получиться такой путь к файлу js/menu.js

Далее устанавливаем из галереи плагинов OJS Custom Header Plugin

Для этого в административной панели OJS идем: Settings >>> Website >>> Plugins >>> Plugin Gallery… нажимаем на название плагина и во всплывающем окне кнопку Install

Далее идем на страницу со всеми установленными плагинами Settings >>> Website >>> Plugins, находим и активируем Custom Header Plugin. После этого нажимаем треугольник и Settings…

Будет всплывающее окно. В нем нужно прописать следующий код:

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script src="https://abg-journal.com/js/menu.js"></script>

Вместо abg-journal.com нужно прописать Ваш сайт.

2. Добавляем HTML код в боковую панель

Код для меню в боковой панели можно взять из файла menu.html. Ссылки и названия элементов меню — заменить на собственные. Ниже представлена html разметка для меню в боковой панели:

<div id="cssmenu">
<ul>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/archive">ARCHIVE</a></li>
<li class="active has-sub show"><a href="#">2018</a>
<ul>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/view/6">Vol 56 (2018)</a></li>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/view/5">Vol 55 (2018)</a></li>
</ul>
</li>
<li class="active has-sub show"><a href="#">2017</a>
<ul>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/view/vol54">Vol 54 (2017)</a></li>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/view/vol53">Vol 53 (2017)</a></li>
</ul>
</li>
<li class="active has-sub show"><a href="#">2016</a>
<ul>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/view/vol52">Vol 52 (2016)</a></li>
<li class="show"><a href="https://abg-journal.com/index.php/journal/issue/view/vol51">Vol 51 (2016)</a></li>
</ul>
</li>
<li class="last show"><a href="https://abg-journal.com/index.php/journal/issue/archive">ALL ARCHIVE</a></li>
</ul>
</div>

Код HTML добавляется в пользовательский блок. Для этого идем: Settings >>> Website >>> Plugins >>> Custom Block Manager… нажимаем Manage Custom Blocks

Добавляем новый блок — Add Block, в который вносим сформированный HTML код и сохраняем результат.

Для каждой языковой версии сайта можно сделать отдельный блок с элементами меню на локальных языках.

3. Добавляем стиль CSS для оформления меню

Чтобы придать нашему меню красивый внешний вид, нужно воспользоваться файлом menu.css. Код из этого файла можно добавить в пользовательскую таблицу стилей прямо из административной панели OJS. Для этого идем Settings >>> Website >>> Appearance. Находим блок Journal style sheet и загружаем файл menu.css с Вашего ПК.

Если Вы уже внесли какие-нибудь пользовательские стили оформления сайта, то вместо прямой загрузки файла нужно взять из него код и добавить к существующему файлу styleSheet.css.

Чтобы быстро перекрасить меню в другой цвет (сейчас — зеленый), нужно найти и заменить значение background всего в трех строках:

одно значение для строки с цветом:

background: #298a32;

и два значение для строк с цветом:

background: #2d9637;

---

Результат

---

Данный материал был сделан на основе TUTORIAL ANIMASI MENU OJS 3.1

Благодарим автора Ade Cahya, S.Kom за исходники. С уважением. Участники проекта OSU.