Представляем новую версию потрясающего и многофункционального модуля вертикального меню 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 3. В этой статье подробно познакомимся с возможностью системного меню Joomla. Пожалуй, нет необходимости говорить, что такое меню сайта. Достаточно, сказать, что на сайте Joomla меню можно разместить вертикально в правом и/или разместить горизонтально в районе шапки сайта.

Из общей информации про меню Joomla, стоит упомянуть, что материалы категории, которая не прикреплены к какому-либо меню сайта, не будут на сайте видны.

Меню и пункты меню Joomla 3

Меню сайта Joomla создаются администратор сайта или пользователями сайта с установленными разрешающими правами на управление меню сайта. Права на управление меню выставляются на вкладке Компоненты→Менеджер меню→Права.

Само меню Joomla это не информативная, а системная единица сайта. Создается меню для последующего создания информативных пунктов меню.

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

Как создать меню сайта Joomla

Для создания меню сайта открываем вкладку: Меню→Менеджер меню→Создать меню из горизонтального бара или Структура→ Менеджер меню→Создать меню вертикального меню административной части сайта.

Меню даем имя, обязательно вписываем системное имя меню (тип меню). Типом меню может быть любое латинское слово, понятно указывающее назначение меню. Например, mainmenu, homemenu, topmenu, footermenu.

Как создать пункты (подпункты меню)

Создание пунктов меню, производится на вкладке: Меню→Название меню→Создать пункт меню.

Типы пунктов меню

Как я уже упоминал, пункты меню Joomla 3 это информативные единицы сайта. При помощи пунктов меню можно открывать на сайте страницы с различной информацией. Эта информация может быть различной и в зависимости от типа информации, создаются различные типы меню. Посмотрим на типы пункта меню:

Тип пункта меню

1. Контакты (4 типа);

2. Ленты новостей (3 типа);

3. Материалы (7 типов), а именно

• Архивные материалы;
• Избранные материалы;
• Материал;
• Блог категории;
• Создать материал;
• Список всех категорий сайта;
• Список материал одной категории.

4.Менеджер настроек;

5.Менеджер пользователей (7 типов);

6.Метки (3 типа);

7.Обертка(Wrapper);

9.Системные (4 типа);

10.Умный поиск.

Как видите, типов пунктов меню много и при их помощи можно организовать очень неплохую навигацию по сайту.

Хватит теории, перейдем к практике и создадим меню с двумя, тремя пунктами меню.

Пример создания меню сайта Joomla

Создадим меню под названием «Меню1». Системное имя будет «menu-1».

Идем на вкладку: Меню→Создать меню.

На странице создания меню указываем его имя «Меню1» и системное имя «menu-1».

Жмем кнопку «Создать».

Все! Меню создано.

Что значит системное имя меню

Покажу, для чего нужно системное имя меню. Идем в phpmyadmin управляющий базой данных сайта.

• Ищем таблицу: префикс_menu_types.
• Открываем ее (клик по названию), что соотвествует SQLзапросу:
• SELECT * FROM `префикс_menu_types`
• И видим системное имя созданных меню (тип меню).

Вывод: системное имя меню нужно для создания уникальных значений в полях таблицы menu_types базы данных Joomla.

Итак, мы создали меню Joomla, пора создавать пункты меню.

Создаем пункты меню Joomla

На вкладке Меню→Пункты меню→Создать меню, создаем пункт меню.

class="eliadunit">

Даем пункту меню имя.

Выбираем тип пункта меню. Пусть это будет тип меню: Блог категории.

Указываем целевое окно: Новое окно с элементами навигации.

Справа указываем название нашего меню и родительский элемент данного пункта меню (2,3).

На других вкладках выставляем другие настройки пункта меню:

Параметры макета Блога (3) – шаблон блога. Можно указать количество колонок.

Отображение (4) – шаблон показа отдельного материала;

Настройки интеграции (5)– включаем создание RSS лент для этого пункта меню.

Параметры страницы (7). Здесь можно задать альтернативный заголовок, который буде виден в браузере. Также можно включить «Заголовок страницы». Он будет виден в начале всех страниц этого пункта меню в тегах

, что соответствует всем страницам категории блога.

Метаданные (8). Нужно заполнить метаданные для этого блога, а именно descriptionи keywords. Descriptionдолжен быть уникальным и длинной не более 165 знаков. Keywords не обязателен.

После проверки всех настроек пункта меню, жмем «Создать» или «Создать закрыть».

Всё! Пункт меню создан. Осталось разместить меню на сайте.

Как разместить меню на сайте Joomla

Разместим два меню на сайте. Горизонтальное выпадающее и вертикальное с показом всего дерева меню.

Как разместить выпадающее горизонтальное меню Joomla

Выпадающее горизонтальное меню Joomla размещаем в специальном модуле шаблона, под названием «menu». В шаблоне могут быть созданы дополнительные поля для размещения меню, например footermenu, topmenu.

Для создания модуля меню идем на вкладку: Менеджер модулей →Создать меню. Выбираем тип модуля «Меню».

Настройки модуля меню

На вкладке «Привязка к пунктам меню» указываем на каких страницах сайте показывать этот модуль с меню.

Меню - это отдельный блок, который имеет пункты меню. Функция меню - создание списка ссылок на различные материалы или разделы сайта. И формирование параметров вывода этих материалов. Т.е. куда выполнен переход и как будет выглядеть данная статья, категория или раздел.

Блог категории: статьи с расширением расположены на странице одна за другой в виде столбца или нескольких столбцов и внизу страницы могут быть расположены ссылки на другие статьи этой категории.

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

