Многоуровневое выпадающее меню на базе mod_menu

artel-st

Захожу иногда
350
37 / 1

Многоуровневое выпадающее меню на базе mod_menu

« : 15.04.2012, 18:48:36 »

Тема конечно стара, как Мир, плюс существует куча сторонних расширений, но почему не использовать то, что уже установлено, немного модифицировав?!

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

В старом, добром Adobe Dreamweaver (в 3-ке и 4-ке точно) есть возможность использовать готовые решения Spry, в том числе и для создания выпадающих меню (списков) - им и воспользуемся

Для начала загружаем архив, содержимое который было ©пионерено именно из Adobe Dreamweaver.
Архив содержит:

spry.css - стили для выпадающего меню
spry.js - ява-скрипт для организации выпадающего меню

Распаковываем архив в папку assets нашего шаблона templates/папка нужного шаблона/assets

В index.php шаблона, между тегами <head></head> подключаем оба файла при помощи следующего кода:

Код

    <link href="<?php echo $this->baseurl?>/templates/<?php echo $this->template; ?>/assets/spry.css" rel="stylesheet" type="text/css" />
    <script src="<?php echo $this->baseurl?>/templates/<?php echo $this->template; ?>/assets/spry.js" type="text/javascript"></script>

В самом низу файла шаблона, перед тегами </body></html> дописываем такой код:

Код

<script type="text/javascript">
   <!--
       var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
   //-->
</script>

Затем переходим в панель управления сайтом: Расширения -> Менеджер модулей. Открываем модуль с меню, во вкладке "Дополнительные параметры" указываем (без кавычек):

ID Меню "MenuBar1"
Суффикс класса меню " MenuBarHorizontal"

ОБРАТИТЕ ВНИМАНИЕ! Перед суффиксом класса меню должен (!)обязательно стоять пробел!

Сохраняем. Все готово. Остается при помощи css-стилей привести меню в соответствие с дизайном нашего сайта.

З.Ы. работает начиная с J1.5. Под J1.0 просто нужно привести в соответствие API подключения файлов скрипта и css-стилей.
Кроссбраузерно от IE6.0, конфликтов с jquery и mootools не выявлено.

« Последнее редактирование: 16.04.2012, 20:52:39 от artel-st »

Записан

"Жираф - это лошадь, выполненная по всем требованиям заказчика" (с) кто-то из дизайнеров

noname-dev

Захожу иногда
281
17 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #1 : 15.04.2012, 21:28:43 »

У вас ошибка в коде

<link href="/<?php echo $this->baseurl?>/templates/<?php echo $this->template; ?>/assets/spry.css" rel="stylesheet" type="text/css" />
<script src="/<?php echo $this->baseurl?>/templates/<?php echo $this->template; ?>/assets/spry.js" type="text/javascript"></script>

Выделил ненужные слеши
Да и слишком громоздкий js-код, есть и более изящные решения.

Записан

Shustry

Гуру
6434
745 / 3

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #2 : 15.04.2012, 21:41:51 »

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

Записан

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #3 : 15.04.2012, 22:06:58 »

Цитата: Shustry от 15.04.2012, 21:41:51

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

За что плюс? В чем соль способа? Купить дрим? )))

Для ветки 2.5 не актуально. Если использовать шаблоны и опять же вышеупомянутый API всё решается на уровне создания единственного шаблона для меню, профит явно выше, а еще все скрипты и CSS оптимально упаковывать в единый файл, а не грузить пачками всё что нужно и не нужно.

------------------------
Курим:
Adding JavaScript and CSS to the page
Layout Overrides in Joomla 1.6

« Последнее редактирование: 15.04.2012, 22:15:15 от NightGuard »

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

Shustry

Гуру
6434
745 / 3

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #4 : 15.04.2012, 22:11:58 »

На тебе, Юр, тоже плюсег. За вредность. Человек бескорыстно делится своим опытом. Да, решение никакое, но ведь ТС старался и верил, что помогает людём. Йоу, а что ты сделал для хип-хопа? \m/

Записан

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #5 : 15.04.2012, 22:20:06 »

