-
Опубликовано: 02 Август 2017
Выезжающие вкладки на сайте и меню аккордеон позволят “добавить динамики” на сайт. Благодаря специальным разрешениям сделать это совсем не сложно.
Рассмотрим на примере сайта, установленного на хостинг https://s-host.com.ua/, как это сделать.
Создание выезжающих вкладок
Скачайте простой, но при этом очень функциональный модуль Flyout Tabs и установите его на странице "Расширения"/"Менеджер расширений"/"Установить". Загрузите файл на вкладке "Загрузить файл пакета" и дождитесь, пока не появится сообщение об успешной установке.
Настройка модуля
Откройте раздел админки "Расширения"/"Менеджер модулей", чтобы включить и настроить Flyout Tabs:
-
на вкладке “Модуль” нужно выбрать, показывать ли заголовок, установить позицию и выбрать “Опубликовано” в поле “Состояние”;
-
на вкладке "Привязка к пунктам меню" укажите страницы, на которых должны размещаться выезжающие вкладки.
-
на вкладке Style Settings выберите расположение вкладок на сайте (Tabs position), цвета, ширину и высоту вкладок (Flyout Tabs Width и Flyout Tabs Height) и пр.:
На вкладке Tab Settings настраиваются непосредственно выезжающие вкладки. Обратите внимание на следующие детали:
-
модуль позволяет добавлять не более 15 вкладок;
-
вы можете использовать свои иконки (подготовьте их заранее и загрузите в отдельную папку в медиа-менеджере — так их проще найти).
Для того, чтобы добавить вкладку, заполняются такие поля как:
-
Add text to this tab? (при выборе Yes (добавить текст) появляются дополнительные поля для заполнения: Title for Tab 1, Left-Right title position, Top-Bottom title position и Title color):
-
Image path for Tab 1 (нажмите “Выбрать”, чтобы загрузить иконку);
-
Hyperlink for Tab 1 (впишите URL страницы, на которую должны попадать пользователи при нажатии на вкладку);
-
Link Behaviour (выберите формат открытия ссылки: в том же окне, в новом и пр.);
-
Width of URL и Height of URL (ширина и высота):
Настройте нужное количество вкладок, а затем проверьте, как они отображаются на страницах сайта:
Создание меню аккордеона
Скачайте расширение Accordeon Menu CK и перейдите в раздел админки "Расширения"/"Менеджер расширений"/"Установить", чтобы добавить его: выберите вкладку "Загрузить файл пакета" и загрузите модуль.
После установки Accordeon Menu CK на странице "Расширения"/"Менеджер модулей" появится одноименный пункт. Кликните на него, чтобы перейти к настройкам.
Настройка модуля
В первую очередь выберите “Опубликовано” в поле “Состояние” и присвойте модулю позицию, а затем переходите к остальным параметрам:
-
на вкладке “Модуль” выберите меню, базовый элемент, стартовый и финальный уровни, определитесь с выравниванием изображений и пр.:
-
на вкладке “Привязка к пунктам меню” выберите страницы, на которых будет отображаться меню;
-
на вкладке “Дополнительные параметры” настройте кэширование, HTML-тег заголовка и др.;
-
на вкладке Effects выберите, как будет открываться меню (при наведении или при клике), укажите скорость открытия элементов:
на вкладке Styles настройте стили;
на вкладке Menu styles настройте внешний вид меню: поля, фон, закругление углов, тень, границы:
-
во вкладках First level link style, Second level link style и Other level link style настраивается внешний вид ссылок меню:
Вывод меню на сайт
Сохраните настройки и перейдите в раздел "Расширения"/"Менеджер модулей" и выключите Main Menu, оставив при этом активным только Accordeon Menu CK. Как вы могли заметить, после установки движка на хостинг меню на сайте выглядит стандартно, однако после установки и настройки модуля оно преображается в лучшую сторону: