Здравствуйте!
Уже вторую неделю бьюсь над одним меню, пункты которого должны иметь одинаковую ширину и заполнять всю ширину div-контейнера (в моем случае у контейнера id=highlighted). Количество пунктов меню планируется иногда менять, т.е. решение должно подразумевать изменение ширины каждого пункта в зависимости от количества этих пунктов.
На сегодня решение следующее:
HTML: ul, ненуменованный список, стандартный друпаловский шаблон
CSS:
#highlighted {<br/>
width: 100%; /* знаю, что block-level элемент сам занимает 100% ширины и высоты родительского, но так надо :-) */ <br/>
}<br/>
.content ul.menu {<br/>
width: 875px;<br/>
margin: 0 auto;<br/>
padding: 0;<br/>
height: 1.5625em;<br/>
line-height: 1.5625em; <br/>
}<br/>
.content ul.menu li {<br/>
margin: 0;<br/>
padding: 0;<br/>
list-style: none;<br/>
float: left;<br/>
z-index: 150;<br/>
}<br/>
.content ul.menu li a {<br/>
display: block;<br/>
margin: 0;<br/>
padding: 0;<br/>
text-align: center;<br/>
font-size: 0.75em;<br/>
}<br/>
jQuery: небольшой скрипт, который
1) берёт значение ширины highlighted
2) делит его на кол-во пунктов меню (вычисляется кол-во дочерних li внутри ul)
3) присваивает всему ul ширину highlighted, а каждому пункту меню — вычисленную ширину в зависимости от кол-ва пунктов
Таким образом, если JavaScript в браузере отключен, меню будет отображаться сжатым (меньше ширины контейнера highlighted), т.к. для ul li a намеренно не задается ширина.
Другая проблема заключается в том, что в Internet Explorer 7 меню на полсекунды отображается в сжатом виде, только после чего начинает работать скрипт jQuery и пункты меню расширяются до нужных размеров.
Огромная просьба, подскажите, как решаются подобные вещи?
Простой
