Урок зробити вертикальне меню на джумла. Як зробити меню в Joomla, три способи створення меню в Joomla

Привіт, друзі! На зв'язку Заур Магомедов. У цій статті хочу представити вам симпатичне вертикальне акордеон меню для сайту на Joomla 2.5 - 3.0. Дане меню дуже просте і не вимагає впровадження великого коду, на що я дуже часто звертаю увагу. Як то кажуть - «Краще менше, та краще».

Ми вже розглядали в попередніх постах створення горизонтального меню і створення горизонтального багаторівневого меню для joomla 2.5. Ось тепер добралися і до вертикального.

Для початку подивіться демо, як це все виглядає, якщо подобається, то качаємо пакет з вихідними файлами.

Я знайшов дане меню в інтернеті і вирішив адаптувати його для сайту на cms Joomla, тому що мені самому дане меню дуже сподобалося, як за зовнішнім виглядом, так і по легкості підключення. Злегка підправивши скрипт самого меню і стилі css, отримав такий ось результат як на.

Підключення меню в joomla 3.x.x

Насамперед розпаковуємо архів в певну папку на вашому комп'ютері. Наступне, що ми зробимо це скопіюємо картинки з папки images в папку картинок вашого шаблону. Зазвичай у багатьох шаблонах це папка images, якщо вона у вас називається інакше, наприклад, img, то ви повинні змінити шляху до картинок в файлі стилів - vmenu.css. Також нам необхідно підключити один з скриптів меню. Я пропоную створити в корені вашого шаблону папку «js» і покласти в неї файли скриптів - menu.js або menu-collapsed.js. Чому два файли? Справа в тому, що, якщо ви помітили, на демо-сайті є два варіанти відображення даного меню. Можете уважно подивитися чим вони відрізняються один від одного. Підключаємо прийнятний варіант скрипта menu.js або menu-collapsed.js. Варіант 1 - це скрипт menu-collapsed.js, а варіант 2 - це menu.js. Для цього на самому початку файлу index.php шаблону вставимо наступні рядки:

$ Doc \u003d JFactory :: getDocument (); // отримуємо параметри
$ Doc-\u003e addStyleSheet (JUri :: base (). '/ Templates /'.$ this-\u003e template.' / Css / vmenu.css '); // підключаємо файл стилів
$ Doc-\u003e addScript (JUri :: base (). '/ Templates /'.$ this-\u003e template.' / Js / menu-collapsed.js '); // підключаємо скрипт меню, в даному випадку це варіант 1
?>

Нам також необхідна бібліотека jQuery, але в joomla3 вона підключена вже за замовчуванням, тому що використовується фреймворк.

Отже, файл css містить в собі наступний код:

/********************************
Вертикально-меню, що випадає акордеон
************************************************************/
ul.vmenu (

margin: 0;
padding: 0;
list-style: none;
}
ul.vmenu li (
margin: 0 0 2px;
}
ul.vmenu li a (

border: 1px solid # D5D5D5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
color: # 515151;
display: block;
padding: 5px 8px;
text-decoration: none;
}
ul.vmenu li\u003e a: hover, ul.vmenu li.active\u003e a, ul.vmenu li\u003e
ul.vmenu li.parent\u003e a: after (

display: block;
content: "";
float: right;
margin: 8px 5px 0 0;
height: 3px;
width: 6px;
}
/ * Випадають пункти * /
ul.vmenu li ul (
font-weight: normal;
margin: 10px 0 10px 15px;
list-style: none;
}
ul.vmenu li ul li (
background: none;
margin: 0 0 5px
}
ul.vmenu li ul li a (

border: medium none;
padding: 0 0 0 15px;
}
ul.vmenu li ul li a: hover (color: # 29719E; text-decoration: underline)
ul.vmenu li ul li.active a (color: # 29719E; font-weight: bold)

/*********************
Вертикально-меню, що випадає акордеон - варіант 2
************************************************************************/
ul.vmenu2 (
font: bold 12px Arial, Helvetica, sans-serif;
list-style: none outside none;
margin: 0;
padding: 0;
list-style: none;
}
ul.vmenu2 li (
margin: 0 0 2px;
}
ul.vmenu2 li a (
background: url ( "../ images / vmenu-li-bg.jpg") left bottom repeat-x;
border: 1px solid # D5D5D5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
color: # 515151;
display: block;
padding: 5px 8px;
text-decoration: none;
}
ul.vmenu2 li\u003e a: hover, ul.vmenu2 li.active\u003e a, ul.vmenu2 li\u003e a: focus (background-color: transparent; color: # 0088CC)
ul.vmenu2 li.parent\u003e a: after (
background: url ( "../ images / arrow-dropdown.png") no-repeat;
display: block;
content: "";
float: right;
margin: 8px 5px 0 0;
height: 3px;
width: 6px;
}
/ * Випадають пункти * /
ul.vmenu2 li ul (
font-weight: normal;
margin: 10px 0 10px 15px;
list-style: none;
}
ul.vmenu2 li ul li (
background: none;
margin: 0 0 5px
}
ul.vmenu2 li ul li a (
background: url ( "../ images / vmenu-arrow.png") no-repeat scroll 5px center transparent! important;
border: medium none;
padding: 0 0 0 15px;
}
ul.vmenu2 li ul li a: hover (color: # 29719E; text-decoration: underline)
ul.vmenu2 li ul li.active a (color: # 29719E; font-weight: bold)

В даному файлі містяться стилі обох варіантів і ви можете видалити стилі непотрібного вам варіанти меню.

Тепер, коли у нас все пункти створені ми можемо створити модуль за допомогою якого будемо виводити наше меню в тій чи іншій модульної позиції шаблону. Я вибрав ліву колонку. Переходимо в менеджер меню і натискаємо на посилання "Додати модуль для даного типу меню »навпроти нашого створеного меню. Також модуль меню можна створити і в такий спосіб - йдемо в менеджер модулів: Розширення -\u003e Менеджер модулів -\u003e Створити -\u003e Меню (вибираємо тип модуля).

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

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

Ще раз нагадаю! На демо-сайті два варіанти меню і напевно ви оберете один з них. У такому випадку немає необхідності підключати обидва файли скрипта, досить тільки одного.

Файл menu-collapsed.js. - це у нас варіант 1 - Меню акордеон - варіант 1
Файл menu.js - це у нас варіант 2 - Меню акордеон - варіант 2
Суфікс класу меню (через пробіл) для варіанта 1 - vmenu
Суфікс класу меню (через пробіл) для варіанта 2 - vmenu2

Виходячи з цього, підключаєте потрібний вам файл. Також в файлі css можна видалити стилі для непотрібного нам варіанти, щоб не вантажити зайвий раз зайві кілобайти.

Підключення меню в joomla 2.5.x

Підключення меню в joomla 2.5 нічим не відрізняється від підключення в joomla 3, за винятком того, що нам необхідно підключити ще додатково бібліотеку jQuery. Для цього в вищенаведений код додаєте наступну сходинку:

$ Doc-\u003e
?>

У нас вийде приблизно наступне:

$ Doc \u003d JFactory :: getDocument (); // отримуємо параметри
$ Doc-\u003e addScript ( 'http://code.jquery.com/jquery-latest.min.js'); // підключаємо останню версію бібліотеки jQuery
$ Doc-\u003e addScript (JUri :: base (). '/ Templates /'.$ this-\u003e template.' / Js / menu-collapsed.js '); // підключаємо скрипт меню, в даному випадку це варіант 1
?>

І ще дещо. У joomla 2.5 немає тип пункту меню Системні посилання -\u003e Тема, там є тільки тип текстовий роздільник - Роздільник, але такий тип пункту нам не підійде, тому що заголовок пункту меню не буде обрамлений посиланням. В даному випадку вам необхідно вибрати тип «Зовнішній URl» і в якості урл вставити заглушку - #. Все інше теж саме.

Ось і все, що хотів сказати. Якщо щось не виходить (можливо і я десь помилився в тексті), то задаємо питання в коментарях. Всім поки, до зустрічі в наступних постах!

Представляємо нову версію приголомшливого і багатофункціонального модуля вертикального меню 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 призначених для створення практично будь-якої структури і типів меню. За допомогою даного компонента можна швидко зробити чотири види спливаючого або меню, що випадає, три види меню типу аккардеона (можна робити комбіноване, динамічне або багаторівневе меню). Також можна реалізувати багатоколонкові або деревоподібна меню. В нової версії розробники додали можливість перенесення стилів на інші сайти, підключати до пунктів картинки, редагувати градієнти, фон, тіні, кути і шрифти.

Огляд модулів меню для CMS Joomla 3.x.

1. Maxi Menu CK

CMSJoomla 2.5 / 3.x.

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

Після установки модуля на екрані відображаються посилання для завантаження документації до нього і платних опцій: розширеного пакета графічних тем оформлення, плагіна легкого управління меню, патчів для компонентів «Virtuemart», «Hikashop», «Joomshopping» і K2, а також плагіна для коректного відображення створеного меню на мобільних пристроях.

Далі потрібно перейти в «Менеджер модулів» і вибрати в ньому «Maxi Menu CK». На вкладці «Module» панелі управління модулем можна вибрати меню для публікації, ввести унікальний ID модуля, базовий пункт меню і його початковий і кінцевий рівні, а також можна вимкнути опцію підрівнів.

Крім того, можна скористатися майстром налаштування меню:

Зручність використання майстра меню складається в швидкому перемиканні між типами меню і необхідними їм опціями, але актуально здебільшого, лише в разі встановлених додатково платних розширень. На вкладці «Прив'язка до пунктів меню» можна вибрати сторінки сайту, на яких буде відображатися модуль; вкладці «Effect Options» дозволяє відключити використання ефектів на javascript, вибрати їх тип завантаження і провести настроювання візуальних ефектів для пунктів і підпунктів меню. У «Styles Option» можна вибрати тему меню (за замовчуванням є три), орієнтацію меню, відключити адаптивний дизайн меню і вибрати файл CSS шаблону.

У розділі «Logo options» можна вибрати файл логотипу, який буде відображатися на меню, додати до нього посилання і визначити його позицію, ширину, висоту і відступи. Після вибору позиції меню в шаблоні і зміни стану на «Опубліковано», меню з'являється на сайті.

Працююче на сайті розширення виглядає наступним чином:

Дане меню (після установки платного патча) оптимально використовувати в якості основного меню для інтернет-магазину на «Joomshopping», «Virtuemart» або «Hikashop», оскільки воно дозволяє автоматично вивести список категорій товарів.

2. ARI Ext Menu

Розширення повністю сумісний зCMSJoomla 1.5-1.7 / 2.5 / 3.x.

Настроюється модуль меню, що підтримує горизонтальну і вертикальну орієнтацію, два ефекту переходу.

Для установки розширення потрібно перейти до «Менеджеру розширень», вибрати за допомогою діалогу долучення модуля і натиснути на кнопку «Завантажити та встановити». В налаштуваннях модуля можна вибрати меню, яке буде відображатися за допомогою даного модуля, орієнтацію меню, початковий і кінцевий рівень ієрархії, а також налаштувати такі параметри, як показувати лише активні підпункти меню, підсвічувати поточний пункт меню. серед системних налаштувань доступні опція завантаження бібліотеки ExtJS, вибір методу її завантаження і генерація унікального ідентифікатора. Також можна налаштувати параметри стилю пунктів і підпунктів меню: колір фону, тексту, розмір шрифту, вирівнювання та інше. Розширені настройки модуля цілком стандартні і містять параметри кешування, термін кешування, HTML-тег модуля, розмір Bootstrap, HTML-тег заголовка і CSS-клас заголовка. Після завдання модулю позиції і публікації модуля на сайті з'являється меню такого вигляду:

3. Accordeon Menu CK

Розширення повністю сумісний зCMSJoomla 2.5 / 3.x.

Ще одне меню від студії JoomlaCK. Дозволяє вставити красиві ефекти при відкритті підміню, багаторазово використовувати модуль на сторінці. Особливість модуля є можливість вставки в нього інших модулів. Також на додаток до модуля є платні патчі для Hickashop і Virtuemart.

Після стандартної процедури встановлення розширення на екрані з'являється повідомлення про успішну установку модуля і посилання на завантаження документації до нього, а також наводиться вид посилання для вставки будь-якого модуля в якості одного з пунктів меню.

Перейшовши до панелі управління модулем можна вибрати меню для відображення в модулі, базовий пункт меню, початковий і кінцевий рівні, а також встановити суфікси і тип вирівнювання посилань для зображень. На вкладці «Effects» можна вибрати подія, при якому пункт меню відкривається, чи буде показана посилання при наведенні курсору миші на зображення, тип переходу, необхідність використання ефектів для активного підміню; також можна задати ID пункту меню, активного за замовчуванням. На вкладці «Styles» можна вибрати для меню тему оформлення, вказати папки з зображеннями, які будуть відображатися при згорнутому і при розгорнутому меню, а також вказати для них позицію вирівнювання. Вкладка «Menu styles» містить безліч настроювальних параметрів зовнішнього вигляду меню: полів, заднього плану, заокруглення кутів пунктів меню, тіней і меж. На вкладках «First level link styles», «Second level link styles» і «Other level link styles» можна змінити шрифт, колір тексту і фону для посилань, що виводяться в пунктах меню. Вкладка «Third party extensions Options» призначена для налаштувань сумісності з компонентами «Hikashop» і «Virtuemart» і вимагає завантаження та встановлення відповідних патчів. Налаштування мобільних опцій в безкоштовній версії розширення також недоступна.

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

4. JB DropDown Menu for Bootstrap

Розширення повністю сумісний зCMSJoomla 2.5 / 3.x.

Модуль меню, що працює з Twitter "s Bootstrap і JBootstrap, заснований на вбудованому модулі меню Joomla. Установка модуля стандартна. В налаштуваннях модуля потрібно лише вибрати одне з меню системи, початковий і кінцевий рівень, а також є настроюється можливість показувати підпункти меню. Після того , як Ви призначите даному модулю його позицію і опублікуєте його, на сайті з'явиться меню такого вигляду:

5. DJ-Menu

Розширення повністю сумісний зCMSJoomla 2.5 / 3.x.

Меню з списком, що випадає і анімованими ефектами на базі Mootools. Установка модуля проводиться стандартно. На вкладці «Module» налаштувань розширення необхідно вибрати меню, яке модуль буде відображати, а також визначити останній з його рівнів і, якщо це потрібно, включити висновок меню на маленьких екранах і встановити його ширину в цьому випадку. Вкладка «CSS3 Animations and script features» дозволяє налаштувати ефекти анімації при вході і виході з меню, а також швидкість анімації, встановити час затримки при закритті підміню, CSS-клас заголовка, його HTML-тег і розмір Bootstrap.

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

Всі розглянуті в огляді модулі для створення на сайті під керуванням CMS Joomla 3.x меню дозволяють створити меню з подуровнями. Розглянуті модулі здебільшого відрізняються наявністю тих чи інших ефектів анімації і можливістю відображення на мобільних пристроях. Тому для сайтів, орієнтованих на мобільних користувачів (А таких стає все більше), варто віддати перевагу модулю «DJ-Menu». Модуль «Accordeon Menu CK» хороший тим, що дозволяє вставити в себе вміст іншого модуля; модуль «JB DropDown Menu for Bootstrap» - найпростіший і «легкий» з розглянутих розширень і буде непогано виглядати в парі, наприклад, з модулем меню Joomla за замовчуванням. Функціональність модуля «Maxi Menu CK» вражає, але, оскільки в безкоштовній версії вона істотно обмежена, для того, щоб скористатися нею, потрібні фінансові вкладення.

Вітаю товариші! У даній статті ми закінчимо розпочате попереднього поста, тобто уможливимо відображення матеріалів на сайті. Сьогодні займемося створенням пунктів меню в Joomla 3.6. Саме пункти меню є найважливішою складовою будь-якого інтернет ресурсу, так як вони виконують важливу роль основної навігації сайту.

Початківці недосвідчені сайтобудівники довго не можуть вловити взаємозв'язок, яка проглядається між створенням матеріалу, створенням категорій і створенням меню. Але з часом ви зрозумієте для чого це потрібно і як з цим працювати. Як я вже раніше згадував на CMS Joomla 3.6, який створюється матеріал необхідно прив'язати до категорії. Але і це ще не все, для того щоб стаття відображалася на сторінках сайту потрібно створити меню.

Розробники передбачили величезну різновид виведення пунктів меню. Займемося додаванням пунктів в уже існуючому головному меню Joomla.

Створення базового пункту меню

1. В адміністративній панелі Джумла вгорі знаходимо розділ - Меню / Main Manu / Створити пункт меню.

2. На наступній сторінці прописуємо «Тема меню». Поле «Аліас» залишаємо порожнім. Це пов'язано з тим, що після того як назва меню буде створено, система автоматично пропише в ньому все необхідне. Це також стосується матеріалів і категорій, для яких ви прописуєте заголовок.

3. Тип пункту меню - ця важлива частина, Що відповідає за виведення матеріалу. Кількома вибрати.

У вікні, знаходимо «Матеріали», де нам потрібно вибрати один з представлених варіантів. У себе на сайті я в 99% використовую «Список матеріалів категорій».

4. Тепер, коли ви визначилися і вибрали вищевказаний тип меню, слід провести « вибір категорії». За замовчуванням в системі буде відображатися Uncategorised. Тут необхідно вибрати категорію, яка причепиться до меню. Надалі можливо змінювати прив'язку. Так що якщо ви помилково прив'язали не те що хотіли, це завжди можна виправити, зайшовши в меню Joomla.

5. У правій області вікна знаходяться налаштування пов'язані з відображенням. Стан - вибираємо «Опубліковано». Головна сторінка - думаю і так все зрозуміло. Якщо її вибрати, весь матеріал категорії буде відображатися на головній сторінці. Також можна задати «Батьківський елемент». За умовчанням встановлено «Кореневий пункт меню». Цей розділ виконує важливу роль, так як дозволяє створити підміню до вибраного в рядку головного меню. Але так як у нас поки що тільки один пункт меню, то і прив'язувати особливо нічого.

6. В результаті створений нами пункт меню необхідно «Зберегти», натиснувши на одну з відповідних кнопок у лівій верхній частині екрану.

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

Якщо ви хочете щоб в меню відображалася одна стаття, необхідно повернутися в Тип пункту меню / Матеріали / Матеріал. І в графі «Вибір матеріалу» вибрати належний матеріал. Далі все ідентично вищенаведеного методу.

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

Сподіваюся, мені вдалося вам допомогти. Якщо у вас виникли якісь питання задавайте їх у коментарях.

Дякую за увагу і до швидких зустрічей на сторінках Stimylrosta.

Виявили в тексті граматичної помилки? Будь ласка, повідомте про це адміністратора: виділіть текст і натисніть гарячих клавіш Ctrl + Enter

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

Деякі розширення можуть не підтримуватися певними версіями платформи. Тому перш ніж встановлювати розширення, потрібно визначити яку версію Joomla ви використовуєте.

Maxi Menu CK

Це випадає адаптивне мега-меню з декількома стовпцями. Також можна завантажувати всередину нього модулі. iPhone, iPad, Android-сумісний. AdsManager, сумісний з Joomshopping, Virtuemart, Hikashop:

SJ Flat Menu

Це простий, але потужний модуль для поліпшення юзабіліті і навігації сайту! Він дозволяє відображати багаторівневі меню. З його допомогою можна вивести випадає, акордеон-меню, горизонтальне або вертикальне меню з елементами, що розкриваються в праву або ліву сторону. Меню, створене за допомогою даного модуля меню для Joomla 3, допоможе відвідувачам сайту знаходити потрібний контент, не витрачаючи на це багато часу:

Завантажити / Додаткова інформація