Горизонтальное меню как на Apple

[Kintim]

Доброго времени суток!

Друзья, много где спрашивал, однако однозначного ответа ни где не нашел.

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

Причем!!! Пункты меню должны иметь разную ширину. Тупо задать размер - не интересует.

Можно тут посмотреть: http://www.apple.com/

Градиенты не интересуют, хочу сохранить гибкость. Буду благодарен всем, кто сможет направить на путь... Спасибо!

Если у них на сайте чуть подправить HTMl с помощью fireBug например. То на второй картинке становится больше пунктов меню.

Тут скриншоты:

[Veseloff]

http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

[Softlink]

Ну и таблицы никто не отменял.

[Kintim]

Эммм.. Это что-то не про то... совсем!! Вы хоть видели что происходит при добавлении:

Уважаемый Softlink, а где у Эппла таблицы??!??!? Чего-то я не рассмотрел, покажите где именно.

[Great Rash]

Уважаемый Softlink, а где у Эппла таблицы??!??!? Чего-то я не рассмотрел, покажите где именно.

[Kintim]

ОК.. понял.

Однако этого мало. Допустим тот же ИЕ игнорит этот стиль и выходит все столбиком...

Как быть?

Может быть подскажите примеры?

конечно же у Эпл таких проблем нет, их сайт кроссбраузерный!! Вроде ))

[Great Rash]

Для ИЕ походу написан скрипт:

http://images.apple.com/global/nav/scripts/globalnav.js

[rewue]

это не таблица)) это всего лишь свойство CSS которое говорит элементу списка как отобразится)

а вообще делается элементарно.

menu   {width:90%;}
menu>li {display:inline-block; padding:0 10px;/*пункты меню развернулись горизонтально, ширина их динамическая - то есть по размеру текста+отступы по краям. все теперь зависит от доступной для меню ширины и количесвта пунктов меню*/
       border-left:1px solid black;}/*нарисовали линии разделители*/
menu>li:first-of-type  {border-left:none;} /*убрали палку у первого элемента*/

[Kintim]

это конечно все хорошо, только вот вопрос у меня, при использовании вашего примера пункты перескакивают на другую строчку, а должны помещаться в строку в тот размер, что есть. Даже если 100 пунктов все равно должны влезть в эти 500 пикс.

[Modestes]

Уверен у них одним CSS не обошлось, думаю тут вычисление ширины в JS

А механика у меню конечно классная, ради интереса добавил через файрбаг N-ое количество пунктов, примерно 100, и все влезло ), правда потом текста не видно)

Edited June 21, 2012 by Modestes

[rewue]

это конечно все хорошо, только вот вопрос у меня, при использовании вашего примера пункты перескакивают на другую строчку, а должны помещаться в строку в тот размер, что есть. Даже если 100 пунктов все равно должны влезть в эти 500 пикс.

так нужно меню что бы такое же было или чтобы было 100 пунктов? есть же разумные пределы. А вообще тот самый table-cell, в оригинале, заставляет страничку думать что это не Li а ячейка таблицы - а она не переносится сама на следующую строку. То етсь если поменять в моем коде inline-block на table-cell - возможно и получится нужный результат

например вот так

menu	{width:90%;
	display:inline-table;}
menu>li	{display:table-cell;
	height:100px; 
	text-align:center;}

Edited June 22, 2012 by rewue