Joomla 3 горизонтальное меню – Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.

Содержание

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

 

 

В дистрибутиве  Joomla 2.5 не предусмотрено горизонтальное расположение меню (в отличае от дистрибутива  Joomla 1.5). Но  у многих вебмастеров возникает желание или  необходимость установить горизонтальное меню для своего проекта. Как его сделать?

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

 

Как самостоятельно создать горизонтальное меню

Для начала нужно создать меню и присвоить ему заголовок и системное имя (тип меню). 

Заголовок и системное имя

Затем создать модуль меню и привязать его к раннее созданному пункту меню. 

Как самостоятельно создать горизонтальное меню

Затем в настройках шаблона изменить css стиль шаблона css/template.css. Допишите в конце такой код:

#main ul {
display: block;
text-align: left;
color:#2a6bb2;
}
#main  ul li {
display: inline;
margin: 0 !important;
padding: 0;
}

Где main нужно заменить на системное имя вашего меню.

 

Создать горизонтальное меню при помощи программы Artisteer

Для данной задачи будем использовать шаблон Joomla 2.5, который создадим при помощи программы Artisteer. Про программу смотрите: Artisteer программа — помощник web-мастера

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

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

Как сделать подпункт меню? Да очень просто, при создании пункта меню или в режиме его редактирования указать для него «Родительский элемент».

 Создать горизонтальное меню

На данном скриншоте представлен пример пункта и подпунктов горизонтального меню:
пункт меню — Файл robots.txt для Joomla 2.5
подпункт меню — robots.txt Ошибки и рекомендации.
Аналогичным образом строится иерархия для всех остальных пунктов.

Созданный модуль меню устанавливаем в позиции шаблона “User3”.

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

 

Создать горизонтальное меню при помощи модуля ARI Ext Menu

 

Многофункциональный модуль меню Joomla 2.5 ARI Ext Menu предназначен для создания как горизонтального, так и вертикального меню. Выбор типа меню и настройка данного меню описано в статье:

Многофункциональный модуль меню Joomla 2.5

Горизонтальное меню на Protostar Joomla 3x

На Joomla 3x есть проблемы с созданием горизонтального меню, так как изменён модуль и в нём нет возможности указать его тип отображения. Прописывание суффикса помогает не всегда и надо добивать шаблон ручками через код CSS. Сегодня я расскажу, как сделать горизонтальное меню с выпадающими категориями на примере шаблона Protostar, и приложу к материалу сам файл template.css.

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

Итак, делаем горизонтальное выпадающее меню на шаблоне Protostar и Joomla 3.5.

Настройки меню

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

  1. — Новое меню, я назвал его Верхнее меню,
  2. — Категории,
  3. — Подкатегории.

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

В «параметрах ссылки» включаем «показывать в меню» и «создать заголовок», остальноё всё идёт по умолчанию.

Иные настройки нужны пункту подкатегория. Тут важно указать родительским элементом не корневой пункт, а категорию. Тип пункта меню на своё усмотрение, я на denver сделал подкатегории блогами, а категории списками материала. На первом скрине настройки подкатегории.

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

Теперь создаём модуль для вывода нашего верхнего горизонтального меню. В настройках модуля указываем:

  1. Выбор меню – верхнее,
  2. Базовый пункт – текущее,
  3. Показывать подпункты – да,
  4. Показывать заголовок – нет.

Также надо указать позицию, я указал position-1, она идеально подходит для вывода в шаблоне Protostar.

Сделано, смотрим на сайт и не видим ничего горизонтального, так как Joomla 3,5 тупит и всё пытается вывести по вертикали.

Настройка CSS

Никакие попытки прописать суффикс в модуле результата не принесли, поэтому пришлось идти в css и переписывать весь блок отображения меню. Я делаю пробник Joomla 3,5 на Denver, но суть правки стилей одна – нам надо заставить меню выводиться горизонтально и привести его в божеский вид.

В папке шаблона CSS находится файл template, его и будем править.

Меню мы выводим в position-1, поэтому править будем в стилях блок .navigation.

Цвет указываем через background-color,

Позиционирование шрифта по высоте меню margin-top,

От острых углов избавляемся с помощью border-radius.

В целом начало блока CSS у меня вышло таким:

.navigation {
clear: both;
font: bold 16px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: #1E90FF;
height:36px;
border-bottom:4px solid #fff;
border-radius: 7px; }

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

Для шаблона Protostar предлагаю скачать template.css  в средней степени готовности, допилите его сами, по верхнему меню в нём сделано всё и подправлены некоторые иные начальные косяки разработчиков по другим моментам.

Как в Joomla (джумле) сделать выпадающее меню

Выпадающее меню Joomla 3

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

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

Выпадающее меню Joomla 3

В тоже время другой стандартный шаблон Beez3, вообще, на мой взгляд, не корректно отображает данное меню.

Выпадающее меню Joomla 3

Выпадающее меню Joomla 3

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

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

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

Выпадающее меню Joomla 3

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

Выпадающее меню Joomla 3

Далее переходим в новое меню и создадим несколько пунктов – для начала родительских.

Выпадающее меню Joomla 3

При этом для создания родительских ссылок меню, в поле “Родительский элемент” необходимо выбрать значение “Корневой пункт меню”. Как только все родительские элементы созданы, приступаем к созданию дочерних элементов.

Выпадающее меню Joomla 3

Обратите внимание, что создавая дочернюю ссылку в поле “Родительский элемент” необходимо выбрать ранее созданный родительский пункт меню. Таким образом, дочерние элементы, будут формировать выпадающую часть меню, если конечно данная возможность поддерживается шаблоном. После добавления всех необходимых ссылок, в менеджере меню мы получим следующую структуру.

Выпадающее меню Joomla 3

Итак, для CMS Joomla выпадающее меню, практически готово, осталось только создать модуль, который отобразит его в требуемой позиции шаблона. А значит, переходим в “Менеджер меню” и создаем новый модуль меню.

Выпадающее меню Joomla 3

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

Выпадающее меню Joomla 3

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

Выпадающее меню Joomla 3

После сохранения модуля переходим в пользовательскую часть для проверки.

Выпадающее меню Joomla 3

Как Вы видите, для шаблона Photostar меню отлично отображается, но как сделать выпадающее меню в joomla 3, для другого шаблона спросите Вы. Ответ достаточно прост – использовать стороннее расширение. И в данной статье мы рассмотрим модуль под названием ARI Ext Menu.

Выпадающее меню Joomla 3

Кликая по кнопке “Download” нас перенаправляют на сайт разработчика, где приведена ссылка для скачивания модуля.

Выпадающее меню Joomla 3

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

Выпадающее меню Joomla 3

Модуль достаточно функционален и содержит огромное количество различных настроек, на обзоре которых я сейчас не буду останавливаться, тем более что практически все они отвечают за внешний вид и требуют простого тестирования. Главное, необходимо указать заголовок, выбрать позицию отображения в шаблоне, изменить состояние на “Опубликовано” и в поле “Menu name” выбрать меню которое будет отображаться в модуле.

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

Выпадающее меню Joomla 3

То есть модуль успешно выполняет свою задачу.

Теперь Вы знаете, как в джумле сделать выпадающее меню. Если Вы желаете более подробно изучить структуру модулей на уровне кода, Вам будет полезен наш новый курс Joomla-Профессионал: создание расширений для joomla.

На этом данная статья завершена! Всего Вам доброго и удачного кодирования!!!

Выпадающее меню Joomla 3

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее Выпадающее меню Joomla 3

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Урок 11. Создание меню в Joomla 3

Урок 11. Создание меню в Joomla 3

Подробности
Категория: Уроки Joomla
Просмотров: 9964

Урок 11. Создание меню в Joomla 3

В этом уроке мы рассмотрим процесс создания меню на Вашем сайте под управлением CMS Joomla 3. На сайтах под управлением Джумла можно создать меню любого вида. Мы рассмотрим 3 основные типа меню для Вашего сайта

Обычное меню в Joomla 3

Верхнее меню в Joomla 3

Выпадающее меню в Joomla 3

 

 

Создание обычного меню в Joomla 3

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

 

Обычное меню

 

            Создается такое меню довольно просто. Для начала необходимо определиться с позицией, на которой будет расположен данный пункт меню. Чтобы просмотреть позиции Вашего сайта необходимо к его адресу добавить значение «?tp=1» и перейти по указанному адресу. Например, site.ru/?tp=1. В итоге должны будут отобразиться все позиции, которые имеются в установленном на Вашем сайте шаблоне

 

Позиции шаблона

 

            Если позиции не отображаются, то, скорее всего у Вас отключен их вывод. Чтобы включить их, перейдите в раздел СИСТЕМА – ОБЩИЕ НАСТРОЙКИ – МЕНЕДЖЕР ШАБЛОНОВ.

            И в разделе ПРОСМОТР ПОЗИЦИЙ МОДУЛЕЙ установите значение – ВКЛЮЧЕНО.

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

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

1) Для начала переходим в раздел МЕНЮ – МЕНЕДЖЕР МЕНЮ

 

МЕНЕДЖЕР МЕНЮ

 

2) Здесь нас интересует пункт СОЗДАТЬ МЕНЮ

 

СОЗДАТЬ МЕНЮ

 

3) После этого Вы попадете в раздел параметров меню.

 

раздел параметров меню

 

Вам необходимо заполнить следующие поля:

Заголовок – название Вашего меню. Можете указать «Левое меню» или же задать ему конкретное название «Статьи о рыбалке»

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

Описание – можете написать несколько фраз о своем меню. Поле необязательно и его можно не заполнять.

После этого жмите кнопку СОХРАНИТЬ И ЗАКРЫТЬ

4) Теперь необходимо указать позицию, где будет располагаться данное меню. Мы создали меню, присвоив ему название «123». Теперь оно расположено в разделе МЕНЮ – МЕНЕДЖЕР МЕНЮ.

 

МЕНЕДЖЕР МЕНЮ

 

5) Жмем на кнопку «Добавить модуль для данного типа меню»

 

Добавить модуль для данного типа меню

 

Здесь Вам необходимо указать:

Заголовок меню – укажите название Вашего меню.

Показывать заголовок – установите ПОКАЗАТЬ если хотите, чтобы заголовок отображался на сайте.

Состояние – установите ОПУБЛИКОВАНО

В разделе ПОЗИЦИЯ Вы должны указать позицию, где будет расположено созданное меню

 

Создание меню

 

К примеру, на сайте используется шаблон — Lightbreeze-blue значит, выбираем его и указываем позицию, где будет расположено это меню!

После этого, жмем СОХРАНИТЬ И ЗАКРЫТЬ.

Но меню не будет отображаться на сайте, до тех пор, пока Вы не создадите хотя бы 1 пункт. Для создания пункта меню необходимо в разделе МЕНЮ выбрать созданное меню и в выпадающем окне выбрать раздел СОЗДАТЬ ПУНКТ МЕНЮ.

 

СОЗДАТЬ ПУНКТ МЕНЮ

 

После этого мы попадаем на страницу создания пункта меню.

 

страница создания пункта меню

 

Здесь укажите заголовок меню и выбирайте ТИП ПУНКТА МЕНЮ

 

ТИП ПУНКТА МЕНЮ

 

Джумла предлагает своим пользователям большое разнообразие модулей для меню. Обо всех этих модулях будет рассказано в отдельном уроке. Мы же попытаемся создать пункт меню, который будет выводить отдельный материал. Для этого выбираем значение МАТЕРИАЛЫ – МАТЕРИАЛ.

Далее в разделе ВЫБОР МАТЕРИАЛА необходимо указать имеющийся на сайте материал.

 

Выбор материала

 

В итоге у Вас должно получиться следующее

 

Создание меню

 

Жмем СОХРАНИТЬ И ЗАКРЫТЬ и после этого на Вашем сайте отобразится только что созданное меню.

 

Созданное меню

 

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

 

