XForms, Vertical Menu

Motivation

You want a navigation bar on the left edge of a form that allows you to swap different sections of a large form into view.

Screen Image

Vertical Tabs

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;

CSS: a tabbed interface
type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");

/* Make the tab box be on the left */
div.content div.tab-box {
position: absolute;
width: 108px;
}

div.tab-box div {
display: block;
}

/* style each individual tab */
div.tab-box div a {
display: block;
color: black;
border: 0.1em outset #BBB; /* Make it look like a button */
border-right: 0.1em solid #CCC;
font-weight: bold;
font-family: Helvetica, sans-serif;
text-decoration: none;
text-align: right;
padding: 0.2em;
/* round the left corners - works only under FireFox */
-moz-border-radius: .7em 0em 0em .7em;
width: 100%;
line-height: 1.4em;
}

/* Make non-selected tabs appear in the background */
div.tab-box div:not(:target) a {
border-bottom: none; /* Make the right border disappear */
background: #999;
}

/* Make the selected (targeted) item or default selection to appear on top */
div.tab-box div:target a {
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
background: #CCC; /* Set active tab to light gray */
}

/* set non-selected tabs to dark gray */
div.tab-box div:not(:target) a {
border-bottom: none; /* Make the bottom border disappear */
background: #999; /* Set inactive tabs are dark gray */
}

/* style the swapped area */
div.case {
position: absolute;
margin-left: 115px;
background: #CCC; /* Light gray */
padding: 0.3em; /* Looks better */
width: 400px;
height: 145px;
}

class="content">
class="tab-box">
id="tab1">
href="#tab1">Select Items:
case="case-1" ev:event="DOMActivate" />

id="tab2">
href="#tab2">Bill To:
case="case-2" ev:event="DOMActivate" />

id="tab3">
href="#tab3">Ship To:
case="case-3" ev:event="DOMActivate" />

id="tab4">
href="#tab4">Shipping:
case="case-4" ev:event="DOMActivate" />

id="tab5">
href="#tab5">Confirmation:
case="case-5" ev:event="DOMActivate" />

id="case-1" selected="true()">
class="case">
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111

id="case-2">
class="case">
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222

id="case-3">
class="case">
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333

id="case-4">
class="case">
4444444444 4444444444 4444444444
4444444444 4444444444 4444444444
4444444444 4444444444 4444444444
4444444444 4444444444 4444444444

id="case-5">
class="case">
5555555555 5555555555 5555555555
5555555555 5555555555 5555555555
5555555555 5555555555 5555555555
5555555555 5555555555 5555555555

Discussion

This is similar to the horizontal tab menu. It uses the CSS-3 target pseudo element.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.