Меню – это набор кнопок, которые приведут пользователя на конкретные объекты: статьи, список категорий и т.п. Вывести информацию на сайт можно как в виде блога, так и в виде статичной страницы.

Открыв окно «Менеджер меню» (с помощью кнопки «Меню» на панели управления) можно увидеть страницу с уже созданными типами меню.

Для создания нового меню нужно нажать на кнопку «Создать».

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

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

Для создания пунктов меню необходимо в «Менеджере меню» нажать на кнопку «Пункты меню» в одноименном столбце.

На странице «Пункты меню» нажать на кнопку «Создать»

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

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

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

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

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

Из архива – в виде блога с фильтром, который позволяет задавать параметры отбора материала. Для создания блога категории необходимо нажать на ссылку «Блог категории».

На открывшейся странице заполнить поля:

Заголовок - текст который будет отображаться в меню

Псевдоним - текст, который станет основой url для этого пункта

Показать в - привязать пункт к определенному меню

Родительский элемент - указать родительский элемент пункта

Доступ - указать доступ к пункту

Открывать в - в каком окне будет открываться пункт меню

Во вкладке «Параметры - Основные»:

Описание - скрыть или показать описание

Картинка - описания скрыть или показать картинку описания

Во всю ширину - указать количество новостей, отображаемых во всю ширину области контента

Вступление - указать количество новостей, у которых показывается только вступительный текст

Колонки - указать, во сколько колонок будут выстроены материалы

Примечание : Клавиша «Сменить тип» позволяет сменить тип пункта меню.

You have no rights to post comments

Для сайта любого уровня имеет большое значение то, насколько хорошо скомпонован его стиль, как все «склеено» воедино. Но в следующую же минуту, дизайн отходит на другой план, поскольку куда важнее становится то, насколько удобно организован интерфейс ресурса, как распределены материалы, насколько большая вероятность того, что с помощью меню можно добраться до любого раздела. И тогда сам владелец проекта уже должен думать о том, а действительно ли , которое предлагает разработчик шаблона настолько удобное, правильно ли и комфортно ли работать с поиском материалов, присутствует ли разделение тех же статей по категориям? Если данный аспект не доводить изначально до идеала, можно потерять тех посетителей, которые действительно могли бы принести вам прибыль, но просто не захотели иметь дело с непрофессиональным ресурсом, поскольку в ином случае, организация навигации по сайту была бы совсем другого уровня. Но не нужно думать, что только предоставленные в Joomla шаблон меню инструменты, становятся тем пределом, с которым придется работать. Для совершенствования структуры и навигации вашего проекта, можно легко использовать расширения, например Joomla модуль меню , способные внести очень значимые изменения в этот сегмент.

Конкретные предложения по доработке меню

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

Создание категорий и прочего

Само собой, что используя различные тематические направления, нужно обеспечивать посетителям прямой доступ к нужным материалам, притом желательно сделать каждую категорию соответствующей её наполнению. Если тот формат, в котором ваш стандартный интерфейс выводит категории, вам не нравится, можно использовать соответствующие расширения. Для этого у нас вы найдете решения, выводящие категории в виде, подобном выпадающему меню, те, которые специально устанавливаются для сотрудничества с К2, или просто организовывают удобный доступ к подборкам контента, соответствующего определенной теме. В итоге, даже вам будет комфортнее работать со своим проектом, изначально распределяя новые поступления по «полочкам», ведь и поиск, и корректировка таких материалов становится удобней.

Сделайте перемещение по сайту действительно удобным

Когда проект оснащается удобным меню, когда на странице четко распределены категории, и даже не используя поиск можно найти занимательный для себя материал – с таким ресурсом хочется работать. К тому же, как и говорилось выше, все нынешние разработки направлены еще и на то, чтобы своим стилем исполнения привлечь внимание, ведь без этого тоже нельзя. Так что если вас не устраивает стандартный устрой основных элементов навигации на сайте, используйте расширения из этой категории чтобы сделать меню 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 = JFactory::getDocument(); // получаем параметры
$doc->addStyleSheet(JUri::base().’/templates/’.$this->template.’/css/vmenu.css’); // подключаем файл стилей
$doc->addScript(JUri::base().’/templates/’.$this->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 > a:hover, ul.vmenu li.active > a, ul.vmenu li >
ul.vmenu li.parent > 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 > a:hover, ul.vmenu2 li.active > a, ul.vmenu2 li > a:focus {background-color:transparent; color:#0088CC}
ul.vmenu2 li.parent > 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}

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

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

Переходим во вкладку «Дополнительные параметры». Здесь ВВОДИМ ПРОБЕЛ и вставляем суффикс класса меню — 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->
?>

У нас получится примерно следующее:

$doc = JFactory::getDocument(); //получаем параметры
$doc->addScript(‘http://code.jquery.com/jquery-latest.min.js’); //подключаем последнюю версию библиотеки jQuery
$doc->addScript(JUri::base().’/templates/’.$this->template.’/js/menu-collapsed.js’); //подключаем скрипт меню, в данном случае это вариант 1
?>

И еще кое что. В joomla 2.5 нет тип пункта меню Системные ссылки -> Заголовок, там есть только тип текстовый разделитель — Разделитель, но такой тип пункта нам не подойдет, т.к. заголовок пункта меню не будет обрамлен ссылкой. В данном случае вам необходимо выбрать тип «Внешний URl» и в качестве урл вставить заглушку — #. Все остальное тоже самое.

Вот и все, что хотел сказать. Если что то не получается (возможно и я где то ошибся в тексте), то задаем вопросы в комментариях. Всем пока, до встречи в следующих постах!