Как организовать UI на сайте

Question

[Илья Казначеев]

Добрый день. Есть задача - сделать интерфейс для каталога категорий (отдаленно напоминает интернет магазин).
Каталог такой:
-1 уровень - категории
-2 уровень - подкатегории
-3 уровень - сами объекты каталога

Навигация будет по первого уровня вглубь, т.е., 1 страница - 1 уровень -> 2 страница - 2 уровень...

Планирую делать это в стиле Flat, таким образом, что эти категории отображаются на странице в виде плиток разных цветов. При наведении на плитку высвечивается какая-то инфа про категорию (например, кол-во элементов в ней). При нажатии переходит на страницу категории, там отображаться подкатегории аналогичным образом.
Вопросы:
-нормально ли это?
-если нет, то как бы Вы посоветовали сделать?

UPD: картинка

Answer 1

[Алексей Кулешов]

Эффект при наведении (для просмотра описания категории): flip-click
Отдельные страницы для каждого уровня - это хорошо, но не так красиво. Используя JavaScript (например эффекты jQuery) можно добиться анимированных "переходов" от одного уровня к другому, например вот с таким эффектом.

Comments

[Илья Казначеев]

сейчас запилю, я предполагал, что изъясняюсь не очень понятно

[Илья Казначеев]

готово

[Алексей Кулешов]

Раз такое дело - ссылку на результат в студию, please!))

[Илья Казначеев]

готова пока только картинка в вопросе) еще предстоит с джумлой играться

[Алексей Кулешов]

Ааа... Ооо... Всё-равно: интересно что получится))

[Илья Казначеев]

Мне тоже) Спасибо за mixitup, выглядит красиво. Насчет переходов в рамках одной страницы идея здравая, наверное так и попробую сделать, если технически осилю

[Алексей Кулешов]

@Color видел я где-то ещё один JS-плагин, похожий на mixitup, но суть почти та же. Думаю можно обойтись Fade In/Out (при смене уровней). Даже если все уровни физически будут на странице первого уровня (временно скрытыми) - для всех 2-х и 3-х уровней желательно иметь отдельные "посадочные" страницы.

[Илья Казначеев]

хороший совет, еще раз спасибо

[Алексей Кулешов]

tympanus.net/Tutorials/AnimatedTextIconMenu/exampl... - давно нашел, но все никак не придумаю где его использовать...