Горизонтальное меню (LI пропорционально)

[lost]

Имеется горизонтальный UL длинной 1000px

в нем несколько LI

Пример кода: Ссылка на код

Пункты меню могут добавляться из CMS. можно ли равномерно распределять пункты по всей длине списка?

[hedgehog]

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

[lost]

Дело в том, что мне нельзя привязываться к конкретным классам li или a эллементов. это же CMS, там может все поменяться/добавиться

[wildhind]

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

Примерно так:

var totalWidth = 0;
$("li").each(function(){ totalWidth+=$(this).outerWidth() })
$("li+li").css({"martin-left": ($("ul").width()-totalWidth)/($("li").size()-1)})

[hedgehog]

Дело в том, что мне нельзя привязываться к конкретным классам li или a эллементов. это же CMS, там может все поменяться/добавиться

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

[wildhind]

У нормальной CMS в html строго то, что пишет верстальщик. Но для того, чтобы не создавать себе лишних проблем, следует все повторяющиеся элементы оформлять одинаково. Пункт в меню — это повторяющийся элемент. Все пункты должны быть одинаковы. Это единственное пожелание к вёрстке, если она не для сферического вакуума делается, а для интеграции с CMS.

[lost]

У нормальной CMS в html строго то, что пишет верстальщик. Но для того, чтобы не создавать себе лишних проблем, следует все повторяющиеся элементы оформлять одинаково. Пункт в меню — это повторяющийся элемент. Все пункты должны быть одинаковы. Это единственное пожелание к вёрстке, если она не для сферического вакуума делается, а для интеграции с CMS.

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

[SelenIT]

мне нельзя привязываться к конкретным классам li или a эллементов

А где в хоть одном из приведенных примеров хоть одна такая привязка?

Можно. Скриптом.

Зачем такие жертвы (особенно если дойдет до нюансов округления в IE9), когда выше привели пример, не требующий таковых?

Опять же, смотря что топикстартер понимает под "равномерно" — возможно, подойдет что-то такое (а для старых IE — деградация к флоатам)...

[wildhind]

Нате вам решение:

…
<script src="http://wildhind.ru/plugins/justify/jquery.justify.js"></script>
<script>
$(function(){ $("nav","ul.menu").justify() })
</script>
…
<nav>
<a href="">пункт меню</a>
<a href="">пункт меню</a>
</nav>

<ul>
<li>со списком</li>
<li>тоже работает</li>
<ul>

всё равно делать нечего было.

Растягивает по ширине любой набор дочерних элементов, если ширина родительского элемента больше суммы ширин дочерних элементов.

Зачем такие жертвы (особенно если дойдет до нюансов округления в IE9)…?

в чём, собственно, жертвы и каковы нюансы в этом отмирающем динозавре?

[SelenIT]

Зачем 3 действия (CSS + is + js-библиотека), когда достаточно 1 (CSS)? Жертвы, например, в миллисекундах до приобретения сайтом товарного вида), да и вообще зачем плодить лишние зависмости ради пустячного стилевого эффекта.

Особено если считать последний (пока) дефолтный браузер в самой популярной ОС "вымирающим динозавром" . В котором далеко не всегда сумма ширин частей равна ширине целого...

[wildhind]

Зачем 3 действия (CSS + is + js-библиотека), когда достаточно 1 (CSS)? Жертвы, например, в миллисекундах до приобретения сайтом товарного вида), да и вообще зачем плодить лишние зависмости ради пустячного стилевого эффекта.

ок, объясню.

Давайте смотреть правде в глаза: в коммерческом сайтостроении jquery — это уже стандарт де-факто. Сайт, не использующий эту библиотеку — большая редкость. У нас например в дефолтном шаблоне он уже есть по умолчанию. Потому делаем предположение, что jquery уже подключен. Никаких лишних действий.

Решение в одну строчку — это удобство и скорость разработки. К тому же оно протестировано и исправно работает во всех актуальных браузерах. Даже в IE6, если кого-то он ещё интересует. Не смотрите, что только полчаса назад оно оформлено в виде плагина, применяется давно. Правда, известен один косяк: ширина может отличаться, если подключены нестандартные шрифты при помощи @font-face. Но и он решается. Может как-нибудь на досуге засуну в плагин и это решение, если будет настроение и будет такая необходимость.

В css при этом только оформление, нет нагромождения лишних конструкций.

По статье выше только один вариант (4) пригоден для применения в реальных условиях. Остальные же предъявляют совершенно неприемлемые требования к html. Напомню, что современных сайтов без CMS практически не бывает, а вывод меню в любой cms представляет собой цикл, на каждой итерации отдающий одну и ту же конструкцию.

Особено если считать последний (пока) дефолтный браузер в самой популярной ОС "вымирающим динозавром" . В котором далеко не всегда сумма ширин частей равна ширине целого...

Про вымирающего динозавра — не моё мнение, а мнение статистики Плюс к тому в 2012 году свыше 95% заказчиков при обсуждении проекта произносят замечательную фразу: «IE? А его ещё кто-то пользует? ну и хрен с ним! Сами виноваты».

Вспоминается, как в январе на партнёрской конференции 1С-Битрикс докладчик произнёс фразу «мы же с вами понимаем, что самая распространённая ОС — это Windows», и посмотрел сначала на макбуки, стоящие на столах докладчиков, а потом долго водил взглядом по светящимся яблокам на крышках ноутбуков у присутствующих в поисках подтверждения своих слов. Дружный хохот был ему ответом

[SelenIT]

Насчет конференции - это у нас в Минске было?

[wildhind]

это было в Москве

[SelenIT]

Я так и подумал. "По результатам онлайн-соцопроса, 100% россиян подключены к интернету..."

[wildhind]

SelenIT, а не оффтопим ли мы?

К тому же я только что проверила: в Минске моё решение тоже работает.

[SelenIT]

Но в Минске, к сожалению, не работает статистика, по которой преобладает макось. Как и во многих др. местах за пределами пафосных московских мероприятий и Голливуда.

JQuery хорош, но никак попадется на поддержку/доработку проект на Mootools? CSS- решение тоже протестировано и отлажено, вкопипастить его в проект не дольше, чем подключить скрипт - только оно не будет зависеть ни от ОС, н от шрифта, от от изменения масштаба или размера шрифта в браузере, потому что за размещение элементов в нем отвечает тот слой, которому это положено по долгу службы - браузерный рендерер. А не отдельная поведенческая добавка, вообще напонятно как связанная со статикой...