0 Пользователей и 1 Гость просматривают эту тему.
  • 29 Ответов
  • 6930 Просмотров
*

artel-st

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

Делаем выпадающее меню, которое будет раскрываться при наведении курсора мыши, на базе стандартного модуля меню, который уже установлен в 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
У вас ошибка в коде
   
<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
За старания вам однозначно плюс. Но, действительно, что-то очень уж очень громозко для такой банальной вещи, как выпадающее меню.
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
За старания вам однозначно плюс. Но, действительно, что-то очень уж очень громозко для такой банальной вещи, как выпадающее меню.
За что плюс? В чем соль способа? Купить дрим? )))

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

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Мне не за что плюсик (( Не заработал еще ((

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


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

artel-st

  • Захожу иногда
  • 350
  • 37 / 1
Ява-код громоздкий - согласен, но увы я в яве не силен, выдал то решение, к которое иногда использую сам и которое не конфликтует с другими скриптами.
Да и решение не для "ПРО", которые могут 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
  • вжжж-вжжж
Относительно объединить js и CSS - это кому как нравиться. Мне удобнее всё разбить на файлы, в т.ч. и СSS, чтобы не листать "простынь" на несколько листов:
Листать никогда ничего не нужно, достаточно посмотреть номер строки, но если смотреть с точки зрения оптимизации, то оптимально свести все CSS в один файл, все js  в другой, а затем прогнать через gzip.
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Нет, это уже явный перебор и пример фанатизма.
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

artel-st

  • Захожу иногда
  • 350
  • 37 / 1
если смотреть с точки зрения оптимизации, то оптимально свести все CSS в один файл, все js  в другой, а затем прогнать через gzip.

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

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Poznakomlus, кстати, ерунда, посмотри внимательно что у него в блоге грузится.
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Это у меня кэш отключен был, вот и грузило постоянно 2 файла.

Но в любом случае это уже фанатизм.
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

stiksik

  • Осваиваюсь на форуме
  • 10
  • 0 / 0
  • Просто Стикс
не работает! Сделал как указано, но вот результат:

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

В чем может быть ошибка? Но большой размер для такого удовольствия..
Повторил еще раз, результат тот же.
« Последнее редактирование: 15.05.2012, 20:32:02 от stiksik »
*

тома

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

Efanych

  • Глобальный модератор
  • 4684
  • 644 / 0
  • Меняю свою жизнь на 360°!
А вы точно уверены, что именно горизонтальное устанавливали?
По каким признакам определили?
Создание сайтов, шаблонов, помощь в решении проблем.
*

тома

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
<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
а открывает по вертикали?!
*

тома

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
« Последнее редактирование: 06.02.2013, 11:38:13 от тома »
*

Efanych

  • Глобальный модератор
  • 4684
  • 644 / 0
  • Меняю свою жизнь на 360°!
Попробуйте писать не в дриме, а разобраться, как всё это работает.
Начните с этого
Создание сайтов, шаблонов, помощь в решении проблем.
*

тома

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

Efanych

  • Глобальный модератор
  • 4684
  • 644 / 0
  • Меняю свою жизнь на 360°!
Вы просто не понимаете, почему оно должно быть горизонтальным или вертикальным.
Я так понял вас вдохновила строчка class="MenuBarHorizontal"?
Как вы думаете, если написать class="MenuBarHorizontal a_takzhe_superkrasivoe_i_obaldenno_rabotaet" что-то изменится? :)
Расположение элементов определяется обычно в .css файлах. .js файл скорее всего только для того, чтоб выпадало по клику.
Создание сайтов, шаблонов, помощь в решении проблем.
*

тома

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
может и не измениться...
а вот в этой строке, при изминениях должно было бы и поменяться, я так думаю.
Короче по ходу я валянок >:(
*

тома

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgRight:"SpryAssets/SpryMenuBarRightHover.gif", imgDown:"SpryAssets/SpryMenuBarDownHover.gif"})
*

Efanych

  • Глобальный модератор
  • 4684
  • 644 / 0
  • Меняю свою жизнь на 360°!
Цитировать
Короче по ходу я валянок
Не, ну это-то понятно :) Все такими были.
чтобы его сделать горизонтальным, нужно элементу li в CSS назначить свойство, которое сделает его горизонтальным (например, float:left)
Вобщем, читайте мануалы по ссылке.
P.S. Всё равно вам это меню бестолку. Нужно модули для Joomla использовать.
Создание сайтов, шаблонов, помощь в решении проблем.
*

тома

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
ты просто чудо фея :)
*

тома

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

Efanych

  • Глобальный модератор
  • 4684
  • 644 / 0
  • Меняю свою жизнь на 360°!
Может у сестры браузер неправильный? :)
А если серьёзно, то так никто не скажет.
Освойте ещё один замечательный инструмент - FireBug (это плагинчик для мозилы, его надо устанавливать) или в Opera и Chrome есть встроеные инструменты (правой кнопкой -проинспектировать)
C его помощью вы легко сможете посмотреть, какие стили применяются к различным элементам и что чему мешает.
Создание сайтов, шаблонов, помощь в решении проблем.
*

тома

  • Осваиваюсь на форуме
  • 11
  • 0 / 0
мг. точно. так и сделаю.спасибо за совет.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

[Решено] title материалов и категорий без пунктов меню

Автор pharaoh

Ответов: 269
Просмотров: 58905
Последний ответ 03.02.2022, 02:45:26
от globus812
Как добавить описание к пункту меню в Joomla 2.5? (Как у материалов)?

Автор nia

Ответов: 7
Просмотров: 5385
Последний ответ 29.03.2021, 12:10:26
от sivers
В моб версии не откриваються норм меню

Автор umsbeauty

Ответов: 0
Просмотров: 1194
Последний ответ 11.01.2021, 17:55:15
от umsbeauty
Убрать название пункта меню из URL материала

Автор fortuner

Ответов: 15
Просмотров: 8151
Последний ответ 31.10.2020, 00:46:04
от spas
Проблемка с правым меню

Автор V_V

Ответов: 3
Просмотров: 1405
Последний ответ 03.12.2019, 06:24:56
от Vovolsort