XForms/Vertical Menu
< XForms
Motivation
[edit | edit source]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
[edit | edit source]
Sample Program
[edit | edit source]<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>CSS: a tabbed interface</title>
<style 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;
}
</style>
</head>
<body>
<div class="content">
<div class="tab-box">
<div id="tab1">
<a href="#tab1">Select Items:
<xf:toggle case="case-1" ev:event="DOMActivate" />
</a>
</div>
<div id="tab2">
<a href="#tab2">Bill To:
<xf:toggle case="case-2" ev:event="DOMActivate" />
</a>
</div>
<div id="tab3">
<a href="#tab3">Ship To:
<xf:toggle case="case-3" ev:event="DOMActivate" />
</a>
</div>
<div id="tab4">
<a href="#tab4">Shipping:
<xf:toggle case="case-4" ev:event="DOMActivate" />
</a>
</div>
<div id="tab5">
<a href="#tab5">Confirmation:
<xf:toggle case="case-5" ev:event="DOMActivate" />
</a>
</div>
</div> <!-- tabbox -->
<xf:switch>
<xf:case id="case-1" selected="true()">
<div class="case">
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
</div>
</xf:case>
<xf:case id="case-2">
<div class="case">
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
</div>
</xf:case>
<xf:case id="case-3">
<div class="case">
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
</div>
</xf:case>
<xf:case id="case-4">
<div class="case">
4444444444 4444444444 4444444444
4444444444 4444444444 4444444444
4444444444 4444444444 4444444444
4444444444 4444444444 4444444444
</div>
</xf:case>
<xf:case id="case-5">
<div class="case">
5555555555 5555555555 5555555555
5555555555 5555555555 5555555555
5555555555 5555555555 5555555555
5555555555 5555555555 5555555555
</div>
</xf:case>
</xf:switch>
</div> <!-- content -->
</body>
</html>
Discussion
[edit | edit source]This is similar to the horizontal tab menu. It uses the CSS-3 target pseudo element.