Як зробити меню в Joomla, три способи створення меню в Joomla. Створення меню Змінюю назву меню в мобільній версії

Представляємо нову версію приголомшливого та багатофункціонального модуля вертикального меню Vertical menu 4.0.270. Це відмінне і багатоцільове рішення для виведення меню Joomla або відображення меню і категорій інших популярних додаткових компонентів. Модуль повністю Seo оптимізований і має просту в налаштуванні адміністративну панель управління, де можна робити налаштування колірної схеми і тем оформлення, налаштування типографіки, джерел меню, що відображається, і багато іншого.

AP Accordion Menu v3.4 – акордеон меню для Joomla

Представляємо простий модуль вертикального акордеон меню AP Accordion Menu v3.4. Це розширення Joomla дозволяє створювати будь-яку кількість підпунктів меню та підтримує функції клацання або зависання для активації меню, додавати класи іконок, субтитри для заголовків та зображення. Ви можете налаштувати необмежену кількість колірних комбінацій або використовувати 3 підготовлені та вбудовані теми оформлення. У модулі використовується варіант налаштування "Макет" та "Налаштування".

Ajax Scroll v1.6 - скролінг для Joomla

Quix Pagebuilder Pro - професійний та один з кращих конструкторів сторінок для Joomla 3. дане розширення дозволяє реалізувати сучасні сайти без необхідності виправлення css коду та кодування. Вам просто необхідно вибрати готовий відповідний макет і почати побудову використовуючи інтерфейс Drag & Drop. З функціоналу можна підкреслити повну SEO оптимізацію створених сторінок, зручність для розширення та розробників, наявність більше 30 елементів для швидкого створення сайтів, підтримка гугл шрифтів, наявність власного медіаменеджера, велика колекція фото та ін.

Offlajn Vertical Menu v3.1.201

Offlajn Vertical Menu v3.1.201- один із найбільш функціональних та універсальних модулів Joomla призначених для швидкої побудови та оформлення будь-яких типів вертикального меню. Розширення можна використовувати з будь-якими шаблонами. Можна реалізувати акордеонне меню, спливаюче меню, деревоподібне меню та DropMenu. Також можна робити бічні панелі. Також можна відзначити повністю настроювану анімацію переходів, створення меню накладання, відображення фільтра пунктів, відображення логотипів користувача, вставку більше 220 іконок, підтримку інших компонентів і багато іншого.

Компонент меню swMenuPro 10

swMenuPro v10.7 - новий випуск одного з найпотужніших розширень Joomla, призначених для створення практично будь-якої структури та типів меню. За допомогою даного компонента можна швидко зробити чотири види спливаючого або випадаючого меню, три види меню типу акардеон (можна робити комбіноване, динамічне або багаторівневе меню). Також можна реалізувати багатоколонне або деревоподібне меню. У новій версії розробники додали можливість перенесення стилів на інші сайти, підключати до пунктів картинки, редагувати градієнти, фон, тіні, кути та шрифти.

Для сайту будь-якого рівня має велике значення те, наскільки добре скомпонований його стиль, як усе «склеєно». Але в наступну хвилину, дизайн відходить на інший план, оскільки набагато важливіше стає те, наскільки зручно організований інтерфейс ресурсу, як розподілені матеріали, наскільки велика ймовірність того, що за допомогою меню можна дістатися будь-якого розділу. І тоді сам власник проекту вже повинен думати про те, а чи дійсно, яке пропонує розробник шаблону настільки зручне, чи правильно і комфортно працювати з пошуком матеріалів, чи є поділ тих же статей за категоріями? Якщо цей аспект не доводити спочатку до ідеалу, можна втратити тих відвідувачів, які дійсно могли б принести вам прибуток, але просто не захотіли мати справу з непрофесійним ресурсом, оскільки в іншому випадку організація навігації по сайту була б зовсім іншого рівня. Але не треба думати, що тільки надані в Joomla шаблон менюінструменти, стають тією межею, з якою доведеться працювати. Для вдосконалення структури та навігації вашого проекту можна легко використовувати розширення, наприклад Joomla модуль меню, здатні внести дуже значні зміни до цього сегменту.

Конкретні пропозиції щодо доопрацювання меню

Що ж нам можуть запропонувати розширення, що знаходяться у цій категорії? Насамперед – це різноманітні меню. Найцікавіше, що розробники дбають не лише про зручне налаштування та роботу цих рішень, а ще й про те, як вони виглядають. Для цього застосовується анімація, надаються добірки кольорів, різноманітних шрифтів для меню, а також для них готуються набори іконок. Що ще краще, тут ви знайдете варіанти з підтримкою різної кількості рівнів, а це вже відкриває дорогу до створення серйозних навігаційних систем, завдяки яким можна через один Joomla пункт меню, потрапити до будь-якого розділу сайту, або навіть якоїсь категорії. Ще цікавішими є варіанти з використанням зображень, які символізують кожен пункт меню, такі доповнення вже є у списку наявних у нас. Вибирайте Joomla випадаюче меню, спеціальні мега - меню, з величезними можливостями, а також акордеон - меню Joomla 3 , що імітують згортання звичайного акордеону для розміщення вмісту. Але, крім таких пропозицій, ця категорія має ще чимало цікавих розробок.

Створення категорій та іншого

Само собою, що використовуючи різні тематичні напрями, потрібно забезпечувати відвідувачам прямий доступ до потрібних матеріалів, причому бажано зробити кожну категорію, що відповідає її наповненню. Якщо формат, в якому ваш стандартний інтерфейс виводить категорії, вам не подобається, можна використовувати відповідні розширення. Для цього у нас ви знайдете рішення, що виводять категорії у вигляді, подібному до випадаючого меню, ті, які спеціально встановлюються для співпраці з К2, або просто організовують зручний доступ до добірок контенту, що відповідає певній темі. У результаті навіть вам буде комфортніше працювати зі своїм проектом, спочатку розподіляючи нові надходження по «поличках», адже і пошук, і коригування таких матеріалів стає зручнішим.

Зробіть переміщення сайтом дійсно зручним

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

Цей туторіал покаже, як додати новий пункт меню Joomla.

1. Увійдіть в адмін панель Joomla, йдіть у Меню (Menus)та виберіть меню, для якого потрібно додати посилання:

2. У верхньому лівому куті натисніть кнопку Новий (New):

3. Виберіть тип нового пункту меню. Існують різні типи меню, наприклад ми додамо пункт меню типу Стаття (Single article):

4. Після вибору типу меню введіть його заголовок та відредагуйте налаштування. Для того, щоб додати підменю, необхідно вибрати Батьківський пункт (Parent Item)для нового елемента меню:

Тепер ми покажемо, як керувати порядком пунктів меню Joomla. Існує 2 способи його змінити:

1. Ідіть у Меню (Menus), виберіть бажане меню та відкрийте потрібний пункт меню. Потім у списку, що випадає Порядок (Ordering)виберіть потрібний пункт меню:

2. Ідіть у Меню (Menus), виберіть бажане меню, клацніть Сортування за (Sort by)і у списку виберіть опцію Порядок (Ordering). За допомогою інструмента "перетягнути та відпустити" ("drag and drop") змініть порядок пунктів меню:

Оцінка на JED:загалом – 28, функціональність – 50, підтримка – 23, документація – 28.

BM Cool Menu- один із найулюбленіших моїх безкоштовних та безпечних модулів для CMS Joomla 3 . Мені подобається його простота та лаконічність, адаптивність (що нечасто зустрінеш у безкоштовних варіантах) та можливість легкого доналаштування вручну. У чистому вигляді це розширення мене не зовсім влаштовувало, але при деякому коригуванні файлу CSS проблем не залишилося. Думаю, що невисокі оцінки модуля в каталозі Joomla JED пояснюються саме необхідністю його ручного доналаштування. Це не так складно, як здається. Тим більше, власні налаштування CSS файлу я зберіг для себе і вас в окремому файлі.

Цей модуль ідеально підійде тому, хто потребує простого адаптивного горизонтального та повністю безкоштовного меню на своєму сайті з Joomla 3. Відразу скажу, що він підтримує багаторівневі меню, але особисто у мене на деяких сайтах виникли певні проблеми із цим. Поки що я з ними не розбирався, бо знайшов інші варіанти; але вважаю, що у конфлікті бібліотек jQuery - за бажання це більш ніж вирішуване.(Нижче розповім, як я їх вирішив. Справа зовсім не jQuery). Для однорівневих меню модуль більш ніж оптимальний. Я використовую його на більшості своїх сайтів.

