Talk:XForms/Horizontal File Tab Menu

Ideally we would like to use a system that did not rely on colors and would change the unselected tabs to be a different style.

The :target pseudo tag is a good candidate.

Here is a sample:  CSS: a tabbed interface  @namespace xf url("http://www.w3.org/2002/xforms");

div.horiz-tabs-menu { min-height: 7em;		/* No height: can grow if :target doesn't work */ position: relative;		/* Establish a containing block */ line-height: 1;		/* Easier to calculate with */ z-index: 0; }			/* So that we can put other things behind */ div.horiz-tabs-menu div { display: inline; }		/* We want the buttons all on one line */

/* style the tabs */ div.horiz-tabs-menu div a { color: black;			/* Looks more like a button than a link */ background: #CCC;		/* Active tabs are light gray */ font-family: Helvetica, sans-serif; font-weight: bold; text-decoration: none; padding: 0.2em;		/* Some breathing space */ border: 0.1em outset #BBB;	/* Make it look like a button */ -moz-border-radius: .5em .5em 0em 0em; border-bottom: 0.1em solid #CCC; } /* Visually connect tab and tab body */

div.horiz-tabs-menu2 xf|trigger { color: black;			/* Looks more like a button than a link */ background: yellow;		/* Active tabs are light gray */ border: 0.1em outset #BBB;	/* Make it look like a button */ border-bottom: 0.1em solid #CCC; font-weight: bold; font-family: Helvetica, sans-serif; margin-right: 5px; padding: 0.2em; /* the following only works under FireFox */ -moz-border-radius: .5em .5em 0em 0em; }

div.horiz-tabs-menu div:not(:target) a { border-bottom: none;		/* Make the bottom border disappear */ background: #999; }		/* Inactive tabs are dark gray */ div.horiz-tabs-menu2 xf|trigger:not(:target) { border-bottom: none;		/* Make the bottom border disappear */ background: #999; }		/* Inactive tabs are dark gray */

div.horiz-tabs-menu div:target  a,	/* Apply to the targeted item or... */
 * target #default2 a {		/* ... to the default item */

border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */ background: #CCC; }		/* Active tab is light gray */ /* Apply to the targeted item or... */ div.horiz-tabs-menu2 xf|trigger:target, selected  {		/* ... to the default item */ border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */ background: red; }		/* Active tab is light gray */ div.horiz-tabs-menu div:not(:target) a { border-bottom: none;		/* Make the bottom border disappear */ background: #999; }		/* Inactive tabs are dark gray */ div.horiz-tabs-menu3 xf|trigger:not(:target) { border-bottom: none;		/* Make the bottom border disappear */ background: #999; }		/* Inactive tabs are dark gray */

/* Style the content to be swapped in */ div.horiz-tabs-menu div  div { background: #CCC;		/* Light gray */ z-index: -2;			/* Behind, because the borders overlap */ left: 0; top: 1.3em;		/* The top needs some calculation... */	bottom: 0; right: 0;		/* Other sides flush with containing block */ overflow: auto;		/* Scroll bar if needed */ padding: 0.3em;		/* Looks better */ border: 0.1em outset #BBB; /* 3D look */ }	xf|switch xf|case { background: #CCC;		/* Light gray */ top: 1.3em;		/* The top needs some calculation... */ padding: 0.3em;		/* Looks better */ border: 0.1em outset #BBB; /* 3D look */ }	/* 3D look */ div.horiz-tabs-menu div:not(:target) div { /* Protect CSS1 CSS2 browsers */ position: absolute; }		/* All these DIVs overlap */ div.horiz-tabs-menu div:target  div, :target #default2   div { position: absolute;		/* All these DIVs overlap */ z-index: -1; }			/* Raise it above the others */

Tab 1 One might well argue, that... 				Tab 2 ... 30 lines of CSS is rather a lot, and... 				Tab 3 ... that 2 should have been enough, but... 				Default ... it works!  Tab 1    <xf:label>Tab 2</xf:label> <xf:toggle case="case-2" ev:event="DOMActivate"/> </xf:trigger> <xf:trigger appearance="minimal"> <xf:label>Tab 3</xf:label> <xf:toggle case="case-3" ev:event="DOMActivate"/> </xf:trigger> <xf:switch> <xf:case id="case-1" selected="true"> menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content </xf:case> <xf:case id="case-2"> menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content </xf:case> <xf:case id="case-3"> menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content </xf:case> </xf:switch>

errors in linked example
The linked example has three errors:

(The first case is by default selected, so this case be omitted, or moved to another case.)
 * element style should be in head, not a peer to it.
 * element style is missing attribute type="text/css"
 * element case attribute selected is a true|false enumeration, not an XPath expression and so should be selected="true"

LeighKlotz (talk) 16:46, 16 September 2008 (UTC)