Нередко владелец сайта сталкивается с достаточно серьезной проблемой. Часть требуемого контента сложно уместить в рамках веб – страницы. А хочется поместить всевозможные опросы, модули авторизации и прочий необходимый функционал на сайт. Решением в такой ситуации станет использование компонента ПМеню ФС+ . Сегодня мы рассмотрим не только возможности данного компонента, но и увидим: насколько расширяются возможности его использования в комплексе с компонентом SWMENU pro.

ПМеню ФС+ - коммерческая разработка. Приобрести его можно

на этой странице.

На сегодняшний день существует версия, как для Joomla 1.0.15 , так и для Joomla 1.5.x.x версии. Именно с последним вариантом мы и начнем работу.
ПМеню ФС+ состоит из собственно компонента и модуля, который впоследствии выводится в необходимую позицию сайта.

Принцип работы и задача на сегодня

Принцип работы ПМеню ФС+ заключается в следующем. В административной панели создаются кнопки, которые в дальнейшем посредством модуля выводятся на страницу сайта. К каждой кнопке опять же все в той же административной панели привязывается определенная позиция.

В итоге все модули, что в данный момент привязаны к заданной позиции выводятся во всплывающем меню.

Теперь, после того, как я в двух словах рассказал суть работы ПМеню ФС+, предлагаю поставить задачу и внимательно рассмотреть работу компонента на практике.
Мы должны с помощью ПМеню ФС+ и компонента SWMENU Pro создать меню, где пункты подменю будут выпадать в несколько столбиков, причем каждый столбец будет озаглавлен уникальным заголовком. Предположим, в нашем меню будет 2 пункта. Первый из которых – «Главная».

Работа с компонентом ПМеню ФС+

Для создания требуемых кнопок, мы заходим в главное меню Компоненты – Pmenu FS+ - View

Мы попадаем на новую страницу. На данный момент здесь не обнаруживается ни одной записи. И это неудивительно! Мы еще не создали ни одной кнопки. Немедленно исправляем это недоразумение.
В правом верхнем углу нажимаем кнопку «Создать».

Нам откроется страница, где у нас появляется возможность создать и настроить нашу первую кнопку.

Предлагаю подробнее рассмотреть данную страницу, ибо здесь происходит таинство создания , как собственно кнопок, так и выпадающих меню.

Заголовок - введенная в данное текстовое поле надпись, будет отображаться на нашей кнопке. Поэтому смело пишем сюда слово «Главная».

Показывать заголовок – сей незатейливый выпадающий список предлагает нам сделать выбор: а отображать ли заголовок на кнопке?

Публикация – здесь мы решаем : публиковать кнопку на сайте или нет

Позиция модулей – это, пожалуй, один из главных элементов управления данного окна. Именно здесь мы выбираем позицию, модули из которой будут выводиться во всплывающем меню под кнопкой. В нашем примере, я решил привязать к кнопке «Главная» позицию user2. Именно в этой позиции у меня находится модуль авторизации. Теперь при наведении или клике мышкой по кнопке «Главная» будет появляться окно с предложением произвести авторизацию либо регистрацию на сайте.

Вывод модулей – здесь выбираем способ вывода модулей. Например, если мы хотим разместить модули в несколько колонок, то выбираем вариант «горизонтально».

Позиция top, Позиция left – параметры выставленные здесь сообщают компоненту , где выводить всплывающее окно с модулями. Данные параметры отсчитываются от верхнего левого угла первой кнопки.

Стиль модуля, Стиль окна модулей , Стиль кнопки – сюда вводятся параметры, отвечающие за внешний вид кнопки, всплывающего окна а также модулей размещенных в этих окнах.

URL - при клике по опции – данное поле служит для ввода ссылки на ту или иную страницу. То есть, если мы введем в данное поле ссылку http://www.yachaynik.ru/ то при клике по кнопке «Главная» попадем на наш любимый сайт – Ячайник.

Картинка по умолчанию ,Картинка при фокусе, Картинка при нажатии – данные параметры позволяют заменить надпись «Главная» заранее подготовленной картинкой. Файлы изображений должны быть загружены в папку /images/stories/ Впрочем, при желании каталог хранения изображений можно изменить.

Для этого нужно зайти в главное меню Компоненты – Pmenu FS+ - Settings

И в текстовом поле «Путь к картинкам меню» изменить путь к каталогу на требуемый.

Ширина картинки, Высота картинки - высота и ширина выводимого изображения

Заголовок модулей - в каждом всплывающем окне у нас есть возможность над выводимыми модулями указать какой-то заголовок. Именно он и вводится в данное поле редактора.

Подвал модулей – это практически тоже самое, что заголовок. Разница в том, что надпись будет выводиться под модулями.

Теперь, когда введены все параметры, самое время нажать на кнопку «Сохранить» в правом верхнем углу экрана.

Подготовка к выводу меню

Мы помним, что наша первоочередная задача – создать меню, которое будет выводиться в две колонки.
Для этого заходим в «Менеджер меню» и создаем два меню. Назовем их Menu1 и Menu2. В каждом меню создаем по 4 пункта.

Теперь самое время заглянуть в компонент swMenuPro и создать два модуля меню которые будут привязаны к нашим Menu1 и Menu2. К сожалению, в рамках данной статьи я не планировал рассказать про swMenuPro. Могу лишь сказать, что возможности по настройке внешнего облика меню в этом компоненте просто огромны. Поэтому прежде чем, приступать к дальнейшей настройке нашего компонента, советую поиграться с внешним видом Menu1 и Menu2.

Оба модуля мы выводим в позицию User7. Эта позиция не прописана в шаблоне. Таким образом, наше всплывающее меню будет в своем роде уникально.
Теперь возвращаемся в административную часть компонента ПМеню ФС+. Именно туда где мы создавали кнопку «Главная». Теперь наша задача создать еще одну кнопку, при наведении на которую будет выпадать наше меню в два столбика.

Разница в настройках будет небольшая. Прежде всего, это другая позиция выводимых во всплывающем окне модулей.

Сохраняем настройки.
Настало время заглянуть в модуль ПМеню ФС+, где мы произведем окончательную настройку вывода наших двух пунктов меню

Настройка модуля ПМеню ФС+

Заходим в главное меню Расширения – Менеджер модулей

Кликаем по модулю PosMenuFS и попадаем на страницу его настроек.
Обращаем внимание на правую часть модуля – параметры:

Разберем же подробнее элементы управления данным модулем:

• Menu style – данный выпадающий список предлагает выбрать нам: как будут располагаться кнопки. Горизонтально или вертикально.
• Effect open window – выключение данного эффекта заставит выплывающие окна с модулями появляться без эффекта медленного появления.
• Effect speed – А здесь как раз устанавливается скорость появления окна. ( Slow – медленно, Fast – быстро)
• Open window – здесь мы выставляем событие после которого появляется всплывающее окно (Mouse Focus – при наведении курсора мышки, Mouse Click - при клике мышкой по кнопке)
• Delay close window – задержка перед закрытием окна
• Opacity window – прозрачность всплывающего окна
• Module style – стиль модуля

Заключение

В заключение я хотел бы продемонстрировать результат нашей с вами работы.
Итак, кнопка «Главная» при наведении на нее будет выглядеть вот так:

А вот второй пункт меню у нас будет выглядеть следующим образом:

Как мы видим, задача решена, и мы создали достаточно уникальное меню. На этом хотелось бы сказать вам: до свидания! Творческих успехов!

С уважением, Гоша Компьютерный