Проблема с версткой меню

[DmitriyDonetsk]

Доброго дня всем!

Нужно сверстать меню со следующей структурой:

1. Моторные масла

1.1 Для легковых авто

1.1.1 Синтетические

1.1.2 Полусинтетические

1.1.3 Минеральные

1.2 Для грузовых авто

1.2.1 Синтетические

1.2.2 Полусинтетические

1.2.3 Минеральные

1.3 Для двухтактных двигателей

2. Трансмиссионные масла

2.1 Для мех. трансмиссий

2.2. Универсальные...

и т.д.

3. Индустриальные масла

3.1 Гидравлические

3.2 Компрессорные

и т.д. - 14 подпунктов

В общем, трехуровневое меню.

Во вложении для наглядности картинки.

Вопрос: реально ли сверстать такое меню под Джумлу и если да - то как ?

Сложность в том, что высота блока меню фиксированная, и заказчик требует именно такое меню! То есть первый

[Gaspode]

Вопрос: реально ли сверстать такое меню под Джумлу и если да - то как ?

Сложность в том, что высота блока меню фиксированная, и заказчик требует именно такое меню! То есть первый

Какая разница, под Джумлу или не под Джумлу.

То, что высота фиксированная, - это не сложность, это щааастье.

Что конкретно не получается?

[DmitriyDonetsk]

То, что высота фиксированная, - это не сложность, это щааастье.

Что конкретно не получается?

В моем случае это, пожалуй, несчастье

Обратите внимание на картинки. Первый и последний пункт должны быть всегда на уровне верхнего и нижнего краев картинки-полукруга

В меню "Промышленные масла" - 14 подпунктов.

Буду рад, если поможете с версткой за вознаграждение

Пишите в ЛС.

Какая разница, под Джумлу или не под Джумлу.

Разницы, действительно, нет. Я имел в виду, что нужно будет управлять этим меню из Джумлы.

Просто сверстать в HTML я могу, а вот "состыковать" с CMS - проблематично...

Edited September 7, 2011 by DmitriyDonetsk

[psywalker]

Obridlo,

Т.е. если я правильно понял, то:

1) В деле без JS не обойтись, так?

2) Вообще JS можно использовать?

3) Если пунктов меню становится больше (вложенных), то шрифт у них должен уменьшится до такого размера, чтобы всё выпадающее меню уместилось в левую картинку (полукруг)?

4) Меню как работает? На что жмёшь, что выпадает и т.д? Плавно, не плавно? Что куда двигается?

[DmitriyDonetsk]

Т.е. если я правильно понял, то:

1) В деле без JS не обойтись, так?

2) Вообще JS можно использовать?

3) Если пунктов меню становится больше (вложенных), то шрифт у них должен уменьшится до такого размера, чтобы всё выпадающее меню уместилось в левую картинку (полукруг)?

4) Меню как работает? На что жмёшь, что выпадает и т.д? Плавно, не плавно? Что куда двигается?

Можно использовать JS. Главное, чтобы во всех браузерах работало и очень желательно, чтобы браузеры на мобильных устройствах отображали все корректно.

Принцип работы - как здесь: mobil.dn.ua

Не по теме:

psywalker, можете мне помочь сменить ник?

Edited September 7, 2011 by DmitriyDonetsk

[psywalker]

Т.е. если я правильно понял, то:

1) В деле без JS не обойтись, так?

2) Вообще JS можно использовать?

3) Если пунктов меню становится больше (вложенных), то шрифт у них должен уменьшится до такого размера, чтобы всё выпадающее меню уместилось в левую картинку (полукруг)?

4) Меню как работает? На что жмёшь, что выпадает и т.д? Плавно, не плавно? Что куда двигается?

Можно использовать JS. Главное, чтобы во всех браузерах работало и очень желательно, чтобы браузеры на мобильных устройствах отображали все корректно.

Принцип работы - как здесь: mobil.dn.ua

Погоди, но на вопросы мне ответь для начала. На 3,4.

Не по теме:

psywalker, можете мне помочь сменить ник?

Говори ник

[DmitriyDonetsk]

Погоди, но на вопросы мне ответь для начала. На 3,4.

Сейчас это меню есть на сайте mobil.dn.ua, просто нужно оформить его как на картинках в первом сообщении.

Кликаем по "Моторным маслам" - открывается новая страничка, но в меню на открывшейся страничке раскрыт список "Моторные масла". Щелкаем "Для легковых авто" - открывается новая страничка с новым подменю. И так далее.

Пунктов больше не будет (а если будут - то можно расстояние между подпунктами менять, шрифт и так мелкий получится)

Говори ник

Новый ник: DmitriyDonetsk

(форум понравился, думал, на один раз регистрируюсь - но решил остаться )

Спасибо!

[psywalker]

С перезагрузкой страницы - это уже php тебе нужно.

[Kolik]

С перезагрузкой страницы - это уже php тебе нужно.

Зачем? в джумле в настройках плагина меню - поставить пункт активировать родителя, и подпункты будут активны только при переходе на страничку родителя.

И еще джумла каждому элементу меню выдаёт свои id, так что проблем с версткой вроде и быть не должно.

[psywalker]

С перезагрузкой страницы - это уже php тебе нужно.

Зачем? в джумле в настройках плагина меню - поставить пункт активировать родителя, и подпункты будут активны только при переходе на страничку родителя.

И еще джумла каждому элементу меню выдаёт свои id, так что проблем с версткой вроде и быть не должно.

Ну я джумлу не знаю, поэтому и предложил пхп. А вообще можно ж тупо на нужные страницы повесить айдишники или классы на нужных пунктах.

[aradon]

Ужас...

Я в замешательстве...

На первой картинке первый и последний пункт находятся не у самого края круга. А на остальных двигаются к краю... Тут ни то, чтобы верстка, тут искусственный интеллект писать нужно, чтобы заставить это меню работать...

Нужно брать высоту картинки и делить ее на (количество главных пунктов минус 1). Например высота будет 80, делим на 3, получаем 26,6(бесконечная дробь). Потом 80 (самый верх картинки) минус 26. 54px - это ЦЕНТР второго пункта LI. И так далее.. Мы получим центры. Мы знаем расстояния от центров. Значит можем через JS поставить высоту пункту, скажем на 4 пикселя меньше... Это только первый этап. Мы только что отобразили просто это меню без всяких подпунктов... Просто 4 главный пункта...

Допустим пользователь кликает на 3 пункт, в котором у нас 5 подпунктов. Как расчитать, насколько должны раздвинуться между собой 3 и 4 главные пункты, чтобы между ними стали 5 подпунктов, при этом расстояние между 3 и 4 главными пунктами должно быть таким же как и между 1, 2 и 3м главными пунктами... Я представления не имею как это расчитать, но если долго думать можно найти какой-то выход. НО! Смотрим на картинки и охреневаем! Если пунктов много, и мы дошли до минимального расстояния между главными пунктами, то шрифт подпунктов должен уменьшаться так, чтобы первый и последний главные пункты оставались на своих местах по краям круга... Это просто пипец....

Даже если какой-то сумасшедший программист напишет этот искусственный интеллект (да, да, это не просто скрипт, а самый настоящий ИИ), то он все равно неизбежно столкнется с проблемой, когда при большом количестве подпунктов шрифт становится настолько маленьким, что прочитать его сначала просто неудобно, а в будущем может стать и невозможно...

Добавить к задачке кроссбраузерность. Шрифты в разных браузерах имеют разную величину! Я уже не говорю про браузеры под Linux, где грифт Georgia например ВООБЩЕ другой... Ощутили масштаб проблемы? Все то, что я писал раньше нужно смело умножить на количество браузеров!

Ах да... и еще это нужно сделать под Joomla... (Контрольный в голову)

P.S. Зачем вообще решать задачу, сложность которой превосходит создание 10-ти новых сайтов при том, что на выходе мы имеем весьма плохой результат?! Это мень страшное и не удобное... Подпункты плохо отличаются от пунктов-родителей, если их много шрифт становится нечитабельный... Да и вообще это меню не представляет никакой дизайнерской ценности, зачем ради него так мучаться? Эта красная обводка вообще сводит меня с ума...

Присмотрелся, а там у активного пунта не просто полосочка, а еще и стрелочка на конце???

[Kolik]

Можно вообще поставить компонент ссылок типа sh404sef, а меню сделать в ручную, просто в шаблоне или отдельном модуле. И для каждого раздела задать свое меню. Единственное, что управления из админки не будет, или делать управление менюшкой в плагине.

[Des.Ign]

А забавный Вы

Такую технологию мы еще в школе проходили... )))

Самосовершенствоваться в любой области нужно ежедневно!

И искать способы как решить вопрос, а не как отмазаться от его решения, выискивая причины и недостатки в постановке задачи))

Ужас...

Я в замешательстве...

На первой картинке первый и последний пункт находятся не у самого края круга. А на остальных двигаются к краю... Тут ни то, чтобы верстка, тут искусственный интеллект писать нужно, чтобы заставить это меню работать...

Нужно брать высоту картинки и делить ее на (количество главных пунктов минус 1). Например высота будет 80, делим на 3, получаем 26,6(бесконечная дробь). Потом 80 (самый верх картинки) минус 26. 54px - это ЦЕНТР второго пункта LI. И так далее.. Мы получим центры. Мы знаем расстояния от центров. Значит можем через JS поставить высоту пункту, скажем на 4 пикселя меньше... Это только первый этап. Мы только что отобразили просто это меню без всяких подпунктов... Просто 4 главный пункта...

Допустим пользователь кликает на 3 пункт, в котором у нас 5 подпунктов. Как расчитать, насколько должны раздвинуться между собой 3 и 4 главные пункты, чтобы между ними стали 5 подпунктов, при этом расстояние между 3 и 4 главными пунктами должно быть таким же как и между 1, 2 и 3м главными пунктами... Я представления не имею как это расчитать, но если долго думать можно найти какой-то выход. НО! Смотрим на картинки и охреневаем! Если пунктов много, и мы дошли до минимального расстояния между главными пунктами, то шрифт подпунктов должен уменьшаться так, чтобы первый и последний главные пункты оставались на своих местах по краям круга... Это просто пипец....

Даже если какой-то сумасшедший программист напишет этот искусственный интеллект (да, да, это не просто скрипт, а самый настоящий ИИ), то он все равно неизбежно столкнется с проблемой, когда при большом количестве подпунктов шрифт становится настолько маленьким, что прочитать его сначала просто неудобно, а в будущем может стать и невозможно...

Добавить к задачке кроссбраузерность. Шрифты в разных браузерах имеют разную величину! Я уже не говорю про браузеры под Linux, где грифт Georgia например ВООБЩЕ другой... Ощутили масштаб проблемы? Все то, что я писал раньше нужно смело умножить на количество браузеров!

Ах да... и еще это нужно сделать под Joomla... (Контрольный в голову)

P.S. Зачем вообще решать задачу, сложность которой превосходит создание 10-ти новых сайтов при том, что на выходе мы имеем весьма плохой результат?! Это мень страшное и не удобное... Подпункты плохо отличаются от пунктов-родителей, если их много шрифт становится нечитабельный... Да и вообще это меню не представляет никакой дизайнерской ценности, зачем ради него так мучаться? Эта красная обводка вообще сводит меня с ума...

Присмотрелся, а там у активного пунта не просто полосочка, а еще и стрелочка на конце???

Edited September 8, 2011 by Des.Ign

[rus]

ну если высота - фикс, то делайте вертикальный скролл, ибо другого варианта я не вижу.

[psywalker]

ну если высота - фикс, то делайте вертикальный скролл, ибо другого варианта я не вижу.

А я ещё предлагал шрифт делать меньше, т.е. до того размера, пока все пункты не влезут в высоту.

[aradon]

А забавный Вы

Такую технологию мы еще в школе проходили... )))

Самосовершенствоваться в любой области нужно ежедневно!

И искать способы как решить вопрос, а не как отмазаться от его решения, выискивая причины и недостатки в постановке задачи))

Я забавный?? Вы хоть что-то по-существу сказали?

И причем тут выискивание каких-то недостатков? Это все равно, что имея грузовик перетащить 2 тонны кирпичей в другой город. Да, можно, но, блин, это же дибилизм... И зачем мне отмазываться? Это не моя работа... Я ее делать не буду, чего мне отмазываться? Я сказал свое мнение, если у вас есть какие-то аргументы против, не считая "надо совершенствоваться" - буду рад их услышать.