Как создать красивое меню с картинкой, названием и кратким текстовым описанием? Задача достаточно непростая, однако решаемая. Нашему вниманию представлены компонент и модуль с одноименным названием Menu FS+. Сегодня мы попробуем рассмотреть работу данных расширений, а также попробуем настроить собственное меню.
Прежде чем начать работу, нам необходимо установить компонент и модуль на сайт.

Компонент и модуль являются коммерческими приложениями, приобрести их можно здесь: http://fs-p.ru
Начать рассказ про создание меню с картинками и описанием, я бы хотел с демонстрации оного. Ибо так будет более понятен смысл работы наших расширений. Хотелось бы обратить ваше внимание на следующий сайт - http://starye-gody.ru/
В центральной части сайта расположено меню, где мы можем увидеть в левой части небольшую картинку, справа от изображения находятся заголовок меню и краткое описание. Следует отметить, что при наведение курсора мышки на текст или изображение, рисунок меняется, что придает меню особую привлекательность.
Настало время зайти в административную панель сайта и посмотреть: как же работает наш компонент.
Я предлагаю начать с немногочисленных настроек нашего компонента. Для этого заходим в Главное меню – Компоненты – Menu FS+ -Settings

Нам откроется новая страница, где мы получаем возможность установить путь к папке с картинками. Дело в том, что компонент будет опрашивать на наличие файлов с изображениями одну единственную папку, путь к которой мы и должны прописать в соответствующее поле:

В моем случае этот путь выглядит, как «/images/MENU/». То есть, теперь мы обязаны загружать файлы через фтп менеджер именно сюда. Для тех, кто до сих пор не в курсе, что такое фтп и как с ним работать, я рекомендую прочитать эту статью

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

Мы хотим, чтобы это меню появилось на сайте, украшенное небольшой картинкой, которая будет меняться при наведении на нее курсором мышки. Также у нас есть желание расположить под названием каждого пункта меню небольшой текстовый комментарий.
Для осуществления данной задачи мы заходим в главное меню – Компоненты – Menu FS+ - View

Нам откроется список всех существующих в данный момент на сайте пунктов меню. Однако нас интересуют только те, что принадлежат меню под названием «MenuGlavnaya».

Давайте кликнем мышкой по одному из пунктов, что принадлежит меню «MenuGlavnaya» и разберемся окончательно с настройками компонента.
После нажатия на название пункта меню, нам откроется новая страница, где можно увидеть немногочисленные и достаточно понятные элементы управления для установки настроек компонента.

Предлагаю подробно рассмотреть эти элементы и расшифровать их значение.

Картинка по умолчанию – эта картинка будет отображаться в пункте меню при открытии страницы сайта.
Картинка при фокусе - данное изображение будет отображаться, если вы навели курсор мышки либо на изображение, либо на заголовок меню или его описание
Картинка при нажатии – данное изображение будет представлено нашему взору в том случае, если мы кликнем мышкой по пункту меню
Во всех случаях картинки выбираются из выпадающих списков, что расположены напротив названия элемента управления. Файлы с изображениями должны быть загружены заранее, в тот каталог, что мы ранее выставляли в настройках компонента.

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

Находим модуль под названием «MenuFS»

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

Начнем с последнего. Если вы читали предыдущие мои статьи, то должны помнить, что расположение модулей на сайте можно узнать, добавив в адресной строке браузера к доменному имени сайта вот такой вот текст: index.php?tp=1
В случае с Ячайником все это дело будет выглядеть следующим образом:
http://www.yachaynik.ru/index.php?tp=1
После перехода по данной ссылке, можно увидеть расположение всех модулей на сайте и в результате выбрать подходящий для публикации нашего меню. В моем случае было выбрано месторасположение «advert2».
Следующий немаловажный пункт – привязка модуля к определенному меню. Мы помним, что в рамках этой статьи, мы настраивали меню под названием «MenuGlavnaya», поэтому в выпадающем списке «Имя меню», мы обязаны выбрать именно его.
Переключатель «Расположение картинок меню» мы выставляем в положение «Слева». Именно в таком случае наше изображение будет стоять слева от текста и заголовка меню.
Ширина и Высота в пикселях – этот параметр имеет прямое отношение к нашему изображению. Хочется обратить ваше внимание на то, что данный параметр должен (по крайней мере по ширине) совпадать с параметрами загруженных изображений. Только в таком случае можно гарантировать корректное отображение рисунков в меню.
Далее хотелось бы обратить ваше внимание на нижнюю часть страницы с настройками модуля. Начинающие пользователи, возможно, придут в ужас при виде сих непонятных символов. На самом деле те, кто знаком с каскадными таблицами стилей сразу поймут – в чем тут дело.

Четыре текстовых поля служат для введения определенных параметров, которые будут отвечать за внешний вид нашего меню. Предлагаю разобрать то, что написано в блоке под названием «Стиль описания опции меню».

font-weight:normal; - ширина шрифта без изменений
color:#E8E8E8; - здесь выставляется цвет шрифта текста
background-color:#262626; - данный параметр отвечает за цвет фона
padding-left:25px; - отступ с левого края
text-align:justify; - благодаря данному параметру текст комментария в меню выравнивается по ширине

Как мы видим, ничего сложного в настройке данных модулей нет. Более того, благодаря возможности подобной настройки, мы получаем возможность достаточно гибко настройть внешний вид нашего меню
На этом хотелось бы завершить сей краткий обзор по компоненту и модулю Menu FS+ и выпить чашку крепкого кофе.

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