Results 1 to 2 of 2

Thread: Switch Menu II -- Horizontal instead of Vertical Layout

  1. #1
    Join Date
    Jan 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Switch Menu II -- Horizontal instead of Vertical Layout

    Switch Menu II IE
    http://www.dynamicdrive.com/dynamici...witchmenu2.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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    With these additions/changes to the demo style (in red):

    Code:
    <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":

    HTML Code:
    <!--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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •