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

vipiusss

  • Профи
  • ********
  • 5529
  • 318
  • Круглая ава-зло!
Активный DIV в меню
« : 10.04.2015, 20:30:57 »
Что-то я переработался и не могу понять никак, как правильно сделать:
Имею:

HTML:

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

CSS:

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

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

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

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

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

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Активный DIV в меню
« Ответ #1 : 10.04.2015, 20:38:03 »
Вам нужно просто чтобы при наведении картинка в меню менялась? Зачем такой сложный код, с дублирующими пунктами и т.д.?
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • ********
  • 5529
  • 318
  • Круглая ава-зло!
Re: Активный DIV в меню
« Ответ #2 : 10.04.2015, 20: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, 20:52:33 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Активный DIV в меню
« Ответ #3 : 10.04.2015, 21: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;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

  • Профи
  • ********
  • 5529
  • 318
  • Круглая ава-зло!
Re: Активный DIV в меню
« Ответ #4 : 10.04.2015, 21:12:46 »
У меня отдельным кодом и CSS сменный модуль, он к Joomla не относится, хотя стоит в модуле и в Joomla.В модуле меню находится.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Активный DIV в меню
« Ответ #5 : 10.04.2015, 22:30:36 »
Тогда нужно как-то прописать логику, по которой активный пункт меню будет получать отличительный класс. Например, можно href ссылки сравнивать с текущим url.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vipiusss

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

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Активный DIV в меню
« Ответ #7 : 10.04.2015, 23:15:06 »
Можно разобрать ссылку на составляющие и сравнивать с частями URL.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!