Как сделать меню выбора страницы в joomla. Создание меню. Ручная донастройка стилей BM Coll Menu

Для сайта любого уровня имеет большое значение то, насколько хорошо скомпонован его стиль, как все «склеено» воедино. Но в следующую же минуту, дизайн отходит на другой план, поскольку куда важнее становится то, насколько удобно организован интерфейс ресурса, как распределены материалы, насколько большая вероятность того, что с помощью меню можно добраться до любого раздела. И тогда сам владелец проекта уже должен думать о том, а действительно ли , которое предлагает разработчик шаблона настолько удобное, правильно ли и комфортно ли работать с поиском материалов, присутствует ли разделение тех же статей по категориям? Если данный аспект не доводить изначально до идеала, можно потерять тех посетителей, которые действительно могли бы принести вам прибыль, но просто не захотели иметь дело с непрофессиональным ресурсом, поскольку в ином случае, организация навигации по сайту была бы совсем другого уровня. Но не нужно думать, что только предоставленные в 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» и в качестве урл вставить заглушку — #. Все остальное тоже самое.

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

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

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

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

Создание базового пункта меню

1. В административной панели Джумла вверху находим раздел - Меню/Main Manu/Создать пункт меню.

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

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

В открывшемся окне находим «Материалы», где нам нужно выбрать один из представленных вариантов. У себя на сайте я в 99% использую «Список материалов категорий».

4. Теперь, когда вы определились и выбрали вышеуказанный тип меню, следует произвести «Выбор категории ». По умолчанию в системе будет отображаться Uncategorised. Здесь необходимо выбрать категорию, которая привяжется к меню. В дальнейшем возможно изменять привязку. Так что если вы ошибочно привязали не то что хотели, это всегда можно исправить, зайдя в меню Joomla.

5. В правой области окна находятся настройки связанные с отображением. Состояние - выбираем «Опубликовано». Главная страница – думаю и так все понятно. Если ее выбрать, весь материал категории будет отображаться на главной странице. Также можно задать «Родительский элемент». По умолчанию установлено «Корневой пункт меню». Этот раздел выполняет важную роль, так как позволяет создать подменю к выбранному в строке главному меню. Но так как у нас пока что только один пункт меню, то и привязывать особо нечего.

6. В итоге созданный нами пункт меню необходимо «Сохранить», нажав на одну из соответствующих кнопок в левой верхней части экрана.

Создание пункта меню с одним отображаемым материалом

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

Теперь можно перейти на главную страницу сайта и убедиться в существовании и работоспособности свеженького пункта меню Joomla и расположенном в нем контенте.

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

Спасибо за внимание и до скорых встреч на страницах Stimylrosta.

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

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

Где лежит?

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

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

Зачем нужен?

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

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

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

Как создать?

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

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

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

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

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

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

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

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

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

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

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

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

class="eliadunit">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Разновидностей вывода по пунктам меню, множество, но все они конечно используются редко. О самых популярных сейчас и пойдет речь.

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

Базовый пункт меню

1. Переходим в создание пункта меню для единственного меню (Main Menu).

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

3. Перед нами весь список назначения. Самый распространенный раздел списка - "Материалы". В нем происходит вывод одного или нескольких материалов, т.е. основного содержимого сайта.

Сейчас мы выводим один единственный материал.

4. Осталось выбрать самое главное - это сам материал. Переходим по новой кнопке: "Выбрать".

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

6. Самое главное сделано! Можно сохраняться .

7. На сайте в существующем "Главном меню" , появиться новый пункт, по которому можно перейти и убедиться в его работоспособности.

Другой вариант пункта меню

1. Страница на которую мы попадаем, после перехода по пункту меню может быть и абсолютно иного вида, как например блог категорий.

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

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

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

Если вы хотите превратить вертикальное меню в горизонтальное , то ознакомьтесь с уроком: