Forums > Collapsible Nav

Full Version: Collapsible Nav - Horizontal

Forums > Resource Center > Support Center > Xanga Support > Xanga Resolved Topics

TheKnell

Mar 9 2005, 06:45 PM

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

Mar 9 2005, 06:50 PM

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

largosama

Mar 9 2005, 06:55 PM

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

TheKnell

Mar 9 2005, 06:58 PM

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

Mar 9 2005, 07:19 PM

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

Mar 9 2005, 07:28 PM

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

largosama

Mar 9 2005, 11:38 PM

heh good luck don't get frustrated

TheKnell

Mar 10 2005, 01:42 PM

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

souldreamers

Mar 10 2005, 04:07 PM

QUOTE(TheKnell @ Mar 10 2005, 1:42 PM)

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

- Topic Closed -

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.