Вертикально-меню, що випадає акордеон для joomla 2

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

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

Підключення меню в 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 шаблону вставимо наступні рядки:

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

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

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

Читайте також: Горизонтальний багаторівневе меню на css з ефектом анімації

Тепер йдемо в панель управління joomla і створюємо меню: Меню -> Менеджер меню -> Створити меню. Створюєте меню, даєте заголовок і машинне ім'я.

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

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

Далі, вводимо заголовок, вибираємо потрібну модульну позицію для відображення, «Вибір меню» вибираємо створене нами вертикальне меню, ставимо перемикач опції «Показувати підпункти меню» в положення «Так».

Переходимо у вкладку «Додаткові параметри». Тут вставити пробіл і вставляємо суфікс класу меню - 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. Для цього в вищенаведений код додаєте наступну сходинку:

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

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

Заур Магомедов

У мене ви можете:

Замовити верстку Замовити сайт під ключ