View Full Version : Switch Menu II -- Horizontal instead of Vertical Layout

01-21-2006, 06:10 AM
Switch Menu II IE

I'm testing this menu, and it works fine so far for my purposes.
However, I would like to have a horizontal layout of the main buttons,
instead of having each one over the other (in the vertical layout as shown in the demo).

I know this may be a very basic question, but I'm a newer than new newbie.
Any help would be greatly appreciated!

01-21-2006, 08:14 AM
With these additions/changes to the demo style (in red):

<style type="text/css">

.showstate{ /*Definition for state toggling image */
float: right;
margin-top: 2px;
margin-right: 3px;

width: 250px;
font-size: 120%;
font-weight: bold;
border: 1px solid black;
background-color: lightyellow;

width: 250px;
border: 1px solid black;
border-top-width: 0;

#contains td {


I found I could put the demo HTML portion in a table with the id="contains":

<!--Optional Expand/ Contact All links. Remove if desired-->
<div style="margin-bottom: 5px"><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>

<table id="contains">
<td><div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />What is JavaScript?</div>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

<td><div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc2')" />Difference betwen Java & JavaScript?</div>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.

<td><table border="0" cellspacing="0" cellpadding="0">
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc3')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc3" class="switchcontent">DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.</td></tr>