ClarkePeter’s Weblog

Here’s another cool trick I just came up with. I had a main menu encased in a fieldset with a title in a legend, and I wanted to move the menu to some other pages so people would have a handy main menu on every page. It’s a bit bulky, so knew I needed to hide it, so the switch/case was just what I needed. Then I thought, hey, wouldn’t it be cool if I could just click on the legend and have the menu drop out? Well, here it is folks!

Shut:

…..

Open:

…..

And here’s the code (sorry I don’t have time to tidy it up):

(see also Switch/Case Toggle Template  or Using Switch Case as a drop down box).

<xf:switch>
<xf:case id=’menuShut’>
<h:fieldset style=”background-color:#cccc99;
width:24ex; padding-left:3ex; border-width:1px; border-color:#000033;”>
<h:legend >
<xf:trigger appearance=’minimal’>
<h:span style=”color:#800000;font-weight:bold;font-size:107%”>
<xf:label> Main Menu </xf:label>
</h:span>
<xf:toggle case=’menuOpen’ ev:event=’DOMActivate’/></xf:trigger>
</h:legend>
</h:fieldset>
</xf:case>

<xf:case id=’menuOpen’>
<h:fieldset style=”background-color:#cccc99;
width:24ex; padding:3ex; border-width:1px; border-color:#000033;”>
<h:legend >
<xf:trigger appearance=’minimal’>
<h:span style=”color:#800000;font-weight:bold;font-size:107%”>
<xf:label> Main Menu </xf:label>
</h:span>
<xf:toggle case=’menuShut’ ev:event=’DOMActivate’/></xf:trigger>
</h:legend>
<xf:submit id=”optionsMenu” class=”ztagsbox” submission=”optionsMenu” appearance=”minimal”>
<xf:label class=”ssubmit”>
<h:fieldset class=”barmenu”>
Make a new form
</h:fieldset>
</xf:label>
</xf:submit>
<h:br/>

<xf:submit id=”fileManager” class=”ztagsbox” submission=”fileManager” appearance=”minimal”>
<xf:label class=”ssubmit”>
<h:fieldset class=”barmenu”>
View or Delete forms
</h:fieldset>
</xf:label>
</xf:submit>
<h:br/>

<xf:submit id=”styling” class=”ztagsbox” submission=”styling” appearance=”minimal”>
<xf:label class=”ssubmit”>
<h:fieldset class=”barmenu”>
Style forms
</h:fieldset>
</xf:label>
</xf:submit>
<h:br/>

<xf:submit id=”stats” class=”ztagsbox” submission=”stats” appearance=”minimal”>
<xf:label class=”ssubmit”>
<h:fieldset class=”barmenu”>
Work with Data
</h:fieldset>
</xf:label>
</xf:submit>
<h:br/>

<xf:submit id=”clients” class=”ztagsbox” submission=”clients” appearance=”minimal”>
<xf:label class=”ssubmit”>
<h:fieldset class=”barmenu”>
Clients
</h:fieldset>
</xf:label>
</xf:submit>

</h:fieldset>

</xf:case></xf:switch>