Glossy Tabs is a JavaScript+CSS solution for creating multi-row tabbed navigation as seen on OBD's Blosics 2 Levels pages.

How to use

Place the JavaScript and CSS code somewhere on your site, and then reference them in the header of your documents as follows:

Create your tabs with HTML as follows:

Customizing the tabs

You can redefine any/all styles as defined in the CSS file (it is recommended that you override them with your own stylesheets rather than alter the default styles in the source).

You can also assign your own values to several JavaScript variables:

Variable (prefix with glossyTabs.)	Default	Description
localSiteBase	""	Set to something like "file:///C:/Users/Ryan/Desktop/Globalisk/" for testing locally
tabContentWidth	580	Tabs must be of a fixed pixel width
tabColor	"#ffffff"	Tab foreground color
tabBackgroundColor	"#424242"	Tab background color
tabSelectedColor	"#009900"	Selected tab foreground color
tabSelectedBackgroundColor	"#000000"	Selected tab background color
tabBorderBottom	"1px solid transparent"	Tab bottom border
tabSelectedBorderBottom	"1px solid #000000"	Selected tab bottom border
tabBorderBottomLastRow	"1px solid #bbbb42"	Tab bottom border (bottom/last row tabs)
tabBorderSize	1	Pixel thickness of the tab borders
tabBorderRadius	8	Radius of the rounded tab corners
currentTab	1	Set this to the current tab index when tabs span multiple pages
padLabels	0	Pad labels with spaces at the beginning and end (use this if you wind up with only one tab in the last row and want to force more tabs into it)

If you find this code useful, please consider making a donation.