Centered Sliding Door Tab Menus

Navigation with a tabbed appearance is popular among web design and programming. Taking stability of appearance one step further, the appearance should not degrade when the user zooms in or out of a web page. This especially becomes an issue when a graphic of some kind is used as the background and shape of a menu tab.

To prevent degradation, a popular technique is called sliding doors. This employs using a small graphic that serves as an anchor point and an over-size graphic that shows less at smaller scale and becomes more visible as the text grows, filling in the background to give the appearance of growing with the text.

Tutorials on sliding door techniques I found did not cover how to horizontally center a tabbed menu as a block. This tutorial will show the results of combining a sliding doors technique from Sliding Doors Tabs Menu and Horizontally Centered Menus with no CSS hacks.

My hat is off to the authors of these tutorials. Their simple and clear articles make the synthesis of their information possible.

Continue reading