PDA

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



voxbox13
01-21-2006, 06:10 AM
Switch Menu II IE
http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

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!

jscheuer1
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 */
cursor:hand;
cursor:pointer;
float: right;
margin-top: 2px;
margin-right: 3px;
}

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

.switchcontent{
width: 250px;
border: 1px solid black;
border-top-width: 0;
}

#contains td {
vertical-align:top;
}

</style>

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">
<tr>
<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.
</div></td>

<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.
</div></td>

<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>
</table></td>
</tr>
</table>