Создание верхнего меню в Джумла 3

            У многих начинающих пользователей CMS Joomla 3 возникают проблемы с созданием верхнего или горизонтального меню на своем сайте. Хотя в этом нет ничего сложного. Давайте на примере рассмотрим процесс создания такого меню. Данный процесс мало чем отличается от создания обычного меню на Джумле.

1) Заходим в раздел сайта  МЕНЮ – МЕНЕДЖЕР МЕНЮ

 

МЕНЕДЖЕР МЕНЮ

 

2) Нажимаем создать меню и создаем новое меню, назвав его ВЕРХНЕЕ МЕНЮ

3) Только теперь нам понадобиться указать месторасположение нашего меню в верхней части сайта. Для этого вновь просматриваем имеющиеся позиции, введя в поисковой строке запрос site.ru/?tp=1 (где site.ru – название Вашего сайта).

 

Позиции сайта

 

Как видим, в верхней части нашего сайта есть только 2 позиции – Позиция 2 и Позиция 1.

Теперь заходим в раздел МЕНЮ – МЕНЕДЖЕР МЕНЮ и жмем на кнопку Добавить модуль для данного типа меню

Так же как и для обычного меню прописываем заголовок. А в разделе позиция, Выбираем позицию 1 или 2.

 

Выбираем позицию

 

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

 

Верхнее меню

 

Создание выпадающего меню на Joomla 3

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

Для этого создаем основное меню, которое назовем «Группа материалов» и два подпункта этого меню «Подпункт 1» и «Подпункт 2». Для того, чтобы привязать подпункты меню к основному, при создании подпунктов в поле РОДИТЕЛЬ укажите основной пункт меню, в нашем случае это «Группа материалов». В итоге у Вас должно получиться так, как показано на рисунке ниже.

 

Создание выпадающего меню на Joomla 3

 

После этого заходим в настройки основного меню «Группа материалов» и в разделе ПОКАЗЫВАТЬ ПОДПУНКТЫ МЕНЮ устанавливаем значение ДА.

 

ПОКАЗЫВАТЬ ПОДПУНКТЫ МЕНЮ

 

В итоге мы получим довольно удобное выпадающее меню.

 

выпадающее меню

 

Заключение

В данном уроке мы рассмотрели основные вопросы, касающиеся создания меню на Joomla 3. Если у Вас возникли какие-либо вопросы, Вы можете задавать их, оставляя комментарии к этой статье!

  

Добавить комментарий

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

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

горизонтальное меню в Joomla 2.5горизонтальное меню в Joomla 2.5

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

vertical-menuvertical-menu

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

горизонтальное меню в Joomla 2.5горизонтальное меню в Joomla 2.5

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

Ищем там такой параметр, как “Суффикс класса меню” и ставим значение, например, _gor. Что в дальнейшем будет означать горизонтальный.

горизонтальное меню в Joomla 2.5горизонтальное меню в Joomla 2.5

По умолчанию, меню располагается вертикально списком

а за отображение на самом проекте отвечает подключаемый файл CSS кода. Соответственно, нам необходимо найти файл стилей (обычно он находится в папке с шаблонами: /templates/Ваш_шаблон/css).

К примеру, во многих шаблонах это (/templates/Ваш_шаблон/template.css).

Открываем, скопировав на жесткий диск файл со стилями, и в самом низу пишем:

.menu_gor li {display:inline;]

Это действие как раз и сделает наше меню горизонтальным.

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

горизонтальное меню в Joomla 2.5горизонтальное меню в Joomla 2.5

Убрав из меню суффикс _gor, можно с легкостью вернуть меню в исходное значение.

И не забудьте заменить файл стилей перед проверкой результата.

Создать и настроить модуль Меню на Joomla сайте

class=»eliadunit»>

 

Вступление

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

Где лежит?

Каталог модуля «Меню» лежит в каталоге /modules/mod_menu корневой папки сайта. В каталоге стандартные файлы для системных модулей:

  • Каталог tmpl;
  • Файлы helper.php;
  • mod_menu.php;
  • mod_menu.xml.

github joomla joomla cms modules

Зачем нужен?

Модуль Меню на Joomla сайте нужен, чтобы показать в любой выбранной позиции модулей любое, ранее сделанное меню сайта.

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

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

Как создать?

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

  • Из основного меню административной панели идём на вкладку Модули;
  • В тулбаре вкладки жмём кнопку «Создать»;
  • Из списка типов модулей выбираем тип Меню;
  • Заполняем настройки модуля меню на 4-х вкладках. Сохраняемся;
  • Всё меню создано, после чистки кэша сайт оно покажется на сайте.

sozdat modul menu

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

Посмотрим на 4 вкладки настроек модуля меню.

Вкладка 1 — Модуль

mod menu nastroyka 1

Основная вкладка настроек. Здесь

Обязательно заполняем название модуля;

Если хотите скрыть название модуля, сразу скрываете его в настройке справа «Показывать заголовок»;

 В полях настроек нужно: выбрать само меню, которое хотите показать (1), выбрать базовый пункт меню (2), указать начальный (3) и конечный пункт меню (4), и определиться с показом подпунктов меню (5). 

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

Указание начального (3) и конечного (4) пункта меню позволяет сокращать длинные меню, сложной структуры сайта. Аналогичное назначение у настройки показ подпунктов меню (5).

В правой части вкладки обязательно заполняем показ заголовка (6), состояние (8) и позицию в шаблоне (7). Остальные настройки по желанию.

class=»eliadunit»>

Интересны поля «Порядок», здесь вы сразу можете ранжировать создаваемый модуль в модулях этой позиции. Это можно сделать и в таблице модулей перетаскиванием модуля.  

«Примечание» создается для администраторов сайта и видно в таблице модулей.

«Начало публикации» позволит запланировать выход модуля по дате.

Вкладка 2 — Привязка

mod menu nastroyka 2

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

Выбор страниц показа осуществляется по пунктам меню из фильтра «На всех …», «Ни на одной», «Только на указанных», «На всех кроме указанных».

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

Вкладка 3 — Дополнительно настройки

mod menu nastroyka 3

Здесь вы можете задать уникальный внешний вид модуля, если в вашем шаблоне есть дополнительные стили модулей или вы сами создали такие стили для модулей.

Можно поступить наоборот. Здесь указать любой свой «Суффикс класса меню» и «Суффикс CSS-класса модуля», а потом добавить к этому модулю своё CSS правило.

В отличие от настроек других модулей, здесь есть смена стилей Java Script выпадающего меню (Позиция назначения).

Вкладка 4 — Права

mod menu nastroyka 4

Заполняются для многопользовательских сайтов с количеством администраторов больше одного.

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

Вывод

В этом уроке мы рассмотрели модуль Меню на Joomla сайте. Очень полезен для создания полноценного футера сайта с дополнительными меню технической и информационной навигации.

©joomla-abc.ru

Еще уроки

  • 10 лучших WAMP платформ для CMS Joomla под Windows, урок 3
  • 12 Правил оптимизации Joomla сайта, урок 28
  • 2 программы FTP клиент для создания Joomla сайта – FilleZilla, WinSCP, урок 4
  • 33 первых расширения Joomla сайта — плагины и компоненты для расширения функционала сайта, урок 29
  • 5 Программ для работы с изображениями Joomla, урок 6
  • Favicon сайта Joomla – как создать и установить favicon на сайт Joomla, урок 13
  • ItemId в Joomla URL, что такое ItemId, зачем он нужен и почему он важен
  • Joomla 3.8.0 доступна для установки и обновления, общее описание нового релиза
  • Joomla модуль Обёртка (Wrapper)
  • Joomla на XAMPP — управление Joomla в автономном режиме на локальной машине, урок 7

 

class=»eliadunit»>

Вертикальное меню для joomla 3

Вертикальное меню для joomla 3

