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 -->

[waccoon]

The only thing I can think of is to increase the size of your div.

[largosama]

hmmm use a visibility toggler and then absolute position 2 divs to give and illusion of a menu i guess

[TheKnell]

Hrrrmm...I tried increasing the size of the submenu, but it just moved the whole thing to the left. What do you the size of the div? I'm not seeing how that would help. It's not that the submenu is too wider or anything. I need to change the script, but I have no clue how to javascript works. Lol.

hmmm use a visibility toggler and then absolute position 2 divs to give and illusion of a menu i guess

^^??? Very lost on that. Sorry.

[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>

[TheKnell]

Oh, I get it! I gotta go, but I'm gonna try that!

[largosama]

heh good luck don't get frustrated

[TheKnell]

It worked! It was really easy, too. I never knew that code existed. Heh. I like it a lot. :D

[souldreamers]

It worked! It was really easy, too. I never knew that code existed. Heh. I like it a lot. :D

- Topic Closed -