Создание вертикального выпадающего меню в joomla 3.5. Как создать меню в Joomla, вывод модуля меню в нужную позицию шаблона джумлы. Добавление новых пунктов

Всем привет! можно разделить на две составляющие: первая — это само меню, а вторая — его пункты. Звучит весьма странно. Само по себе меню это, фактически, коробка, которую мы создадим, назовем и будем выводить на сайт с помощью соответствующего модуля. Но этого мало, его еще следует наполнить нужной информацией — пунктами. От типа и настроек пункта будет зависеть содержание страницы сайта, на которую он ведет. В этой статье мы рассмотрим все аспекты работы с меню Joomla: создание, настройка и добавление на страницы сайта.

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

Создание и настройка меню Joomla

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

Сразу после установки Joomla уже имеется одно меню — Главное. Если заглянуть в него, то можно увидеть даже одноименный пункт — «Главная».

Зачем для нас уже подготовили все это? Вот тут то мы и подошли к основополагающему правилу в работе Joomla: страница начинает существовать только после создания пункта меню (ПМ), связанного с ней (на нее ссылающегося). И не важно, выводится меню на сайт или нет, главное, чтобы оно было и был пункт на соответствующую страницу. Даже главная страница создана по такому принципу. Если пойти дальше в своих рассуждениях, то можно сказать, что в Joomla нет страниц как таковых, есть пункты меню, которые выполняют эту роль . Тип же пункта отвечает за то, какая информация будет выводиться в области контента новой страницы.

Что в итоге. Нужна новая страница? Создаем меню, создаем в нем пункт с нужным типом и получаем новую страницу. Контент страницы будет зависит от выбранного типа и настроек ПМ. Это нужно понять и запомнить!

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

Все что требуется, это ввести:

  • Заголовок — будет отображаться в панели управления, в списке доступных меню;
  • Тип — системное имя латинскими буквами;
  • Описание — заполнять необязательно.

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

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

Добавление новых пунктов

Теперь переходим к самому интересному. Создать меню это только пол дела, главное его наполнить пунктами! Для этого выбираем меню из списка уже имеющихся (просто кликаем по его названию) и попадаем в раздел, отвечающий за его пункты. Для создания нового пункты нажимаем на кнопку «Создать» в тулбаре. Попадаем в конструктор пунктов, давайте разберем его настройки.

Первой и главной опцией является . Он отвечает за то, какого рода информация будет выводится в области контента страницы. Типов всего 29. Достаточно много. Каждый тип имеет свои обязательные параметры, которые позволяют конкретизировать информацию, выводимую на страницы.

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

Второй обязательной опцией является Заголовок — под этим именем пункт будет добавлен в меню.

  • Алиас — заполнять необязательно. При включенных SEF Joomla самостоятельно сформирует читабельный адрес для новой страницы.
  • Примечание — небольшая пояснительная записка.
  • Ссылка — заполнится автоматически после сохранения ПМ. Будет отображаться оригинальный URL адрес страницы до преобразования его к человеко понятному (SEF) виду.
  • Состояние: опубликовано — если меню уже выведено на сайт, то данный пункт сразу после сохранения появится в нем; не опубликовано — пункт сохранится, но не появится на сайте; в корзине — удалить.
  • Доступ — определяет уровень доступа.
  • Меню — куда добавить создаваемый пункт.
  • Родительский элемент — по умолчанию это корневой ПМ, но так же можно сделать его подпунктом (дочерним элементом) другого ПМ.
  • Порядок — возможность задать порядковый номер для пункта, появляется после его сохранения.
  • Целевое окно — в каком окне браузера открывается страница, на которую ссылается данный пункт меню.
  • Главная страница — созданная страница станет главной для сайта. Заметьте, главная страница только одна.
  • Язык для данного пункта меню.
  • Стиль шаблона — определить стиль для новой страницы сайта. По умолчанию будет использоваться стиль активного шаблона Joomla.
  • ID — уникальный идентификационный номер.

Настройка порядка пунктов меню

Список ПМ является строго упорядоченным — соблюдается иерархия и порядок следования.

Иерархия представляет, своего рода, древо, в котором каждый пункт является братом (стоит на одной ступени иерархии), родительским (более высокий уровень) или дочерним (стоит на ступень ниже и является подпунктом родительского элемента) элементом для других пунктов меню.

В качестве примера, на рисунке для пункта «Франция»: «Великобритания» и «Германия» — братья, а «Европа» — родительский элемент.

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

Модуль меню Joomla

Меню бывают:

1. Мнимые — они не выводятся на сайт, а создаются только для того, чтобы добавить в них пункты и тем самым создать новые страницы сайта.

2. Действительные — выводятся на сайт и используются для навигации.

Если вы уже читали статьи, посвященные модулям Joomla, то должны догадаться — меню выводится на сайт с помощью соответствующего одноименного модуля.

В прошлых статьях, я уже рассказывал об и об , присущих только модулю Меню. Для наглядности рассмотрим их применительно к произвольному Левому меню.

1. Подробно.

  • Заголовок — если заголовок будет выводиться на страницы сайта, то он должен быть осмысленным и понятным прежде всего читателю. Если заголовок не выводится на сайт, то можно по этому поводу особо не заморачиваться.
  • Показывать заголовок — соответственно показывать заголовок, указанный выше, на страницах сайта или нет.
  • Позиция — позиция для модуля зависит от используемого . Чаще всего определить место под будущее меню не составит труда: под главное выделяется место в шапке сайта, а под дополнительные — левые или правые колонки. Конечно, есть шаблоны попроще, в которые для меню предусмотрены только левая или правая колонки.
  • Состояние — выбираем «Опубликовано», чтобы сразу после сохранения, меню появилось на страницах сайта.
  • Доступ — если это не системное меню для администраторов Joomla, а обычное для всех пользователей сайта, то оставляем уровень доступа — «Для всех».
  • Порядок — определяет порядок следования модулей на одной позиции.
  • Начало/завершение публикации — если меню не носит временный характер, то данные опции трогать не стоит.
  • Последние опции не требуют нашего вмешательства.

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

3. Основные параметры

  1. Выбираем меню, которое собираемся выводить на сайт.
  2. Как я говорил, пункты в меню представляют собой иерархию. Данная опция позволяет задать, какие уровни этой иерархии будут выводится. Чтобы отображались все ПМ, включая подпункты, в начальном уровне укажите «1», в последнем — «Все», а в следующей опции выберете «Да».

Ну вот вроде со всем разобрались! Спасибо за внимание и до скорых встреч. Всегда ваш Дмитрий Афонин.

Здравствуйте друзья! На связи Заур Магомедов. В данной заметке хочу представить вам симпатичное вертикальное аккордеон меню для сайта на 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 шаблона вставим следующие строки:

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 { font: bold 12px Arial,Helvetica,sans-serif; list-style: none outside none; margin: 0; padding: 0; list-style:none; } ul.vmenu li { margin: 0 0 2px; } ul.vmenu 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.vmenu li > a:hover, ul.vmenu li.active > a, ul.vmenu li > a:focus {background-color:transparent; color:#0088CC} ul.vmenu 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.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 { background: url("../images/vmenu-arrow.png") no-repeat scroll 5px center transparent !important; 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}

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

Еще раз напомню! На демо-сайте два варианта меню и наверняка вы выберите один из них. В таком случае нет необходимости подключать оба файла скрипта, достаточно только одного.

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

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

Подключение меню в joomla 2.5.x

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

addScript("http://code.jquery.com/jquery-latest.min.js"); //подключаем последнюю версию библиотеки jQuery ?>

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

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» и в качестве урл вставить заглушку — #. Все остальное тоже самое.

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

Продолжаем знакомиться с администрированием 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.

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

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

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

Обзор модулей меню для CMS Joomla 3.x.

1. Maxi Menu CK

CMS Joomla 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

Расширение полностью совместимо с CMS Joomla 1.5-1.7/2.5/3. x.

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

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

3. Accordeon Menu CK

Расширение полностью совместимо с CMS Joomla 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

Расширение полностью совместимо с CMS Joomla 2.5/3. x.

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

5. DJ-Menu

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

Итак, мы создали 4 статьи, и пришло время создать главное меню сайта. Если посмотреть на сайт-образец , то мы увидим два меню: Главное меню (горизонтальное наверху) и Меню каталога товаров (вертикальное слева). На сайте, который мы создаем, мы видим пока только одно Главное меню, и расположено оно слева:

Давайте посмотрим, как вообще работают меню в Joomla. Сами меню создаются в пункте Меню - Меню :

Сейчас в менеджере меню у нас только Главное меню:

Если мы щелкнем по пиктограмме Пункты меню , то мы окажемся в Менеджере пунктов Главного меню:

Сейчас у нас только один пункт - Главная страница сайта. Давайте добавим наши пункты: Условия работы, Наши магазины, Контакты и Статьи. Для этого щелкаем по кнопке Создать . В открывшемся окне нам надо выбрать тип пункта меню. Все пункты нашего Главного меню указывают на обычные страницы сайта, поэтому мы выбираем тип - Статья, а в нем - Одна статья:

Теперь надо указать:

  • Заголовок пункта меню - Условия работы.

  • Псевдоним - cooperation.

  • Отображать в меню - Главное меню (другого у нас и нет пока).

  • Родительский пункт меню - Вверху (если бы мы создавали вложенный пункт меню, то могли бы указать здесь, в какой пункт меню он вложен).

  • Опубликовано - Да.

  • Уровень доступа - Общий (будет виден всем).

  • При нажатии открыть - В родительском окне (здесь можно выбрать и другие варианты, например, открывать в новом окне).

  • В основных параметрах (справа окна) щелкаем по кнопке Выбрать и в открывшемся окне выбираем наш материал - Условия работы (щелкаем по нему).


Пункт меню готов:

Обратите внимание в основных параметрах, в поле Выберите статью появилось название нашей статьи. Нажимаем кнопку Сохранить и видим, что наш пункт появился в Менеджере пунктов :

Аналогичным образом добавляем оставшиеся пункты меню: Наши магазины (stores), Контакты (contact) и Статьи (article):

Теперь идем на наш сайт, обновляем его и видим, что в Главном меню появились все наши пункты:

Можете пощелкать по ним и убедиться, что меню работает.

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

За то, в каком месте сайта отображается меню отвечает Модуль меню , а все модули у нас находятся в Расширения - Модули , туда мы и идем:

Заходим в модуль Главное меню для его редактирования (щелкаем по названию):

Давайте посмотрим, какие настройки есть у модуля меню:


Больше ничего трогать не будем, нажимаем на кнопку Сохранить . Теперь идем на наш сайт, стираем в адресной строке параметр tp=1, обновляем и видим, что наше Главное меню теперь располагается там, где мы и хотели

Подведем итог:

Чтобы создать в Joomla меню, необходимо:

  • Создать само меню и его пункты в Меню - Меню .

  • Создать и настроить модуль для работы меню в Расширения - Модули .

Сегодня мы лишь настраивали уже имеющееся Главное меню и его модуль. Чуть позже мы будем создавать новое меню (меню каталога товаров). Главное, что вы должны запомнить, что меню всегда состоит из двух частей: самого меню и модуля.
Похожие публикации