Horizontal menu with dynamic item count in Drupal 7?

Question

css

Hello!

For the second week I have been struggling with one menu, the items of which should have the same width and fill the entire width of the div container (in my case, the container id=highlighted). The number of menu items is planned to change from time to time, ie. the solution should involve changing the width of each item depending on the number of those items.

So far the solution is:
HTML: ul, unnamed list, standard Drupal
CSS template:

#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: a small script that
1) takes the width of the highlighted
2) divides it by the number of menu items (the number of child li inside the ul is calculated)
3) assigns the entire ul the width of highlighted, and each menu item the calculated width depending on number of items

Thus, if JavaScript is disabled in the browser, the menu will be displayed compressed (less than the width of the highlighted container). ul li a is intentionally not given a width.

Another problem is that in Internet Explorer 7 the menu is displayed in a compressed form for half a second, only after which the jQuery script starts running and the menu items expand to the desired size.

A huge request, tell me how such things are solved?

Answer 1

The most primitive way is a table.
More advanced - css display property and table-row, table-cell values.

Answer 2

Not without tambourines (individual styles for IE and JS fix for Opera - but I also had a drop-down menu screwed on, for which this JS fix was required), but in general, without JS, on one CSS, without reference to CMS and to current widths .
chikuyonok.ru/2011/04/inline-vertical-align/
See comment from Tkachenko Artem. THAT is, everything is rendered in spans with an inline / inline block as display, the last span is 100% wide and everything is aligned with justify.
There you will have to sweat for blocks, inline blocks and just inlines. In addition, if the total width of the items is greater than the width of the container, the "extra" items will move to the next line.