[css-regions] responsive menu demo

Hey all,

At TPAC I demoed a responsive UI solution using CSS Regions [1]. The demo
link did not make it into the minutes, which was my fault (too much
demoing, not enough documenting). So for anyone who wanted to take a look
themselves, try this out in a regions-enabled browser:

http://codepen.io/oslego/details/tdHEg

The idea is that you have a navigation bar with a number of elements that
may or may not fit on the screen. When the screen does not have enough
width to show all of the elements, they move to a menu on the right. You
can see this pattern on a Guardian site [2], and it is also used in Google
Docs in the toolbar. These sites use JavaScript to measure and move
elements to and from the navigation bar and the menu.

If you put the elements into a named flow, then create a region chain
consisting of the navigation bar and an auto-sized box in the menu, then
you donšt need any script to achieve this effect. The fragmentation rules
place as many elements as will fit in the bar, and flow the rest into the
menu. Note that in the Guardian site, there are additional items in the
menu. So this is an example of the need to chain non-sibling boxes
together.

Thanks,

Alan 

[1] http://lists.w3.org/Archives/Public/www-style/2013Nov/0370.html
[2] http://www.theguardian.com/world?view=mobile

Received on Monday, 25 November 2013 21:21:25 UTC