Демо модуля BM Cool Menu

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

Налаштування безкоштовного модуля адаптивного меню BM Cool Menu

Налаштування цього безкоштовного та безпечного модуля для створення адаптивного меню (однаково добре відображуваного як на комп'ютерах, так і на мобільних пристроях) на Joomla 3 включають такі пункти:

Show Sub-menu Items- Показувати підпункти чи ні.
Text color- Колір тексту.
Hover text color- колір тексту під час наведення курсора миші.
Menu"s background- колір меню фону.
Background image- картинка як фон (налаштування у форматі css)
Show border- Показувати рамку чи ні.
Border radius- радіус заокруглення кутів у рамці.
Border color- Колір рамки.
Active background- Колір активного пункту меню.
Load jQuery- підключати чи ні бібліотеку jQuery.

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

Ручне доналаштування стилів BM Coll Menu

Тепер скажу пару слів про ручне доналаштування модуля для створення адаптивного меню на Joomla 3 BM Cool Menu. Проблема у мене виникла, коли я вирішив повністю прибрати заокруглення кутів (border radius) та рамку (border color). Після внесення відповідних змін у налаштуваннях модуля в адмінці на комп'ютері в розгорнутому режимі (на всю сторінку) меню відмінно відображало всі ці зміни, проте на мобільних пристроях і в згорнутому вікні і рамка, і заокруглення зберігалися. До того ж модуль у стислому вигляді незмінно піднімався нагору та закривав собою частину іншого модуля, що знаходиться вище. Мені хотілося налаштувати відображення меню так, щоб усі його пункти вирівнювалися по центру. Справа в тому, що, наприклад, на екрані комп'ютера 4:3 все виглядало цілком рівно і пристойно, а ось на 16:9 меню притискалося вліво і виглядало якось не так. Ну і плюс до всього мені набридло прибрати світлу смужку, що розділяє між собою пункти меню.

Рішення знайшлося у зміні або коментуванні деяких рядків у файлі css модуля, який лежить по дорозі: /modules/mod_bm_cool_menu/assets/css/style.css. Старий файл я про всяк випадок зберіг у незайманому вигляді під ім'ям old-style.css. А в новому вніс деякі зміни.

Вирівнювання меню по центру

В класі .bm-cool-menu liя замінив float:left;на inline:block;(рядок 29) і те саме зробив у рядку 37 класу .bm-cool-menu a. Також додав у рядок 10 класу .bm-cool-menu: text-align:center;

Забираю білу розділову лінію між пунктами меню

Для цього повністю коментую рядок 30. Для тих, хто забув або ніколи не знав, як це робиться: /*border-right: solid thin #fcfcfc;*/

Додаткове налаштування відображення меню на мобільних

Щоб меню не закривало собою модуль (або логотип), що знаходиться вище, у класі .bm-cool-menu-trigger(Рядок 167 і нижче) я додав відступ зверху: margin-top:10px;

Для того, щоб рамка меню та закруглення кутів не відображалась у мобільній версії, я закоментував рядки 173, а також зі 175 по 180.

Модифікований мною файл style.css я виклав усередині архіву з модулем за прямим посиланням. Він називається mystyle.css. У разі небажання возитися зі зміною стилів вручну ви можете використовувати його, просто перейменувавши в style.css.

Окремо наголошу, що зроблені мною зміни стосуються лише однорівного меню. Втім, зробити відповідні зміни нескладно і для багаторівневої конструкції.

Змінюю назву меню в мобільній версії

Та й залишилася одна зовсім маленька, але суттєва деталь. Змінити слово Menu, написане латиницею під час перегляду сторінок у мобільній версії або при згортанні сторінки у браузері у невелике віконце. Можна було б припустити, що зміни треба вносити в мовний файл, але ні. Виявляється треба поставити свій заголовок меню у файлі на шляху: /modules/mod_bm_cool_menu/tmpl/default.php(Рядок 14).

От і все. Головне, здається, я розповів. Визнаю чесно, що вийшов на цей модуль я випадково і, дивлячись на його оцінки, спочатку поставився до нього досить скептично. Проте випробувавши інші варіанти і зрозумівши, що безкоштовних та безпечних адаптивних меню в офіційному каталозі дуже і дуже мало, я повернувся до цього і почав його доналаштовувати. Наразі я його використовую на більшості своїх сайтів.

Вирішення проблеми з непрацюючим BM Cool Menu

Проблема, яку я маю на увазі, полягає в наступному: на деяких сайтах у мене BM Cool Menu не розкривало підпункти ні при наведенні, ні при натисканні. Я довго думав, що має місце якийсь конфлікт скриптів. Коли знайшовся час розібратися з цим, то я побачив, що навіть на абсолютно чистому, тільки встановленому сайті Joomla 3 меню не розкривалося. Тут мені стало зрозуміло, що справа зовсім не в якихось конфліктах. Досвідченим шляхом і ціною величезної кількості нервових клітин мені таки вдалося встановити, що проблема з розгортанням та відображенням багаторівневого меню BM Cool Menuпроявляється лише у позиції Position-1 шаблону стандартного джумлівського шаблону Protostar. Переставивши цей модуль в будь-яку позицію (наприклад, banner), відбуваються дива - і він починає працювати.

Якщо ж обов'язково потрібно розташувати меню в Position-1, то доведеться трохи підкоригувати індексний файл шаблону Protostar (index.php в корені шаблону - / templates / protostar / index.php). Справа в тому, що за умовчанням висновок цієї позиції обернуть у контейнер nav із рідним класом меню Joomla 3 navigator. Видавши цю «обертку» і замінивши style з «none» на «xhtml», ми отримуємо позицію 1, в якій модуль BM Cool Menu почне працювати так, як треба.

Отже, знаходимо цей фрагмент:

nav class="navigation" role="navigation">

Видаляємо 1 і 3 рядок, а також замінюємо у другому рядку "none" на "xhtml". Ось і все рішення.

Посилання BT Content Slider – модуля стрічки новин у вигляді слайдера

Офіційне ДЕМО модуля BM Cool Menu

Сторінка модуля BM Cool Menu в офіційному каталозі розширень Joomla

Офіційний сайт модуля BM Cool Menu

Завантажити модуль BM Cool Menu за прямим посиланням

Меню – це окремий блок, який має пункти меню. Функція меню – створення списку посилань на різні матеріали чи розділи сайту. І формування параметрів виведення цих матеріалів. Тобто. куди виконано перехід і як виглядатиме ця стаття, категорія або розділ.

Блог категорії: статті з розширенням розташовані на сторінці одна за одною у вигляді стовпця або кількох стовпців і внизу сторінки можуть бути розміщені посилання на інші статті цієї категорії.

Після створення структури вмісту необхідно створити меню для користувачів сайту.

Меню – це набір кнопок, які наведуть користувача на конкретні об'єкти: статті, список категорій тощо. Вивести інформацію на сайт можна як у вигляді блогу, так і у вигляді статичної сторінки.

Відкривши вікно Менеджер меню (за допомогою кнопки Меню на панелі керування) можна побачити сторінку з вже створеними типами меню.

Для створення нового меню потрібно натиснути кнопку «Створити».

На сторінці «Деталі меню» необхідно заповнити поля:

Системне ім'я (латинським шрифтом), заголовок – ім'я пункту меню при виведенні на сайт, опис меню та заголовок модуля – який використовуватиметься при виборі способу виведення меню на сайт.

Для створення пунктів меню необхідно в Менеджері меню натиснути на кнопку Пункти меню в однойменному стовпці.

На сторінці "Пункти меню" натиснути на кнопку "Створити"

та перейти на сторінку «Пункт меню».

На ній представлено чотири види пунктів:

Розділ – у вигляді блогу або у вигляді таблиці посилань (при цьому відображатимуться всі статті розділу).

Матеріал – у вигляді статичної сторінки із матеріалом. (Інші статті на сторінці не відображаються.). Або шаблон надсилання матеріалу (тільки авторизованим користувачам з правами не нижче автора), в якому за допомогою текстового редактора можна написати статтю на сайті.

Шаблон блогу на головній – дозволяє виводити матеріал на головній сторінці лише у формі блогу. (Виводяться всі матеріали, у яких зазначено пункт "відображати на головній").

З архіву – у вигляді блогу з фільтром, що дозволяє задавати параметри відбору матеріалу. Для створення блогу категорії необхідно натиснути посилання «Блог категорії».