Мне не за что плюсик (( Не заработал еще ((

Да, старался человек не спорю, НО сталкиваемся с одним фактором - у меня нет дрима, что делать?
Как вариант он мог выложить скрипты и CSS, т.к. при их наличии можно и допиливать и экспериментировать, а в остальном ХЗ, на ишака шестого давно забил, большинство проблем решается с помощью стилей, без использования js и последнее время появилась привычка все стили и скрипты сразу спихивать в один файл, ну или в пару файлов, чтоб потом СЕОшники бо-бо не делали )))

---------------------------
Я вот сейчас обдумываю как допилить одну библиотечку чтоб аякс заюзать.

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

artel-st

Захожу иногда
350
37 / 1

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #6 : 16.04.2012, 20:52:14 »

Ява-код громоздкий - согласен, но увы я в яве не силен, выдал то решение, к которое иногда использую сам и которое не конфликтует с другими скриптами.
Да и решение не для "ПРО", которые могут jQuery подключить или вообще все с нуля написать самостоятельно.

Относительно объединить js и CSS - это кому как нравиться. Мне удобнее всё разбить на файлы, в т.ч. и СSS, чтобы не листать "простынь" на несколько листов:

Код

@import url(resets.css);
@import url(template.css);
@import url(modules.css);
@import url(menu.css);

Купить Дрим никому не предлагаю, сам использую MS Expression, который можно получить бесплатно, просто присоединившись к WebSpark от Microsoft (можете считать рекламой, если Вам так больше нравиться).

З.Ы. ошибки в первом посте исправил, спасибо, протупил чуток

З.Ы.Ы. NightGuard, скрипты и CSS в самом первом посте есть, без них толку с него ноль.

« Последнее редактирование: 16.04.2012, 21:16:34 от artel-st »

Записан

"Жираф - это лошадь, выполненная по всем требованиям заказчика" (с) кто-то из дизайнеров

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #7 : 16.04.2012, 20:57:42 »

Цитата: artel-st от 16.04.2012, 20:52:14

Относительно объединить js и CSS - это кому как нравиться. Мне удобнее всё разбить на файлы, в т.ч. и СSS, чтобы не листать "простынь" на несколько листов:

Листать никогда ничего не нужно, достаточно посмотреть номер строки, но если смотреть с точки зрения оптимизации, то оптимально свести все CSS в один файл, все js в другой, а затем прогнать через gzip.

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

Fedor Vlasenko

Живу я здесь
3845
733 / 7
https://fedor-vlasenko.web.app

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #8 : 16.04.2012, 21:11:13 »

Да а иногда бывает, что в один файл CSS и js объединяют. Так смотрю просплю я все.

Записан

Отключить Mootols, Jquery, Bootstrap
Плагин добавления групп для регистрации, регистрация в один клик
Лучший Украинский хостинг

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #9 : 16.04.2012, 21:14:52 »

Нет, это уже явный перебор и пример фанатизма.

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

artel-st

Захожу иногда
350
37 / 1

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #10 : 16.04.2012, 21:18:24 »

Цитата: NightGuard от 16.04.2012, 20:57:42

если смотреть с точки зрения оптимизации, то оптимально свести все CSS в один файл, все js в другой, а затем прогнать через gzip.

Вот этого не знал, приму к сведению

Записан

"Жираф - это лошадь, выполненная по всем требованиям заказчика" (с) кто-то из дизайнеров

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #11 : 16.04.2012, 21:23:00 »

Poznakomlus, кстати, ерунда, посмотри внимательно что у него в блоге грузится.

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

Fedor Vlasenko

Живу я здесь
3845
733 / 7
https://fedor-vlasenko.web.app

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #12 : 16.04.2012, 21:32:52 »

Да нет, все как автор написал
тестовая страница его

Записан

Отключить Mootols, Jquery, Bootstrap
Плагин добавления групп для регистрации, регистрация в один клик
Лучший Украинский хостинг

NightGuard

Живу я здесь
2927
378 / 7
вжжж-вжжж

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #13 : 16.04.2012, 21:57:02 »

Это у меня кэш отключен был, вот и грузило постоянно 2 файла.

Но в любом случае это уже фанатизм.

Записан

Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма

stiksik

Осваиваюсь на форуме
10
0 / 0
Просто Стикс

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #14 : 15.05.2012, 18:36:50 »

не работает! Сделал как указано, но вот результат:

А вот что было:

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

« Последнее редактирование: 15.05.2012, 20:32:02 от stiksik »

Записан

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #15 : 06.02.2013, 02:31:20 »

Подскажите как мне быть. У меня вместо горизонтального меню, показывает вертикально!
что делать, как исправить?
Другими словами описываю. я установила гориз.выпадаущее меню, заполнила, а оно мне бац и показывается не горизонтально, как должно быть а вертикально, как вертикальное меню....

Записан

Efanych

Глобальный модератор
4683
644 / 0
Меняю свою жизнь на 360°!

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #16 : 06.02.2013, 02:42:35 »

А вы точно уверены, что именно горизонтальное устанавливали?
По каким признакам определили?

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #17 : 06.02.2013, 11:14:01 »

<title>Документ без названия</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Элемент 1</a>
<ul>
<li><a href="#">Элемент 1.1</a></li>
<li><a href="#">Элемент 1.2</a></li>
<li><a href="#">Элемент 1.3</a></li>
</ul>
</li>
<li><a href="#">Элемент 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Элемент 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Элемент 3.1</a>
<ul>
<li><a href="#">Элемент 3.1.1</a></li>
<li><a href="#">Элемент 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Элемент 3.2</a></li>
<li><a href="#">Элемент 3.3</a></li>
</ul>
</li>
<li><a href="#">Элемент 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Записан

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #18 : 06.02.2013, 11:14:40 »

а открывает по вертикали?!

Записан

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #19 : 06.02.2013, 11:16:56 »

!

« Последнее редактирование: 06.02.2013, 11:38:13 от тома »

Записан

Efanych

Глобальный модератор
4683
644 / 0
Меняю свою жизнь на 360°!

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #20 : 06.02.2013, 11:50:11 »

Попробуйте писать не в дриме, а разобраться, как всё это работает.
Начните с этого

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #21 : 06.02.2013, 12:27:17 »

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

Записан

Efanych

Глобальный модератор
4683
644 / 0
Меняю свою жизнь на 360°!

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #22 : 06.02.2013, 12:37:28 »

Вы просто не понимаете, почему оно должно быть горизонтальным или вертикальным.
Я так понял вас вдохновила строчка class="MenuBarHorizontal"?
Как вы думаете, если написать class="MenuBarHorizontal a_takzhe_superkrasivoe_i_obaldenno_rabotaet" что-то изменится?

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

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #23 : 06.02.2013, 12:46:36 »

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

Записан

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #24 : 06.02.2013, 12:46:54 »

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgRight:"SpryAssets/SpryMenuBarRightHover.gif", imgDown:"SpryAssets/SpryMenuBarDownHover.gif"})

