to prepare a navigation bar!!

L

liunx

Guest
hi all!<br />
i have to prepare a navigation bar for my application..<br />
but it is too long n needs a lot of scrolling down.<br />
so i thought of putting a "+"along a title n the user need to click the "+" to view the view thw sub titles...<br />
the problem is i dont know how to do it..<br />
i know i need javascript for this..<br />
i am very new to javascript..<br />
pls help me.<br />
thanks in advance.<br />
ravi.<!--content-->Here is the code I used (courtesy of webmonkey) - indcluding the image switch script i used for the open/closed folders.<br />
<br />
hope that helps. there is probably another script out there also...<br />
<br />
-- Lisa<br />
<br />
<br />
<!-- DHTML NAVIGATION SYSTEM --><br />
<SCRIPT language=Javascript><br />
<!-- Hide script from old browsers<br />
document.WM = new Object();<br />
document.WM.hirelist = new Object();<br />
document.WM.hirelist.expandos = new Array();<br />
document.WM.hirelist.heights = new Array();<br />
document.WM.hirelist.names = new Array();<br />
<br />
function WM_toggle(id) {<br />
if (document.all){<br />
if(document.all[id].style.display == 'none'){<br />
document.all[id].style.display = '';<br />
} else {<br />
document.all[id].style.display = 'none';<br />
}<br />
} else if (document.getElementById){<br />
if(document.getElementById(id).style.display == 'none'){<br />
document.getElementById(id).style.display = 'block';<br />
} else {<br />
document.getElementById(id).style.display = 'none';<br />
}<br />
} else if(document.layers) {<br />
if(parseInt(id + 1)){<br />
ditem = id + 1;<br />
} else {<br />
ditem = document.WM.hirelist.names[id];<br />
}<br />
if(document.WM.hirelist.expandos[ditem].clip.bottom == 0) {<br />
document.WM.hirelist.expandos[ditem].clip.bottom = document.WM.hirelist.heights[ditem];<br />
} else {<br />
document.WM.hirelist.expandos[ditem].clip.bottom = 0;<br />
}<br />
WM_align();<br />
}<br />
}<br />
<br />
function WM_align() {<br />
var i,j,stupid_netscape_array_infinate_loop_error;<br />
stupid_netscape_array_infinate_loop_error = document.WM.hirelist.expandos.length;<br />
for(i=0; i<stupid_netscape_array_infinate_loop_error; i++) {<br />
j = i + 1;<br />
if(document.WM.hirelist.expandos[j]){<br />
if(document.layers) {<br />
document.WM.hirelist.expandos[j].top = document.WM.hirelist.expandos.top + document.WM.hirelist.expandos.clip.bottom;<br />
}<br />
}<br />
}<br />
}<br />
<br />
function WM_initialize_toolbar(){<br />
if(document.layers) {<br />
for(i=0; i<document.layers['container'].document.layers.length; i++){<br />
document.WM.hirelist.expandos = document.layers['container'].document.layers;<br />
document.WM.hirelist.names[document.layers['container'].document.layers.name] = i;<br />
document.WM.hirelist.heights = document.WM.hirelist.expandos.clip.bottom;<br />
}<br />
for (p=0;p<document.WM.hirelist.expandos.length;p=p+2){<br />
WM_toggle(p);<br />
}<br />
document.layers['container'].visibility = 'visible';<br />
} else if (document.all){<br />
for(i = 0; i < document.all('container').all.length; i++){<br />
document.all('container').all.style.position = 'relative';<br />
if(document.all('container').all.className == 'menu'){<br />
document.all('container').all.style.display = 'none';<br />
}<br />
}<br />
document.all('container').style.visibility = 'visible';<br />
} else if (document.getElementsByTagName && document.getElementById){<br />
var contained = document.getElementById('container').getElementsByTagName('div');<br />
for(i = 0; i < contained.length; i++){<br />
contained.style.position = 'relative';<br />
if(contained.getAttribute('class') == 'menu'){<br />
contained.style.display = 'none';<br />
}<br />
}<br />
document.getElementById('container').style.visibility = 'visible';<br />
}<br />
}<br />
// End the hiding --><br />
</script><br />
<!-- /DHTML NAVIGATION SYSTEM --><br />
<br />
<br />
<!-- IMAGE TOGGLY THINGY --><br />
<script language=JavaScript><br />
<!--<br />
function WM_imageToggle(daImage, src1, src2, netscape_container)<br />
{<br />
var objStr,obj;<br />
// Check to make sure that images are supported in the DOM.<br />
myImage = document.images[daImage];<br />
if(document.layers)<br />
{<br />
myImage = document.layers['container'].document.layers[netscape_container].document.images[daImage];<br />
}<br />
if(document.images)<br />
{<br />
// Check to see whether you are using a name, number, or object<br />
if (myImage.src.length > src1.length)<br />
{<br />
strLong = myImage.src.toUpperCase();<br />
strShort = src1.toUpperCase();<br />
}<br />
else<br />
{<br />
strLong = src1.toUpperCase();<br />
strShort = myImage.src.toUpperCase(); <br />
}<br />
if(strShort == strLong.substr(strLong.length - strShort.length))<br />
{<br />
myImage.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/src2;">http://www.htmlforums.com/archive/index.php/src2;</a><!-- m --><br />
} <br />
else <br />
{<br />
myImage.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/src1;">http://www.htmlforums.com/archive/index.php/src1;</a><!-- m --><br />
}<br />
}<br />
}<br />
// --><br />
</script><br />
<!-- /IMAGE TOGGLY THINGY --><!--content-->Try these scripts - <br />
<br />
<!-- m --><a class="postlink" href="http://dynamicdrive.com/dynamicindex1/navigate2.htm">http://dynamicdrive.com/dynamicindex1/navigate2.htm</a><!-- m --><br />
<br />
<!-- m --><a class="postlink" href="http://dynamicdrive.com/dynamicindex1/navigate1.htm">http://dynamicdrive.com/dynamicindex1/navigate1.htm</a><!-- m --><!--content-->
 
You must log in or register to reply here.
Back
Top