Нестандартное меню каталога с затемнением категорий через CSS

Пт, 07/08/2015 - 11:09

Друзья, столкнулся с несовсем стандартной задачей! Прошу помощи!

Есть главная страница каталога, где пользователь будет выбирать нужную ему категорию товара.
Кроме меню навигации по терминам таксономии решили сделать красивое меню в картинках, которое дублирует меню в навигации (см. прикрепленные картинки). Т.е. при наведении на картинку происходит ее затемнение, с текстом, а при нажатии перенаправление на нужную страницу каталога.

Сложности возникли в следующем. Картинки все разного размера, соответственно вывести стандартной сеткой через Views не получится.
В первом случае создал страницу-панель и вывел на нее блоки, в которых разместил по две картинки в линию,с указанием ссылок в описании картинок. Удалось добиться отображения как на макете в Psd, но возникли проблемы с настройкой CSS, т.к. не удается назначить каждой картинке свой класс.
Во-втором случае, на страницу-панель вывел мини-панели, по две колонки, в которых вывел блоки с картинками. Появилась возможность в настройках мини-панели назначить каждому блоку свой CSS класс и Id, но возникли сложности с отображением картинок безо всяких рамок и пустот между ними.

Но самое главное, не смотря на то, что удалось назначить каждому блоку свой класс - не выходит назначить ссылке :hover, чтобы затемнить картинку при наведении!

У кого какие идеи? Буду безмерно благодарен за помощь или идеи!

0 Спасибо

Комментарии

Аватар пользователя ХулиGUN
1 год 8 months назад ХулиGUN #
Владимир1987 написал:
У кого какие идеи?

Выучить css.
Для подобных эффектов есть готовые js плагины http://www.jqueryscript.net/demo/Responsive-Mobile-Friendly-jQuery-Gallery-Plugin-galereya/ например. Не в ту сторону копаете.
Всё реально сделать на views. Если нужно - переопределяйте шаблоны.
Не вижу проблемы, кроме как в знаниях. Но за Вас делать Вашу работу тут никто не собирается

0 Спасибо
Аватар пользователя Владимир1987
1 год 8 months назад Владимир1987 #

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

Но на самом деле, ее можно было кинуть без комментариев "Выучить CSS" и "Не вижу проблемы, кроме как в знаниях. Но за Вас делать Вашу работу тут никто не собирается".

Создается впечатление, что Вы родились гуру в CSS и ничему не учились. Такое ощущение, что эта добавка специально, чтобы люди, которые что-то не знают, теряли желание спрашивать у более опытных пользователей.

1 Спасибо
Аватар пользователя ХулиGUN
1 год 8 months назад ХулиGUN #
Владимир1987 написал:
Создается впечатление, что Вы родились гуру в CSS и ничему не учились. Такое ощущение, что эта добавка специально, чтобы люди, которые что-то не знают, теряли желание спрашивать у более опытных пользователей.

Окей

Владимир1987 написал:
не удается назначить каждой картинке свой класс

:first-child, :last-child в первый раз слышите?

Владимир1987 написал:
Но самое главное, не смотря на то, что удалось назначить каждому блоку свой класс - не выходит назначить ссылке :hover, чтобы затемнить картинку при наведении!

Использовать общий класс не? Или использовать каскад родителя для таких целей тоже выше? Зачем тогда писать глупые размышления. Проще написать, как при помощи css... Если уже так туго

0 Спасибо
Аватар пользователя Владимир1987
1 год 8 months назад Владимир1987 #

Нет, про :first-child, :last-child не слышал, сейчас попробую! Спасибо!

0 Спасибо