Записан

Efanych

Глобальный модератор
4683
644 / 0
Меняю свою жизнь на 360°!

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #25 : 06.02.2013, 13:04:58 »

Цитировать

Короче по ходу я валянок

Не, ну это-то понятно

Все такими были.
чтобы его сделать горизонтальным, нужно элементу li в CSS назначить свойство, которое сделает его горизонтальным (например, float:left)
Вобщем, читайте мануалы по ссылке.
P.S. Всё равно вам это меню бестолку. Нужно модули для Joomla использовать.

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #26 : 06.02.2013, 13:29:00 »

ты просто чудо фея

Записан

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #27 : 06.02.2013, 15:29:49 »

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

Записан

Efanych

Глобальный модератор
4683
644 / 0
Меняю свою жизнь на 360°!

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #28 : 06.02.2013, 15:46:35 »

Может у сестры браузер неправильный?

А если серьёзно, то так никто не скажет.
Освойте ещё один замечательный инструмент - FireBug (это плагинчик для мозилы, его надо устанавливать) или в Opera и Chrome есть встроеные инструменты (правой кнопкой -проинспектировать)
C его помощью вы легко сможете посмотреть, какие стили применяются к различным элементам и что чему мешает.

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

тома

Осваиваюсь на форуме
11
0 / 0

Re: Многоуровневое выпадающее меню на базе mod_menu

« Ответ #29 : 06.02.2013, 15:52:47 »

мг. точно. так и сделаю.спасибо за совет.

Записан

[Решено] title материалов и категорий без пунктов меню Автор pharaoh	Ответов: 269 Просмотров: 112164	03.02.2022, 02:45:26 от globus812
Как добавить описание к пункту меню в Joomla 2.5? (Как у материалов)? Автор nia	Ответов: 7 Просмотров: 18673	29.03.2021, 12:10:26 от sivers
В моб версии не откриваються норм меню Автор umsbeauty	Ответов: 0 Просмотров: 2402	11.01.2021, 17:55:15 от umsbeauty
Убрать название пункта меню из URL материала Автор fortuner	Ответов: 15 Просмотров: 10806	31.10.2020, 00:46:04 от spas
Проблемка с правым меню Автор V_V	Ответов: 3 Просмотров: 2343	03.12.2019, 06:24:56 от Vovolsort

Вышли релизы безопасности Joomla 6.1.4 и Joomla 5.4.9

JoomShift - компонент переноса контента между Joomla сайтами.

Похожие темы