Как создать несколько HTML разметок в шаблоне и почему Joomla не любит jquery? - Joomla 3.x: Шаблоны, разметка и макеты вывода

Ребят всем привет, занялся созданием шаблона, и сделал разметку в index.php шаблона, когда закончил
шаблон,
все вроде бы ничего, но тут меня осенило что шаблон визуально статичен, то есть
файл с HTML разметкой всего один, это index.php и только он 1 подстраивается под
все переходы по ссылкам категориям и так далее на сайте, но хотелось бы создать хотябы
парочку допустим 1 HTML файл отвечает за главную страницу, другой за остальные
, я бы хотел узнать как это реализовать.

Плюс создал меню на HTML CSS js
в чем фишка меню, в том что при наведении на элемент списка  меню, начинает
светится блок под элементом меню, каким образом работает код:

                                        $(".beetwen__position__li1").hover(function(e)

                    {

                                        $("#block1").css("background", "#7CC900");

                  

                    });


класс меню <li> это .beetwen__position__li1 , и на него наводится курсор, и срабатывает функция на блок
с идентификатором  #block1, и у него меняется цвет фона.

Теперь зачем же я сделал у списка класс, а у блока идентификатор, потому что просто на HTML CSS js,
js подхватывает и с классом и с идентификатором элементы без проблем.
Но как известно Joomla списки меню создает сама, и только с классом, id прописать нельзя.
Так вот вставляю рабочий код HTML CSS js в index.php шаблона, а там скрипт не работает
Куда копать? !

Ребят всем привет, занялся созданием шаблона, и сделал разметку в index.php шаблона, когда закончил
шаблон,
все вроде бы ничего, но тут меня осенило что шаблон визуально статичен, то есть
файл с HTML разметкой всего один, это index.php и только он 1 подстраивается под
все переходы по ссылкам категориям и так далее на сайте, но хотелось бы создать хотябы
парочку допустим 1 HTML файл отвечает за главную страницу, другой за остальные
, я бы хотел узнать как это реализовать.

вот и вот

Плюс создал меню на HTML CSS js
в чем фишка меню, в том что при наведении на элемент списка  меню, начинает
светится блок под элементом меню, каким образом работает код:

                                        $(".beetwen__position__li1").hover(function(e)

                    {

                                        $("#block1").css("background", "#7CC900");

                  

                    });


класс меню <li> это .beetwen__position__li1 , и на него наводится курсор, и срабатывает функция на блок
с идентификатором  #block1, и у него меняется цвет фона.

Теперь зачем же я сделал у списка класс, а у блока идентификатор, потому что просто на HTML CSS js,
js подхватывает и с классом и с идентификатором элементы без проблем.
Но как известно Joomla списки меню создает сама, и только с классом, id прописать нельзя.
Так вот вставляю рабочий код HTML CSS js в index.php шаблона, а там скрипт не работает
Куда копать? !

Проще сделать через CSS :hover, или замените в jQuery $ на jQuery

Спасибо umbabaraumba почитаю насчет 1 пункта.
Что касается 2 заменить знак переменной на jquery можно попробовать, про hover в сss он у меня уже есть и он меняет
стиль кнопок меню, а hover через jquery еще меняет и другие блоки вот в чем задумка)

про hover в сss он у меня уже есть и он меняет
стиль кнопок меню, а hover через jquery еще меняет и другие блоки вот в чем задумка)

Так можно все сделать через CSS и кнопки и другие блоки .

Так можно все сделать через CSS и кнопки и другие блоки .

А каким образом CSS может менять абсолютно другие блоки несвязанные с меню?

Вы хотите сделать чтоб при наведении на пункт меню менялся цвет горизонтальной линии под ним ?

Вы хотите сделать чтоб при наведении на пункт меню менялся цвет горизонтальной линии под ним ?

Да именно мне кажется CSS так пока не умеет

http://ianlunn.github.io/Hover/
Там есть и ваше решение.
CSS умеет:Border Transitions

http://ianlunn.github.io/Hover/
Там есть и ваше решение.
CSS умеет:Border Transitions

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

div:hover{ border-bottom: 5px solid #ccc; }

Если плавное появление линии, то можно добавить:
-webkit-transition: width 2s; /* для Safari  */
transition: width 2s;

В секундах регулируете.

div:hover{ border-bottom: 5px solid #ccc; }

Если плавное появление линии, то можно добавить:
-webkit-transition: width 2s; /* для Safari  */
transition: width 2s;

В секундах регулируете.

Спойлер

[свернуть]

Мне кажется этого не сделать только в CSS что прояснить картину скидываю код: