XForms/Vertical Menu
From Wikibooks, open books for an open world
< XForms
This page may need to be
Contents |
Motivation [edit]
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]
Sample Program [edit]
<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]
This is similar to the horizontal tab menu. It uses the CSS-3 target pseudo element.
