Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Menu code advice

Status
Not open for further replies.

Joax

Technical User
Apr 29, 2003
8
GB
Can anybody please help me with a JavaScript coding matter, I have a sliding menu which works well and links to the required websites and web pages on my site, the menu is set-up as menus and sub menus, you click on the menu and the sub menu appears from there you can select what you want from the sub menu.



For example you can click on the help menu, and a sub menu appears with web help appears where you can click on to select a web page concerning downloading flash viewers..etc



However, I’m trying to change the code because some of the menus only have one sub-menu, for example I only require one page for the help section, so what I want to do is not have sub menus for some of the menus, I would appreciate any advice on this matter.



I would appreciate any advice on this matter.



Regards,

Sam





THE EXISTING MENU CODE IS AS FOLLOWS: (the ‘0’ are the main menu headings, and the ‘1’ are the sub menus)



//Link[nr] = "position [0 is item/1 is item],Link name,url,target (blank|top|frame_name)"

var Link = new Array();

Link[0] = "0|Help";

Link[1] = "1|Web Site Help|html/webhelp.htm|mainFrame";

Link[2] = "0|About Us";

Link[3] = "1|hello|html/hello.htm|mainFrame";

startup(0);



THE SCRIPT IS AS FOLLOWS:







var height = 20; // height of the menu headers

var iheight = 15; // height of the menu_items



var bgc = "lightyellow" // background color of the item

var tc = "black" // text color of the item



var over_bgc = "silver";

var over_tc = "red";



var speed = 0;

var timerID = "";

var N = (document.all) ? 0 : 1;

var width = 152







var self_menu = new Array();

function write_menu()

{

smc = 0; // count the position of the self_menu

document.write(&quot;<div style='position:absolute'>&quot;);

mn = 0;

mni = 1;

start = -1;



for(i=0;i<Link.length;i++)

{

la = Link.split(&quot;|&quot;);



if (la[0] == &quot;0&quot;)

{

if(start == 0)

{

document.write(&quot;</div>&quot;);

h = csmc * iheight;

tmn = mn; //-h

self_menu[smc] = new Array(tmn,h,0,-2);

smc++;

mn--;

}

csmc = 0;

document.write(&quot;<div class='menu' style='top:&quot;+mn+&quot;;height:&quot;+height+&quot;' id='down&quot;+smc+&quot;' onclick='pull_down(&quot;+smc+&quot;,&quot;+mni+&quot;)'>&nbsp;&quot;+ la[1] + &quot;</div>&quot;);

self_menu[smc] = new Array(mn,height,0,mni);

smc++;

mni++;

mn+=height;

start = 1;

}

else

{

if(start == 1)

{

if(N)mn+=2;

document.write(&quot;<div class='item_panel' id='down&quot;+smc+&quot;' style='top:&quot;+mn+&quot;'>&quot;);

start = 0;

}



document.write(&quot;<a href='&quot;+la[2]+&quot;'&quot;);

if (la[3] != &quot;&quot;) document.write(&quot; target='&quot; + la[3] + &quot;' &quot;);

document.write(&quot;><div class='item' id='d&quot;+i+&quot;' style='height:&quot;+iheight);

if (N) document.write(&quot;;width:150&quot;);

document.write(&quot;' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>&nbsp;&nbsp;&quot;+ la[1] + &quot;</div></a>&quot;);

csmc++;

}

}

if (start == 0)

{

document.write(&quot;</div>&quot;);

h = csmc * iheight;

tmn = mn + 5; //-h

self_menu[smc] = new Array(tmn,h,0);

name = &quot;down&quot; + (self_menu.length-1);

obj = document.getElementById(name);

obj.style.borderBottomColor = &quot;darkblue&quot;;



obj.style.borderBottomWidth = 1;

obj.style.borderBottomStyle = &quot;solid&quot;;

}

document.write(&quot;</div>&quot;);

}





function color(obj)

{

document.getElementById(obj).style.backgroundColor = over_bgc;

document.getElementById(obj).style.color = over_tc

}



function uncolor(obj)

{

document.getElementById(obj).style.backgroundColor = bgc;

document.getElementById(obj).style.color = tc

}



function pull_down(nr,c)

{

if (timerID == &quot;&quot;)

{

to = self_menu[nr+1][1]

begin = nr + 2;

if (timerID != &quot;&quot;) clearTimeout(timerID);

if (self_menu[nr+1][2] == 0)

{

self_menu[nr+1][2] = 1;

if(nr == self_menu.length-2) {to++;}

epull_down(begin,to,0);

}

else

{

to = 0;

self_menu[nr+1][2] = 0;

name = &quot;down&quot;+(nr+2);

open_item = 0;

for(i=0;i<nr;i++)

{

if(self_menu[2] == 1)

{open_item += self_menu[1];

}

}

if (N == false) {open_item-= (c*1)};

if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}

else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);

epull_up(begin,to,val);

}

}

}



function epull_down(nr,to,nowv)

{

name = &quot;down&quot; + (nr-1);

obj = document.getElementById(name).style.clip = &quot;rect(0,&quot;+width+&quot;,&quot;+(nowv+1)+&quot;,0)&quot;;

for (i=nr;i<self_menu.length;i++)

{

name = &quot;down&quot; + i;

obj = document.getElementById(name);

obj.style.top = parseInt(obj.style.top)+1;

}

nowv++;

if(nowv < to) timerID = setTimeout(&quot;epull_down(&quot;+nr+&quot;,&quot;+to+&quot;,&quot;+nowv+&quot;)&quot;,speed);

else timerID = &quot;&quot;;

}



function epull_up(nr,to,nowv)

{

name = &quot;down&quot; + (nr-1);

obj = document.getElementById(name).style.clip = &quot;rect(0,&quot;+width+&quot;,&quot;+nowv+&quot;,0)&quot;;

for (i=nr;i<self_menu.length;i++)

{

name = &quot;down&quot; + i;

obj = document.getElementById(name);

obj.style.top = parseInt(obj.style.top)-1;

}

nowv--;

if(nowv > to) timerID = setTimeout(&quot;epull_up(&quot;+nr+&quot;,&quot;+to+&quot;,&quot;+nowv+&quot;)&quot;,speed);

else timerID = &quot;&quot;;

}



function startup(nr)

{

write_menu();

if (nr != 0)

{

for(i=0;i<self_menu.length;i++)

{

if(self_menu[3] == nr) pull_down(i,nr)

i==self_menu.length;

}

}

}

 
Where did you get the code from? Most of these scripts come with a how-to on things like showing/not showing sub menus.
 
dwarfthrower,

Thanks getting back, is the coding below of any use?

Best wishes,

Joanne

THIS IS THE HTML CODE

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>Welcome</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<!--[if !mso]>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
</style>
<![endif]-->
<style>.menu {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11px; BORDER-LEFT: black 1px solid; WIDTH: 150px; CURSOR: hand; BORDER-BOTTOM: darkblue 1px solid; FONT-FAMILY: verdana; POSITION: absolute; BACKGROUND-COLOR: lightblue}
.item_panel {
BORDER-RIGHT: darkblue 1px solid;
BORDER-LEFT: darkblue 1px solid;
WIDTH: 136px;
CLIP: rect(0px 150px 0px 0px);
POSITION: absolute;
background-color: #99FF66;
}
.item_panel A {
CURSOR: hand; COLOR: black; TEXT-DECORATION: none
}
.item {
FONT-SIZE: 10px;
WIDTH: 148px;
FONT-FAMILY: verdana;
BACKGROUND-COLOR: white;
}
</style>
<script language=JavaScript src=&quot;scripts/sliding_menu.js&quot;></script>
<left>
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext=&quot;edit&quot; spidmax=&quot;1027&quot;/>
</xml><![endif]-->
<link href=&quot;assets/text.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>
</head>

<body>

<table width=&quot;125&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<!--DWLayoutTable-->
<tr>
<td height=&quot;83&quot; colspan=&quot;2&quot; valign=&quot;top&quot;> <div align=&quot;center&quot;></div></td>
</tr>
<tr>
<td width=&quot;136&quot; height=&quot;230&quot; valign=&quot;top&quot;>
<![if !vml]>
<![endif]>
<p>
<script language=JavaScript>

//Link[nr] = &quot;position [0 is item/1 is item],Link name,url,target (blank|top|frame_name)&quot;
var Link = new Array();
Link[0] = &quot;0|Help&quot;;
Link[1] = &quot;1|Web Site Help|html/webhelp.htm|mainFrame&quot;;
Link[2] =&quot;0|About Us&quot;;
Link[3] = &quot;1|Hello|html/hello.htm|mainFrame&quot;;
Link[4] = &quot;0|Our Services&quot;;
Link[5] = &quot;1|Contact us|html/contact.htm|mainFrame&quot;;
startup(0);



</script>
</p></td>
</tr>
<tr>
<td height=&quot;95&quot; valign=&quot;bottom&quot;> <div align=&quot;center&quot;></div></td>
</tr>
<tr>
<td height=&quot;19&quot;> <div align=&quot;center&quot;></div></td>
</tr>

</table>
</SCRIPT>
</CENTER>
</body>
</html>



THIS IS THE FILELIST CODE

<xml xmlns:eek:=&quot;urn:schemas-microsoft-com:eek:ffice:eek:ffice&quot;>
<o:MainFile HRef=&quot;../index.htm&quot;/>
<o:File HRef=&quot;image001.gif&quot;/>
<o:File HRef=&quot;image002.gif&quot;/>
<o:File HRef=&quot;image003.gif&quot;/>
<o:File HRef=&quot;filelist.xml&quot;/>
</xml>

THIS IS THE SLIDING MENU CODE




var height = 20; // height of the menu headers
var iheight = 15; // height of the menu_items

var bgc = &quot;lightyellow&quot; // background color of the item
var tc = &quot;black&quot; // text color of the item

var over_bgc = &quot;silver&quot;;
var over_tc = &quot;red&quot;;

var speed = 0;
var timerID = &quot;&quot;;
var N = (document.all) ? 0 : 1;
var width = 152



var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu
document.write(&quot;<div style='position:absolute'>&quot;);
mn = 0;
mni = 1;
start = -1;

for(i=0;i<Link.length;i++)
{
la = Link.split(&quot;|&quot;);

if (la[0] == &quot;0&quot;)
{
if(start == 0)
{
document.write(&quot;</div>&quot;);
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write(&quot;<div class='menu' style='top:&quot;+mn+&quot;;height:&quot;+height+&quot;' id='down&quot;+smc+&quot;' onclick='pull_down(&quot;+smc+&quot;,&quot;+mni+&quot;)'>&nbsp;&quot;+ la[1] + &quot;</div>&quot;);
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write(&quot;<div class='item_panel' id='down&quot;+smc+&quot;' style='top:&quot;+mn+&quot;'>&quot;);
start = 0;
}

document.write(&quot;<a href='&quot;+la[2]+&quot;'&quot;);
if (la[3] != &quot;&quot;) document.write(&quot; target='&quot; + la[3] + &quot;' &quot;);
document.write(&quot;><div class='item' id='d&quot;+i+&quot;' style='height:&quot;+iheight);
if (N) document.write(&quot;;width:150&quot;);
document.write(&quot;' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>&nbsp;&nbsp;&quot;+ la[1] + &quot;</div></a>&quot;);
csmc++;
}
}
if (start == 0)
{
document.write(&quot;</div>&quot;);
h = csmc * iheight;
tmn = mn + 5; //-h
self_menu[smc] = new Array(tmn,h,0);
name = &quot;down&quot; + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = &quot;darkblue&quot;;

obj.style.borderBottomWidth = 1;
obj.style.borderBottomStyle = &quot;solid&quot;;
}
document.write(&quot;</div>&quot;);
}


function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
if (timerID == &quot;&quot;)
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != &quot;&quot;) clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2) {to++;}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = &quot;down&quot;+(nr+2);
open_item = 0;
for(i=0;i<nr;i++)
{
if(self_menu[2] == 1)
{open_item += self_menu[1];
}
}
if (N == false) {open_item-= (c*1)};
if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv)
{
name = &quot;down&quot; + (nr-1);
obj = document.getElementById(name).style.clip = &quot;rect(0,&quot;+width+&quot;,&quot;+(nowv+1)+&quot;,0)&quot;;
for (i=nr;i<self_menu.length;i++)
{
name = &quot;down&quot; + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout(&quot;epull_down(&quot;+nr+&quot;,&quot;+to+&quot;,&quot;+nowv+&quot;)&quot;,speed);
else timerID = &quot;&quot;;
}

function epull_up(nr,to,nowv)
{
name = &quot;down&quot; + (nr-1);
obj = document.getElementById(name).style.clip = &quot;rect(0,&quot;+width+&quot;,&quot;+nowv+&quot;,0)&quot;;
for (i=nr;i<self_menu.length;i++)
{
name = &quot;down&quot; + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout(&quot;epull_up(&quot;+nr+&quot;,&quot;+to+&quot;,&quot;+nowv+&quot;)&quot;,speed);
else timerID = &quot;&quot;;
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
if(self_menu[3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top