Pure CSS Info-Bar (Multi-Tab Nested Tabs Demo)

This page demonstrates the Pure CSS Info-Bar, except with multiple nested tabs.

This uses a very similar CSS to the multiple-tabs example, except because we place the info-panels inside each other in the markup, we need to adjust the widths and positions slightly. That's about it!

The overall efffect is not only pleasing, but makes for good navigation - all the previous tabs are visible with the panels expanded - you can easily switch back to another tab.

Drawing this with the tabs on the right would seem to be more logical, but this is only a demo!

Here is the CSS..

highlighted source generated dynamically with corz distro machine..

Make Big Fun Now!

;o) corz.org