Як зробити меню вибору сторінки у 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;
}
(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 центр transparent !important;
border: medium none;
padding: 0 0 0 15px;
}
ul.vmenu2 ul ul 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 щодо висновку вмісту сайту. Налаштувати можна кожну дрібницю та налагодити сторінки за вашими вимогами: вивести контакти, зовнішнє посилання, посилання на скачування та багато іншого.

Якщо ви хочете перетворити вертикальне менювгоризонтальне, то ознайомтеся з уроком: