HTML / CSS标签式导航

Question

I am developing an application where users will be able to open tabs. For your note, I am using the Bootstrap CSS framework, and it has a tab plugin as well. (In case I need a more flexible approach I can use a different library for this job.)

http://twitter.github.com/bootstrap/javascript.html#tabs

What I need is to have a flexible width for tabs. It should work like Chrome/Firefox's tabs. If the collective width of the tabs is less than the width of the bar, it should work as it is is. However if it is longer than the width of the bar, then the size of each tab width should reduce equally. (If you open 10-20 tabs using chrome/firefox, you'll understand what I mean)

Is there any easy way to do this, without using javascript? The only solution that comes up to my mind is to get the inner width of the bar using javascript and get the width of the other tabs and sum them up. If the sum is higher, then I can resize each tab.

I can implement this solution but I fear it will be hard to ensure cross browser compatibility. Is there any easier way to achieve this?

Thanks in advance,

Answer 1

You could adjust the width of nav nav-tabs li elements after they are rendered.

Calculate how many tabs fit in the parent element at their normal size and reduce each tab by a percentage of a single tab width for each tab that exceeds the max number.

Answer 2

You don't need JavaScript as long as you can rely on a CSS algorithm that adapt width to its content: the table layout algorithm :)

See http://jsfiddle.net/r9yrM/1/ from my previous answer for examples.

Don't forget to have a minimum padding on each "cell", text stuck to a border isn't very readable (and ugly).

With JS, you could decide of a maximum number of tabs (or a minimum "reasonable" width) and above (below) that number, add a class on the parent that will trigger each tab to render as float: left and block and not table-cell anymore. Then it'll occupy 2 or more lines (like the extension Tab Mix Plus on Firefox)

Answer 3

I've tried to solve the same problem today... maybe my solution helps you a little more: http://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/

It uses HTML + CSS only... no JS so far. But I think I'd need some JS to react on the actual width of the browser window.