Menu fs + - створюємо меню з картинками і описом на joomla

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

Компонент і модуль є комерційними додатками, придбати їх можна тут: https://fs-p.ru
Почати розповідь про створення меню з картинками і описом, я б хотів з демонстрації оного. Бо так буде більш зрозумілий сенс роботи наших розширень. Хотілося б звернути вашу увагу на наступний сайт - https://starye-gody.ru/
У центральній частині сайту розташоване меню, де ми можемо побачити в лівій частині невелику картинку, праворуч від зображення перебувають заголовок меню і короткий опис. Слід зазначити, що при наведення курсору мишки на текст або зображення, малюнок змінюється, що надає меню особливу привабливість.
Настав час зайти в адміністративну панель сайту і подивитися: як же працює наш компонент.
Я пропоную почати з нечисленних налаштувань нашого компонента. Для цього заходимо в Головне меню - Компоненти - Menu FS + -Settings

Нам відкриється нова сторінка, де ми отримуємо можливість встановити шлях до папки з картинками. Справа в тому, що компонент буде опитувати на наявність файлів з зображеннями одну єдину папку, шлях до якої ми і повинні прописати в відповідне поле:

У моєму випадку цей шлях виглядає, як «/ images / MENU /». Тобто, тепер ми зобов`язані завантажувати файли через фтп менеджер саме сюди. Для тих, хто до сих пір не в курсі, що таке фтп і як з ним працювати, я рекомендую прочитати цю статтю

Відео: 11. Створюємо модуль меню

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

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

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

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

Предлагаю детально розглянути ці елементи і розшифрувати їх значення.

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

опис - саме сюди ми вводимо той короткий текстовий опис, що буде відображатися під заголовком меню, зліва від картинки.
Після того, як всі необхідні настройки зроблені, в правому верхньому кутку натискаємо кнопку «Зберегти» і переходимо до наступного, дуже важливого етапу налаштування нашого меню - налаштування публікації його на сайті.
Далі наше завдання відкрити для редагування модуль, який відповідає за публікацію нашого меню на сайті. Для цього заходимо в головне меню Модулі - Модулі сайту

Знаходимо модуль під назвою «MenuFS»

....І клацаємо по його назві.
Відкриється вікно, де ми одержуємо можливість налаштувати, що зовнішній вигляд модуля, так і його розташування на сторінках нашого сайту.

Почнемо з останнього. Якщо ви читали попередні мої статті, то повинні пам`ятати, що розташування модулів на сайті можна дізнатися, додавши в адресному рядку браузера до доменного імені сайту вот такой вот текст: index.php? Tp = 1
У випадку з Ячайніком все це справа буде виглядати наступним чином:
https://yachaynik.ru/index.php?tp=1
Після переходу за цим посиланням, можна побачити розташування всіх модулів на сайті і в результаті вибрати відповідний для публікації нашого меню. У моєму випадку було вибрано місце розташування «advert2».
Наступний важливий пункт - прив`язка модуля до певного меню. Ми пам`ятаємо, що в рамках цієї статті, ми налаштовували меню під назвою «MenuGlavnaya», тому в випадаючому списку «Ім`я меню», ми зобов`язані вибрати саме його.
Перемикач "Розташування картинок меню» ми виставляємо в положення "Зліва». Саме в такому випадку наше зображення буде стояти зліва від тексту і заголовка меню.
Ширина і Висота в пікселях - цей параметр має пряме відношення до нашого зображення. Хочеться звернути вашу увагу на те, що даний параметр повинен (принаймні по ширині) збігатися з параметрами завантажених зображень. Тільки в такому випадку можна гарантувати коректне відображення малюнків в меню.
Далі хотілося б звернути вашу увагу на нижню частину сторінки з настройками модуля. Початківці користувачі, можливо, прийдуть в жах при вигляді цих незрозумілих символів. Насправді ті, хто знайомий з каскадними таблицями стилів відразу зрозуміють - у чому тут справа.

Відео: Красиве меню для joomla сайту Art Wijmo Menu

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

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

Як ми бачимо, нічого складного в налаштуванні даних модулів немає. Понад те, завдяки можливості подібної настройки, ми отримуємо можливість досить гнучко Налаштуйте зовнішній вигляд нашого меню
На цьому хотілося б завершити цей короткий огляд по компоненту і модулю Menu FS + і випити чашку міцної кави.

З повагою, Гоша Комп`ютерний