Форум русской поддержки Joomla!® CMS
05.12.2016, 16:37:45 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Активный DIV в меню

 (Прочитано 446 раз)
0 Пользователей и 1 Гость смотрят эту тему.
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« : 10.04.2015, 19:30:57 »

Что-то я переработался и не могу понять никак, как правильно сделать:
Имею:

HTML:

Показать текстовый блок

CSS:

Показать текстовый блок

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

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

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

Зы или может проще решение есть(JS не катит, только css)
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #1 : 10.04.2015, 19:38:03 »

Вам нужно просто чтобы при наведении картинка в меню менялась? Зачем такой сложный код, с дублирующими пунктами и т.д.?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #2 : 10.04.2015, 19: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, 19:52:33 от vipiusss » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #3 : 10.04.2015, 20:06:46 »

1. Верните разметку на стандартную, джумловскую:

Код
<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. Дальше просто стилями:

Код
.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
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #4 : 10.04.2015, 20:12:46 »

У меня отдельным кодом и CSS сменный модуль, он к Joomla не относится, хотя стоит в модуле и в Joomla.В модуле меню находится.
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #5 : 10.04.2015, 21:30:36 »

Тогда нужно как-то прописать логику, по которой активный пункт меню будет получать отличительный класс. Например, можно href ссылки сравнивать с текущим url.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #6 : 10.04.2015, 21:46:42 »

Понимаю, но вот как именно это сделать....  ! Чтобы модуль (точнее этот код) был автономен и независим.
А если я привязываю в переходах (при клике) джумловские страницы/страницы joomshoppinga, как быть в этом случае? чтоб меню реагировало по моей логике?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #7 : 10.04.2015, 22:15:06 »

Можно разобрать ссылку на составляющие и сравнивать с частями URL.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet