Accordion module joomla 3

Меню аккордеон для Joomla 3

Время на чтение: 5 минут

Стандартное меню Joomla 3 мало кого устраивает, но, к счастью, есть выход из положения – установка аккордеон меню, при помощи которого можно организовать одновременно простую и понятную навигацию на вашем сайте. Вам потребуется лишь выбрать наиболее оптимальный вариант, а выбрать есть из чего!

Расширение Nextendweb Accordion Menu для Joomla 2.5 и 3.х

Если ваша цель – создание действительно удобной системы навигации на сайте Joomla, то в первую очередь обратите свой взор на Nextendweb Accordion Menu. Данное расширение легко устанавливается и работает на версиях Joomla выше 2.5.

Главная особенность аккордеон меню кроется в возможности открытия и закрытия разных уровней с специальным эффектом, благодаря которому можно сохранить пространство на сайте; в меню можно поместить огромное количество полезных ссылок на страницы и категории сайта.

Таким образом, обеспечивается доступ к каждому элементу. Самое важное – навигация по сайту будет простой и понятной, что особенно важно для пользователей.

Nextendweb Аккордеон меню привлекателен не только тем, что обладает широким функционалом, но и тем, что предоставляет выбор вида меню. Администратор получит очень гибкий инструмент, благодаря которому можно установить нужный цвет меню, тип и размер шрифта, а также настроить другие элементы дизайна. Все присутствующие темы настраиваются без знаний HTML или CSS (в расширении уже имеется 4 встроенных темы с разнообразными вариантами дизайна). Также немаловажен тот момент, что панель администратора здесь проста и интуитивно понятна, поэтому вы с легкостью сможете настроить меню под себя.

Дополнительно можно отметить неограниченное число уровней и различные эффекты подменю. Расширение Nextendweb Accordion Menu отлично работает во всех современных обозревателях, совместимо с экранами любых компьютеров и смартфонов, включая сенсорные.

Получить расширение можно по URL: http://jmworld.ru/wp-content/uploads/2013/07/AccordionMenuAllVersion.zip

Модуль Hot Accordion для Joomla 3

Hot Accordion выступает в качестве модуля для создания аккордеона, который способен отображать несколько слайдов с картинками и текстом; эти слайды можно просматривать простым наведением курсора или при помощи клика мышкой. Такой способ отображения позволяет отображать наиболее важный контент и hot новости на главной странице вашего сайта Joomla 3.

Ко всему слайду целиком может быть привязана любая ссылка, что предоставляет пользователю возможность прочесть более подробную информацию по этой теме уже на отдельной странице. Картинки для аккордеона можно выбрать в настройках модуля, а для добавления достаточно ввести адрес изображения и присвоить им имя. Текст, заголовки и ссылки слайдов можно настраивать в параметрах модуля; они в свою очередь организованы в слоты, а их предельное количество равно 10.

В настройках Hot Accordion также можно выбрать скорость анимации. Также есть возможность контролировать все габариты модуля: высота, ширина, размер параграфа, наложение изображений, рамок и т.д. В качестве фона можно использовать заливку одним цветом, а также можно брать изображение из папки images/stories сайта на Joomla 3 (в параметрах модуля необходимо лишь ввести название изображения).

Читайте также:  Yootheme pro joomla установка

К сожалению, данный модуль распространяется платно, а приобрести его можно по URL: https://www.hotjoomlatemplates.com/. Если вы не испытываете никаких предрассудков по поводу бесплатного использования платных модулей, то эта ссылка для вас: http://katvin.com/?http://letitbit.net/download/53904.521f5623b7b46475f19e6b5a4935/mod_hot_accordion.zip.html

Модуль Offlajn Vertical Menu для создания выпадающего меню

Для пользователей очень важно, чтобы они могли легко ориентироваться в содержимом вашего сайта, поэтому все статьи и категории необходимо организовывать в логические структуры. Offlajn Vertical Menu – качественно выполненный модуль, способный создавать выпадающее меню на вашем сайте Joomla 3. Что немаловажно, данный модуль подходит практически к любому шаблону Joomla. В настройках вы обнаружите массу настроек, тем, а также оболочек, поэтому вы точно сможете создать наиболее удачный вид меню.

Достоинства Offlajn Vertical Menu:

  • простота в использовании;
  • быстрая развертка подменю;
  • можно выбрать горизонтальное и вертикальное выпадение, а также плавное возникновение;
  • модуль не устанавливает ограничений относительно глубины уровней;
  • есть поддержка SEO;
  • не конфликтует с процессами JavaScript;
  • поддержка языков LTR/RTL;
  • грамотное позиционирование подменю.