От автора: приветствую Вас дорогой друг. В данной статье мы с Вами поговорим о том, как создается вертикальное меню для joomla 3. Конечно, тема не новая и уже несколько раз рассматривалась в статьях нашего сайта и скорее всего Вы отлично знаете, как реализуется данный элемент. Но так как меню, это важнейший блок любого хорошего веб-сайта, думаю совсем не лишним будет, рассмотреть парочку дополнительных расширений, благодаря которым очень легко сформировать данный навигационный блок.

Итак, как было сказано выше в данной статье, мы с Вами рассмотрим два достаточно интересных модуля, которые формируют в CMS Joomla вертикальное меню. А значит, первый модуль который мы рассмотрим – это Simple Responsive Menu.

Вертикальное меню для joomla 3

Традиционно на странице описания текущего расширения, кликаем по кнопке “Download” для перехода на официальный сайт разработчика.

Вертикальное меню для joomla 3

Вертикальное меню для joomla 3

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

На момент написания данной статьи, последняя актуальная версия – 1.10, соответственно ее и скачиваем, используя кнопку “Download Now”. После скачивания, как обычно устанавливаем модуль. Используя менеджер расширений Joomla.

Вертикальное меню для joomla 3

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

Вертикальное меню для joomla 3

И переходим на страницу настройки только что установленного модуля.

Вертикальное меню для joomla 3

В параметре “Select menu” выбираем меню, пункты которого будут отображаться в качестве контента модуля. Если меню многоуровневое, то есть содержит как родительские так и дочерние ссылки, значит в параметре “Show Sub-menu Items”, необходимо указать “Да”, в этом случае будут отображаться на экран подпункты. Так же, используя параметры “Start level” и “End Level”, Вы можете определить начальный и конечный уровень вложенности ссылок, то есть те уровни, которые будут отображены на экране. И наконец, выбираем позицию для вывода модуля на экран, указываем на каких страницах он будет доступен и определяем статус “Опубликовано”.

Теперь перейдем в пользовательскую часть для проверки результатов.

Вертикальное меню для joomla 3

Как Вы видите, расширение отлично работает. При этом в модуле добавлена адаптивность, то есть при определенном размере экрана, контент модуля сворачивается в выпадающий список, тем самым значительно экономиться используемое место экрана.

Вертикальное меню для joomla 3

Параметры, отвечающие за адаптивность содержатся на вкладке “Responsive Options”, страницы настройки текущего модуля. Теперь переходим к следующему модулю, под названием Joombig Menu Tree.

Вертикальное меню для joomla 3

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

Вертикальное меню для joomla 3

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

Вертикальное меню для joomla 3

Далее, используя кнопку “DOWNLOAD FREE”, скачиваем бесплатную версию модуля и устанавливаем стандартным способом, при помощи менеджера расширений.

Вертикальное меню для joomla 3

Теперь переходим на страницу настройки только что установленного модуля.

Вертикальное меню для joomla 3

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

Enable/Disable jQuery – подключить собственную библиотеку jQuery;

Width of module(%) – ширина модуля в процентах;

Margin – внешние отступы;

Select Menu – выбор меню отображаемого модулем;

Show/Hide Title Directory – показать или же скрыть заголовок родительского каталога (строка котрая будет отображаться над всеми пунктами меню)

Title directory – заголовок пункта верхнего уровня;

Start Level – начальный уровень показа многоуровневого меню;

End Level – конечный уровень показа многоуровневого меню;

Show Sub-menu Items – показывать ли вложенные пункты меню.

После публикации модуля, переходим в пользовательскую часть для проверки результатов.

Вертикальное меню для joomla 3

Вообще модуль меню это достаточно не сложный модуль, который по большому счету можно создать самостоятельно, но для этого необходимо знать API CMS Joomla. Поэтому если Вы желаете научитсья создавать свои собственные расширения, которые в полной мере будут решать поставленные задачи, Вам будет полезен наш курс Joomla-Профессионал. Создание расширений для Joomla.

На этом данная статья завершена. Всего Вам доброго и удачного кодирования!!!

Вертикальное меню для joomla 3

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее Вертикальное меню для joomla 3

Joomla-Ученик

12 фишек без которых Вы не создадите полноценный сайт на Joomla!

Смотреть

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *