Горизонтальное меню с горизонтальным саб-меню с центровкой

[wolfandman]

Привет!

Подскажите пожалуйста возможно ли сделать такое меню?

Мне необходимо сделать так чтобы саб-меню было по-центру от главного пункта внизу. Обратите внимание, что если саб-меню упирается в границы, то оно автоматически подстраивается и съезжает по логике куда нужно.

Как сделать внизу и чтобы открывалось при наведении - это я могу, а всё остальное - для этого прошу вашей помощи.

Благодарю за внимание.

[Softlink]

Как сделать по центру не придумалось Но остальные задачи оно решает http://jsfiddle.net/4je52/

А вообще, наверное, это на js лучше реализовать

[psywalker]

wolfandman,

Лови http://jsfiddle.net/4je52/1/

[Softlink]

psywalker, или я чето не уловил, или это хардкод. Ты же ширину блокам меню зафиксил.

[psywalker]

psywalker, или я чето не уловил, или это хардкод. Ты же ширину блокам меню зафиксил.

Да эт я тупо твой вариант перековырял, особо не глядел там. Вот http://jsfiddle.net/4je52/2/

[wolfandman]

Спасибо, ребята!

Softlink, твоё решение близко по смыслу, но пунктов меню может быть произвольное кол-во, а саб-меню должно вставать по центу от пункта меню если этот пункт находится в середине меню. У меня вообще может быть несколько таких меню, но для каждого прописывать свой код - это не выход. Нужно универсальное решение. Спасибо за попытку )

psywalker, спасибо тоже ) Это примерно то же самое. Не универсальное решение.

Edited October 1, 2011 by wolfandman

[psywalker]

psywalker предложил действительно "хардкод" )) Это совсем далеко от плана.

Погоди, а вот этот вариант чем плох? http://jsfiddle.net/4je52/2/

[Softlink]

Спасибо, ребята!

Softlink, твоё предложение довольно близко к задуманному, но всё же не совсем: саб-меню не устанавливается по центру в средних пунктах меню. И вообще, решение не универсально. У меня будет много подобных меню, и для каждого прописывать свой стиль и класс невозможно. Но спасибо за попытку! )))

Так можно же на селекторах все разрулить. Это просто я классы вешал. Плохо уже соображается. А задачка интересная.

И в догонку. В каких браузерах должно это работать?

psywalker предложил действительно "хардкод" )) Это совсем далеко от плана.

Так второй вариант же вроде подходить должен.

[wolfandman]

Спасибо, ребята!

Softlink, твоё предложение довольно близко к задуманному, но всё же не совсем: саб-меню не устанавливается по центру в средних пунктах меню. И вообще, решение не универсально. У меня будет много подобных меню, и для каждого прописывать свой стиль и класс невозможно. Но спасибо за попытку! )))

Так можно же на селекторах все разрулить. Это просто я классы вешал. Плохо уже соображается. А задачка интересная.

И в догонку. В каких браузерах должно это работать?

psywalker предложил действительно "хардкод" )) Это совсем далеко от плана.

Так второй вариант же вроде подходить должен.

Softlink, А как быть если пунктов может быть произвольное количество?

Саб-меню должно вставать прямо под свой пункт в меню и центрироваться. Как у меня на картинке.

[Softlink]

wolfandman, ну так вы поэкспериментируйте с этим примером http://jsfiddle.net/4je52/2/ Добавьте много пунктов. В данном случае они становятся друг под друга. Иначе вообще что-то сложно придумать. Или тянуть блок-родитель, если это позволяет макет.

[wolfandman]

Softlink, я поэксперементировал. Добавил 2 пункта. Саб-меню встал ровно по центру всего меню. А мне нужно чтобы оно вставало под пунктом меню, который выбран. Прямо под ним. И отцентрирован.

Спасибо. ещё подумаю

[Softlink]

Softlink, я поэксперементировал. Добавил 2 пункта. Саб-меню встал ровно по центру всего меню. А мне нужно чтобы оно вставало под пунктом меню, который выбран. Прямо под ним. И отцентрирован.

Спасибо. ещё подумаю

О, точно! Макс, не доработал чуток Скажите еще какие браузеры должны работать. Завтра попробую еще покопать, если время будет.

[psywalker]

wolfandman,

Ну ок, а так что скажешь? http://jsfiddle.net/4je52/3/

[wolfandman]

Хо-хо! psywalker, чертовски близко! ))) Спасибо спасибо спасибо вам обоим.

Фактически, это и есть то о чём я просил. Я очень счастлив, что так быстро удалось всё сделать!

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

[psywalker]

Хо-хо! psywalker, чертовски близко! ))) Спасибо спасибо спасибо вам обоим.

Фактически, это и есть то о чём я просил. Я очень счастлив, что так быстро удалось всё сделать!

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

Немного не понял, что ты сделал? Покажи плиз на деле.

[wolfandman]

Хо-хо! psywalker, чертовски близко! ))) Спасибо спасибо спасибо вам обоим.

Фактически, это и есть то о чём я просил. Я очень счастлив, что так быстро удалось всё сделать!

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

Немного не понял, что ты сделал? Покажи плиз на деле.

Действительно. Так проще. http://jsfiddle.net/uqHwH/. При наведении на "третий", саб-меню заезжает за правый край.

[psywalker]

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

[wolfandman]

Понял, спасибо большое!

Очень помогли мне.

[Softlink]

Немного не понял, что ты сделал? Покажи плиз на деле.

http://clip2net.com/s/1dbjc вот об этом я тоже думал изначально. Выход вижу только в добавлении селекторов типа nth-child и указывать последним двум-трем последним пунктам text-align:right, т.к. фиксация ширины родителя не приведет ни к чему. Либо точно на js и поворачивать меню в нужную сторону. И на нем же уже центрирование.

[psywalker]

Понял, спасибо большое!

Очень помогли мне.

Тебе спасибо. Наконец-то на форуме за последние две недели появились интересные задачи.

Немного не понял, что ты сделал? Покажи плиз на деле.

http://clip2net.com/s/1dbjc вот об этом я тоже думал изначально. Выход вижу только в добавлении селекторов типа nth-child и указывать последним двум-трем последним пунктам text-align:right,

Это хреновая и не универсальная затея. Она фиксированная сама по себе. Если знать точное кол-во пунктов, то да, такое можно сделать.

[Softlink]

я все-таки за то, чтобы такое на js выпиливать, имхо, мороки меньше будет. Да и полностью все задачи можно решить, да и скрипт наверняка не большой получится.

_http://ruseller.com/lessons.php?rub=32&id=208

[psywalker]

я все-таки за то, чтобы такое на js выпиливать, имхо, мороки меньше будет. Да и полностью все задачи можно решить, да и скрипт наверняка не большой получится.

_http://ruseller.com/lessons.php?rub=32&id=208

Да, согласен. Раз задача стоит такая чёткая, то лучше скрипты. И мусора за одно в хтмл не будет.