Last modified on 9 July 2009, at 20:10

XForms/Vertical Menu

MotivationEdit

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 ImageEdit

XForms-vertical-tab-menu.jpg

Vertical Tabs

Sample ProgramEdit

<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>

DiscussionEdit

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

ReferencesEdit

Next Page: Folding Menus | Previous Page: Horizontal File Tab Menu Highlighted

Home: XForms