Joomla аккордеон для материалов

Плагин Tabs & Slider & Spoilers

Универсальный плагин контента, который объединяет в себе 3 функции — табы, спойлер и слайды (вид гармошки)

  • Теперь не нужно использовать по 3 плагина для разных эффектов — всё в одном!
  • Очень мало весит
  • Специальные теги для вставки

Табы, Спойлер и Аккордеон для Joomla

Возможности

Простой плагин для Joomla 2.5 — 3.x, с помощью которого вы сможете преобразить ваш контент. Данный плагин работает только с com_content в полном материале. Может работать в любом компоненте, который поддерживает контентные плагины, например, в Joomshopping есть такая возможность.

По умолчанию стили фронтальной части плагина при использовании специальных тегов, выглядят так:

Настройки

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

Обратите внимание, для корректной работы плагина требуется подключение библиотеки jQuery. Если на вашем сайте отсутствует данное подключение, то вы можете в специальное поле ввести нужную версию, например, 1.1.8 и jQuery данной версии будет подключена с CDN Google автоматически. Для того чтобы проверить нужно ли вам использовать данную опцию, нажмите ctrl+u и посмотрите в исходном коде. Крайне нежелательно подключать библиотеку дважды, поэтому стоит внимательно отнестись к данному моменту.

Источник

Меню аккордеон для 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 отлично работает во всех современных обозревателях, совместимо с экранами любых компьютеров и смартфонов, включая сенсорные.

Читайте также:  Драйверы на принтеры кэнон mf3110

Получить расширение можно по 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 (в параметрах модуля необходимо лишь ввести название изображения).

К сожалению, данный модуль распространяется платно, а приобрести его можно по 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» можно указать тему оформления, задать папки с изображениями, указать позицию для выравнивания и т.д.

Источник

Accordion — больше информации занимает меньше места

Представьте, что вам необходимо разместить на сайте много информации с картинками и видео. Но если это все выложить на одну страницу, то она получится очень длинной и неудобной для пользователя. Чтобы посетители чаще посещали ваш сайт, надо сделать его максимально удобным. Как это сделать?

Настройте Widgetkit Accordion, который поможет вставлять много информации и при этом она будет занимать мало места на странице.

Чем же хорош виджет?

  • Построен на HTML5, CSS3 и последней версии jQuery.
  • Имеет приятный и аккуратный дизайн с учетом требований мобильных устройств.
  • Может размещать большое количество сведений на одной странице.
  • Вкладка автоматически подбирает высоту по его содержимому.
  • Виджет легко настраивается.
  • Красивая анимация при переходе по вкладкам.
Читайте также:  Noexec linux что это

Способы отображения виджета

Аккордеон можно настроить тремя разными способами:

  • Создание виджета из произвольных материалов. Рассмотрим ниже, как это сделать.
  • С использованием стандартных материалов Joomla.
  • Отображение виджета через материалы, находящиеся в компоненте Zoo.

Создание аккордеона из произвольных материалов

Зайдите в компонент Widgetkit и во вкладке Accordion кликните на кнопку Create your first slideset, чтобы создать новый виджет.

Настроек немного и к основным относятся:

  • Enter name here — название виджета в панели управления.
  • Title — заголовок, отображаемый на сайте.
  • Content — основная информация, которая будет находится в аккордеоне: текст, картинки, видео и аудио файлы и т. д.

Чтобы добавить еще один материал в виджете, нажмите на кнопку Add new item.

К дополнительным настройкам относятся:

  • Auto Collapse — параметр для включения автоматического сворачивания одного окна в аккордеоне при переходе в другое.
  • Match Content Height — опция, определяющая максимальную высоту содержимого окна из всех вкладок аккордеона. Таким образом, все вкладки будут иметь одинаковый размер по вертикали вне зависимости от количества находящейся в ней информации.
  • Start Index — номер активной вкладки, с которой будет начинаться отображение виджета.
  • Animation Speed (ms) — скорость при открывании аккордеона, мс.
  • Width — ширина окна виджета, px.
  • Order — порядок показа вкладок: по порядку (default) или хаотично (random).

Настройка виджета через материалы Joomla

Нажмите кнопку Use Joomla, чтобы создать виджет с использованием его стандартных материалов. Вы увидите такие настройки:

  • Category — опция для выбора категории. В данном случае у нас не создано ни одной категории, поэтому в выпадающем списке только одна надпись «uncategorised».
  • Include Subcategories — параметр, включающий подкатегории
  • Ordering — порядок, в котором будет отображаться информация в виджете:
    • Article Order — сведения будут показываться в том же порядке, как и в менеджере материалов;
    • Latest first — опубликованные от более ранних к поздним;
    • Latest last — от поздних к ранним;
    • Alphabetical — отображение сведений в алфавитном порядке;
    • Reverse Alphabetical — обратном алфавитном;
    • Most Hits — от более к менее популярным;
    • Least Hits — наименее посещаемые первыми.
    • Random — в случайном порядке.
  • Read More — кнопка с данной надписью, по которой можно перейти на другую страницу, с более подробным описанием темы из анонса.
  • No. of Items — максимальное количество вкладок в аккордеоне.

Настройка виджета через материалы Zoo

Чтобы виджет отображался данным способом, нажмите на кнопку Use Zoo и вы перейдете к следующим настройкам виджета:

  • Элементы — место расположение виджета. Далее укажите, где он будет расположен: в категории или в типе материала.
  • Include Subcategories — опция для включения подкатегорий.
  • Item Count — максимальное количество вкладок, отображаемых на сайте.
  • Порядок элемента — страницы, в которых будет показан виджет. Данная настройка включается только при выборе приложения в первой опции Элементы.
  • Layout — шаблон, через который будет отображаться информация в виджете.
  • Media Position — расположение картинки (видео) на странице.
Настройка шаблона виджета с материалами из Zoo

В панели управления кликните на вкладку с шестеренкой и нажмите кнопку JBZoo App.

Напротив типа материала зайдите в тот шаблон, который указали в настройках виджета выше.

Перетащите элемент или элементы из колонки Пользовательские в нужную позицию слева.

Источник

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

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

Читайте также:  Linux console log viewer

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