Horizontal (tabbed) menu with the ability to move overflowing items to a collapsible dropdown menu
It's about the html / css / javascript menu;)
I'm looking for a unified solution to hide the extra tabs of a horizontal / tabbed menu when it overflows the container.
Initial idea, plagiarism from the desktop firefox tab, i.e. when you have too many tabs, it will wrap additional tabs in the List of All Tabs roll-down button.
I'm going to play around with: auto overflow combined with javascript, but is there something like this already implemented or could it be better?
Thanks.
source to share
overflow: auto can be a tricky, if not impossible, task to monitor accurately with javascript. There are two things you probably need to control here: the parent container and the UL that contains the tabs (presumably links inside the LI). You can make quantitative comparisons between the widths of both elements in javascript quite reliably.
I'm not sure which library you prefer to use, but YUI has a really powerful utility that will be applicable - Region. It returns an object full of useful properties of an element - its position in the document, size and intersections with other elements (see http://www.wait-till-i.com/2007/08/28/monitoring-element-size-and -position-with-the-yui / ).
Regardless of which library you end up using (or nothing at all), region concepts should help you move in the right direction.
source to share