Новости Joomla

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

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Активный DIV в меню
« : 10.04.2015, 18:30:57 »
Что-то я переработался и не могу понять никак, как правильно сделать:
Имею:

HTML:

Спойлер
[свернуть]

CSS:

Спойлер
[свернуть]

Т.е. при наведении в каждом меню иконка 1 по умолчанию перед названием меняется на иконку 2 перед названием и обратно, если убрать мышку.

Как сделать, чтобы при переходе в Меню 2 иконка 2 осталась активной в активном меню (в Меню 2)?
Ну и обратно, при нажатии и переходе в Меню 1, иконка в Меню 2 стала иконкой 1, а иконка 1 в Меню 1 стала иконкой 2.

Простое вроде CSS ?но что-то я туплю.Напишите, кому не сложно... Не хватает что-то ума)))  ::)

Зы или может проще решение есть(JS не катит, только css)
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Активный DIV в меню
« Ответ #1 : 10.04.2015, 18:38:03 »
Вам нужно просто чтобы при наведении картинка в меню менялась? Зачем такой сложный код, с дублирующими пунктами и т.д.?
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Активный DIV в меню
« Ответ #2 : 10.04.2015, 18:40:55 »
Вам нужно просто чтобы при наведении картинка в меню менялась? Зачем такой сложный код, с дублирующими пунктами и т.д.?

Да как-то я начал с него(ранее не было цели, просто смена при наведении, чтоб долго не думать)...

Распишите, если не сложно HTML и CSS в моём случае...

Зы.Она и так меняется, пусть и код Неправильный особо, мне надо кроме этого, чтоб после перехода иконка 2 оставалась активной, и при обратном переходе, активная сменилась на иконку 1, а неактивная стала активной.

Пример:

Меню 1 и Меню 2

По дефолту мы находимся в Меню 1 и перед названием стоит иконка 2(т.е. активная, т.к. мы в этом меню)
Перед названием же Меню 2 стоит иконка 1(но при наведении меняется на иконку 2 и обратно, при убирании мышки на иконку 1)
При переходе в Меню 2 иконка перед Меню 2 стала иконкой 2, т.е. активной и не меняется.
В свою же очередь перед Меню 1 иконка 2 стала иконкой 1, т.к. меню не активное, но при наведении иконка 1 меняется на иконку 2 и обратно, маякуя этим, что я попадаю на ссылку, тоже самое, как и до этого в Меню 2, если бы мы были в Меню 1

Всего две иконки 1(неактивная) и 2(активная или при наведении)
...Вроде подробно написал
« Последнее редактирование: 10.04.2015, 18:52:33 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Активный DIV в меню
« Ответ #3 : 10.04.2015, 19:06:46 »
1. Верните разметку на стандартную, джумловскую:

Код: html4strict
<nav class="menu">
<ul>
<li class="ico1"><a>раз</a></li>
<li class="ico2 active"><a>два</a></li>
<li class="ico3"><a>три</a></li>
<li class="ico4"><a>четыре</a></li>
</ul>
<nav>

Где классы ico* — вы назначаете в менеджере меню в поле css-класс пункта меню, а класс active назначает сама Joomla

2. Соберите все иконки в спрайт, где можно нарисовать все желательные варианты: при наведении, активный и т.д.

3. Дальше просто стилями:

Код: css
.menu li:before {
content:'';
width:20px;
height:20px;
display:inline-block;
background-image:урлкартинки;
background-repeat:no-repeat;
}

.menu .ico1:before {
background-position: 0 0;
}
.menu .ico1:hover:before {
background-position: 0 50px;
}
.menu .ico1.active:before {
background-position: 0 100px;
}

.menu .ico2:before {
background-position: 50px 0;
}
.menu .ico2:hover:before {
background-position: 50px 50px;
}
.menu .ico2.active:before {
background-position: 50px 100px;
}
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Активный DIV в меню
« Ответ #4 : 10.04.2015, 19:12:46 »
У меня отдельным кодом и CSS сменный модуль, он к Joomla не относится, хотя стоит в модуле и в Joomla.В модуле меню находится.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Активный DIV в меню
« Ответ #5 : 10.04.2015, 20:30:36 »
Тогда нужно как-то прописать логику, по которой активный пункт меню будет получать отличительный класс. Например, можно href ссылки сравнивать с текущим url.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Активный DIV в меню
« Ответ #6 : 10.04.2015, 20:46:42 »
Понимаю, но вот как именно это сделать....  ! Чтобы модуль (точнее этот код) был автономен и независим.
А если я привязываю в переходах (при клике) джумловские страницы/страницы joomshoppinga, как быть в этом случае? чтоб меню реагировало по моей логике?
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Активный DIV в меню
« Ответ #7 : 10.04.2015, 21:15:06 »
Можно разобрать ссылку на составляющие и сравнивать с частями URL.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

Ответов: 4
Просмотров: 1549
Последний ответ 29.12.2021, 23:15:38
от v42bis
Выпадающее меню

Автор DrShepard

Ответов: 10
Просмотров: 2122
Последний ответ 20.10.2021, 12:36:16
от DrShepard
Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 814
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 794
Последний ответ 27.11.2020, 11:33:58
от coliandra
Как убрать маркер только из одного пункта меню.

Автор kuraev64

Ответов: 2
Просмотров: 1071
Последний ответ 20.07.2020, 11:18:44
от kuraev64