Недостатком данного модуля является его платность. Приобрести его можно на официальном ресурсе разработчика по URL: http://offlajn.com/vertical-menu.html

Модуль Accordeon Menu CK для создания меню

При помощи данного модуля можно вставлять привлекательные эффекты при открытии подменю, есть возможность использовать модуль неоднократно на одной и той же странице. В дополнение к модулю также существуют платные патчи Virtuemart и Hickashop.

В настройках модуля можно указать меню для отображения в модуле, главный пункт меню, начальные и конечные уровни; можно также установить тип выравнивания линков для изображений и установить суффиксы. В настройках на вкладке «Styles» можно указать тему оформления, задать папки с изображениями, указать позицию для выравнивания и т.д.

Источник

Как вывести контент «аккордеоном» на сайте под управлением Joomla 3.0

Как мало места на странице сайта и как много нужно туда вместить. Одним из вариантов компактного размещения контента, являются так называемые «аккордеоны». Под Joomla 1.5 существовал замечательный плагин, позволяющий внедрить в статью разного рода информацию, которая по умолчанию была скрыта, а выводилась при нажатии на соответствующие кнопки. Плагин назывался Glossy Accordion Menu. К сожалению, автор данного расширения приостановил развитие проекта. Однако, мы портировали данный плагин под Joomla 3.0 и в связи с этим я хотел бы рассказать пару слов о нем.

Загрузить Glossy Accordion Menu для Joomla 3.0 можно по следующей ссылке:

Устанавливается плагин стандартно, через менеджер расширений Joomla. После инсталляции необходимо включить его в менеджере плагинов.

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

В рамках данной статьи мы рассмотрим несколько вариантов его использования. Надеюсь, это поможет вам разобраться с назначением плагина и осознать его полезность.

Вариант 1. Как вывести несколько изображений аккордеоном

Рассмотрим пример из реальной жизни. Есть сайт, где нужно вывести несколько достаточно больших по размеру изображений на одной странице. В данном случае – это сканы документов организации.

Как нельзя лучше для этой цели подходит плагин Glossy Accordion Menu.

Начнем сразу с результата. Перейдем непосредственно на сайт по ссылке:

Мы видим несколько кнопок, нажатие на каждую раскрывает соответствующее изображение. Такой формат отображения стал возможен благодаря плагину Glossy Accordion Menu.

Теперь отправимся в админ панель сайта и посмотрим – как организовано сие. Для этого в менеджере материалов открываем соответствующую статью на редактирование. И наблюдаем следующее:

Весь этот текст должен вводиться в режиме визуального редактора, ни в коем случае не нужно переходить в режим правки HTML кода!

Итак, что же мы увидели?

Весь контент, который должен обрабатываться плагином Glossy Accordion Menu облечен тегами:

Читайте также:  Linux mint 20 ulyana как обновить

Текст кнопки вводится без каких либо тегов, а вот содержимое, которое выводится при нажатии на кнопку должно начинаться с символа «-»

Содержимое может вводиться, как обычным текстом, так и html тегами. Поскольку в данном случае идет речь о выводе картинок аккордеоном, то выводимое содержимое в моем случае представлено тегом img , который выводит необходимое изображение.

Вариант 2. Как вывести несколько модулей аккордеоном

Тот, кто достаточно давно работает с Joomla, знает, что при желании можно вывести содержимое модуля в контенте.

Благодаря плагину Glossy Accordion Menu, мы это можем визуально оформить в виде аккордеона.

Начнем, как всегда, с реального примера.

Перейдем на эту страницу:

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

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

Как мы видим, код ничем не отличается от предыдущего варианта, где мы просто выводили изображения, за исключением одного – в качестве содержимого на этот раз выступает содержимое модуля.

В данном случае первая кнопка выводит содержимое модуля из позиции «bas3», вторая кнопка выводит модуль из позиции «dopuslugi»

Заключение

Glossy Accordion Menu – портирован нами для Joomla 3.0, как системный плагин. Это означает, что он может использоваться не только в стандартных материалах, но во всех компонентах, которые поддерживают ввод и вывод контента.

Надеюсь, что вы оцените по достоинству данное расширение, а также наш труд по переработке плагина для последних версий Joomla.

Очень прошу вопросы, связанные с этим плагином задавать исключительно на форуме.

Источник

Accordion module joomla 3

Displays selected contents with accordion effect

JA Accordion Module Introduction

Quick Info

  • Updated on:07 Apr, 2022
  • Version:2.6.2 Changelog
  • Download:187,071

JA Accordion is used to display selected content with accordion effect.

The module supports multiple content types: articles and modules. As an administrator, you can set number of items to be displayed, action event (mouse hover or mouse click). You can also select to show Featured articles or not.

  • Support multiple content types
  • Display selected content with accordion effect
  • Multiple effect types supported by default
  • Mouse hover or Mouse click to open item in accordion
  • Items displayed in accordion with full text or intro text

JA Accordion Features

A Joomla Module to display content in accordion with configurable effects

Support multiple content types

The module allows you to display articles by adding article IDs or articles from selected categories. For modules, you can select modules or modules from a position.

Display selected content with accordion effect

The module will display selected content in accordion with effects defined in back-end.

Multiple effect types supported by default

JA Accordion comes with multiple effect types. All you have to do is trying one by one till you find the effect you want to apply for the module. The effect will make the module displaying more impressive.

Mouse hover or Mouse click

Items in accordion can be opened when users hover or click. With one click, you can make it done.

Full text or Intro text

Each item displayed in the module will include title, image and description. The desciption can be full text or intro text only, it’s up to your usage.

Источник

Создаём «Accordion» на Joomla своими руками

Для того чтобы сделать собственный сайт привлекательным в глазах посетителей, нам приходится создавать парой сложные, но в тоже время интересные элементы дизайна. К тому же они иногда имеют весьма практичный смысл, к примеру, экономят места. Конечно, многие из нас предпочитают сторонние шаблоны для Joomla, так как они уже содержать красивый внешний вид. Но сегодня, мы не станем искать лёгких путей. В этой статье мы рассмотрим три способа создания Аккордеона.

Accordion — это один из элементов визуального оформления, его задача скрыть контент, а после нажатия на заголовок пункта открыть его. На самом деле способов создание аккордеона огромное множество, но мы разделили их на три основных. Первый основан на современной таблице стилей — CSS3. Второй предполагает подключение JavaScript. Ну а третьим способом станут стандартные средства Joomla. У каждого из них будет плавная анимация, а первые два можно установить на любой сайт, при этом неважно какой движок вы используете.

1 способ — CSS3

Для того чтобы понять как всё работает, мы начнём с самого простого варианта. Здесь нам понадобиться создать всего два файла HTML и CSS, а после положить их в одну папку вместе.

1. На рабочем столе создайте папку MySite.

2. Откройте Notepad++ и нажмите Ctrl+Alt+S. Введите название index, а тип файла выберите HTML.

Сохраните этот файл в нашу папку MySite.

3. После сохранения файл index.html будет открыт в редакторе, туда необходимо вставить вот этот код:

4. После того как у нас полностью готов первый файл, нам необходимо прописать стили для визуального оформления вкладок и текста внутри. Вновь при помощи Notepad++ создаём «style» с типом CSS как показано на картинке ниже:

Положите его в туже папку.

5. Вставляем в style.css вот этот код:

6. Теперь заходим в MySite, где два файла и открываем index.html в браузере. Вот что должно получиться:

Стили, которые мы использовали для создания анимации в выпадающих вкладках, работают только на современных браузерах. Это связано с тем, что мы используем CSS3. Посмотреть ДЕМО (http://websitek.ru/demo/Accordion-CSS3/).

2 способ — JavaScript

Второй способ заключается в создании тех же файлов, но с подключением дополнительных скриптов. Один будет автоматически загружаться браузером с сервера Google во время открытия страницы, а второй будет прописан в самом файле, он станет отвечать за действия мышкой. В нём я подписал значения, которые можно изменить.

1. На рабочем столе создайте вторую папку с именем MySite2.

2. В ней при помощи всё той же программы Notepad++ создаём два файла index.html и style.css. Всё как мы делали до этого.

3. В index.html вставляем вот этот код:

4. А в style.css вот это:

5. Заходим в нашу папку MySite2 и открываем index.html в браузере. Должно получиться так:

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

3 способ — Bootstrap Joomla

Настало время поговорить о последнем варианте создания аккордеона. Он основан на Bootstrap Framework. Это своего рода библиотека, которая устанавливается в шаблон и облегчает создание элементов на сайте. Нам достаточно написать небольшие команды на PHP для того чтобы получить желаемое. Устанавливать сам Bootstrap не станем, мы воспользуемся стандартным шаблоном «protostar» из Joomla, в нём уже есть всё, что нам надо. Данный способ работает, начиная от Joomla 3.2 и выше.

Рассматривать таблицу стилей в этом примере не станем.

Для того чтобы создать «Accordion» нам понадобиться вот этот код:

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector