Collapsible Nav - Horizontal, no clue Options

[TheKnell]

Okay, I'm using the collapsible module code for my navigation, but I want it to be displayed horizontally instead of vertically. I'm not good with javascript at all, so could someone help? :)

Xanga: http://www.xanga.com/home.aspx?user=TinksieBelle

Code:

<!-- begin code provided by createblog.com --><br /><script type="text/javascript"><br /><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')<br />}<br /><br />function SwitchMenu(obj){<br /> if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br />  if(el.style.display != "block"){ //DynamicDrive.com change<br />   for (var i=0; i<ar.length; i++){<br />    if (ar[i].className=="submenu") //DynamicDrive.com change<br />    ar[i].style.display = "none";<br />   }<br />   el.style.display = "block";<br />  }else{<br />   el.style.display = "none";<br />  }<br /> }<br />}<br /></script><br /><br /><div id="masterdiv" style="text-align:left;padding-left:20px;"><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub1')">Navigation >></div><br /> <span class="submenu" id="sub1"><br /><br />Xanga...Home...Design...In...Out...Subscribe <br /> <br /> </span><br /></div><br /><!-- end code provided by createblog.com -->

[largosama]

well you have your script that goes in website stats:

<!-- begin code provided by createblog.com --><br /><br /><script type="text/javascript" language="JavaScript"><!--<br />function toggle(object) {<br />  if (document.getElementById) {<br />    if (document.getElementById(object).style.visibility == 'visible')<br />      document.getElementById(object).style.visibility = 'hidden';<br />    else<br />      document.getElementById(object).style.visibility = 'visible';<br />  }<br /><br />  else if (document.layers && document.layers[object] != null) {<br />    if (document.layers[object].visibility == 'visible' ||<br />        document.layers[object].visibility == 'show' )<br />      document.layers[object].visibility = 'hidden';<br />    else<br />      document.layers[object].visibility = 'visible';<br />  }<br /><br />  else if (document.all) {<br />    if (document.all[object].style.visibility == 'visible')<br />      document.all[object].style.visibility = 'hidden';<br />    else<br />      document.all[object].style.visibility = 'visible';<br />  }<br /><br />  return false;<br />}<br /><br />function toggleBox(szDivID, iState) // 1 visible, 0 hidden<br />{<br />    if(document.layers)    //NN4+<br />    {<br />       document.layers[szDivID].visibility = iState ? "show" : "hide";<br />    }<br />    else if(document.getElementById)   //gecko(NN6) + IE 5+<br />    {<br />        var obj = document.getElementById(szDivID);<br />        obj.style.visibility = iState ? "visible" : "hidden";<br />    }<br />    else if(document.all) // IE 4<br />    {<br />        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";<br />    }<br />}<br /><br />//--></script><br /><!-- end code provided by createblog.com -->

Then you position a div

CODE

<div style="position:static;margin-left:###px; margin-top:###px; width:###px; height:###px; background:#fff;"><a href="#" onClick="toggle('Navigation')">Navigation>></a></div>

which will have the link to enable the second div, which will be invisible and next to the first, meaning the margin-left number will be greater

CODE

<div id="Navigation" style="position:static;margin-left:###px; margin-top:###px; width:###px; height:###px; background:#fff; visibility:hidden;">NAVIGATION LINKS</div>