PDA

View Full Version : drop down menu

janifour
10-15-2006, 12:41 AM
I'm not sure if you would call it a drop down menu but here I go. I want it so that when someone clicks the link 2 more links will appear under it. Like this.
Link
> Link1
> Link2
Ges
10-15-2006, 08:56 AM
Hi JANIFOUR.
Hope this will help. Just copy it complete and test it. You can see where to add/subtract things/links etc that you don't want. Let me know if this is OK or not. I can soon change it to whatever you need.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Sub Mneu</title>
</head>

<body>

<style>
<!--
DIV.clTop{position:absolute; width:270}
DIV.clSub{position:absolute; left:10; width:270}
#divCont{position:relative; left:0; top:0; height:400; width:270;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">


/*
Change this if you want all the submenus to get unfold: 0 = hide last one; 1 = show all
*/
var stayFolded=0

/*
Browsercheck
*/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

/*
Making cross-browser objects
*/
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+ob j+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('docum ent');
this.height=n?this.ref.height:eval(obj+'.offsetHei ght')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/*
Initiating the page. Just add to the arrays here to get more menuitems
and add divs in the page
*/
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')

oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')

for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/*
This is the function that changes the sub menus to folded or unfolded state.
*/

function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num) oSub[i].hideIt()
}
for(i=1;i<oTop.length;i++){
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;

</script>

</HEAD>
<BODY bgcolor="white">

<div id="divCont">
<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain">Link 1</a><br>
<div id="divSub1" class="clSub">
<a href="thispage.html" class="clSubb" alt="thing">- Click here to go to link 1 - 1</a><br>
<a href="thatpage.html" class="clSubb">- Click here to go to link 1 - 2</a><br>
<a href="hispage.html" class="clSubb">- Click here to go to link 1 - 3</a><br>
<a href="herpage.html" class="clSubb">- Click here to go to link 1 - 4</a><br>
</div><br>
</div>
<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">Link 2</a><br>
<div id="divSub2" class="clSub">
<a href="anotherpage.html" class="clSubb">- Click here to go to link 2 - 1</a><br>
<a href="whereeveryouwanttogopage.html" class="clSubb">- Click here to go to link 2 - 2</a><br>
<a href="whereeveryouwanttogopage2.html" class="clSubb">- Add as many as you like</a><br>

</div><br>
</div>
</div>

</body>
</html>



Regards,
Ges.
janifour
10-15-2006, 04:32 PM
I have divlays and tables in my website, will it effect it in any way?
Ges
10-15-2006, 05:37 PM
Hi Janifour.
It will have an impact on div layers but not tables. This can be managed in the style section. I've just received your post and I will sort a version out for you this evening ( I'm in England UK and the time here is 6.35pm ). I will make sure that it will not use style at all.
OK?
Sorry for the delay.
Regards,
Ges.
janifour
10-16-2006, 02:14 AM
Thanks a lot Ges, I appreciate how you take the time to help me :)
Ges
10-16-2006, 11:57 AM
Hi Janifour, sorry for the delay.
I've simplified the code and although it still uses 'divs' they will not affect anything as they are now totally self contained and can be put anywhere on a page. To demonstrate this I have provided you with 2 versions. The first one does exactly as you want. The second one does the same but is inside a table that is in the center of the page ( so it can be anywhere really).
I AM SENDING IN 2 POSTS COS THE FORUM IS'NT BIG ENOUGH.

1st one without table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Janifour Menu</title>
</head>

<body>

<script language="JavaScript">
/*
Change this if you want all the submenus to 0 = hide last one; 1 = show all
*/
var stayFolded=0

/*
Browsercheck
*/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

/*
Making cross-browser objects
*/
function makeMenu(obj,nest)
{
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+ob j+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('docum ent');
this.height=n?this.ref.height:eval(obj+'.offsetHei ght')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/*
Initiating the page. Just add to the arrays here to get more menuitems
and add divs in the page
*/
function init()
{
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')

oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')

for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/*
This is the function that changes the sub menus to folded or unfolded state.
*/

function menu(num)
{
if(browser)
{
if(!stayFolded)
{
for(i=0;i<oSub.length;i++)
{
if(i!=num) oSub[i].hideIt()
}
for(i=1;i<oTop.length;i++)
{
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
for(i=1;i<oTop.length;i++)
{
if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;
</script>
</head>

<body bgcolor="white">
<div id="divCont">
<div id="divTop1"><a href="#" onclick="menu(0); return false">Link 1</a><br>
<div id="divSub1">
<a href="thispage.html" alt="thing">- Click here to go to link 1 - 1</a><br>
<a href="thatpage.html">- Click here to go to link 1 - 2</a><br>

</div>
</div>
<div id="divTop2"><a href="#" onclick="menu(1); return false">Link 2</a><br>
<div id="divSub2">
<a href="anotherpage.html">- Click here to go to link 2 - 1</a><br>
<a href="whereeveryouwanttogopage.html">- Click here to go to link 2 - 2</a><br>
</div>
</div>
</div>
</body>
</html>
Ges
10-16-2006, 12:03 PM
And here is the code within a table.

2nd code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Janifour Table Menu</title>
</head>

<script language="JavaScript">
/*
Change this if you want all the submenus to get unfold: 0 = hide last one; 1 = show all
*/
var stayFolded=0

/*
Browsercheck
*/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

/*
Making cross-browser objects
*/
function makeMenu(obj,nest)
{
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+ob j+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('docum ent');
this.height=n?this.ref.height:eval(obj+'.offsetHei ght')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/*
Initiating the page. Just add to the arrays here to get more menuitems
and add divs in the page
*/
function init()
{
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')

oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')

for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/*
This is the function that changes the sub menus to folded or unfolded state.
*/

function menu(num)
{
if(browser)
{
if(!stayFolded)
{
for(i=0;i<oSub.length;i++)
{
if(i!=num) oSub[i].hideIt()
}
for(i=1;i<oTop.length;i++)
{
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
for(i=1;i<oTop.length;i++)
{
if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;

</script>

</head>
<body bgcolor="white">
<table align="center" border="0">
<tr>
<td>
<div id="divCont">
<div id="divTop1"><a href="#" onclick="menu(0); return false">Link 1</a><br>
<div id="divSub1">
<a href="thispage.html" alt="thing">- Click here to go to link 1 - 1</a><br>
<a href="thatpage.html">- Click here to go to link 1 - 2</a><br>
</div>
</div>
<div id="divTop2"><a href="#" onclick="menu(1); return false">Link 2</a><br>
<div id="divSub2">
<a href="anotherpage.html">- Click here to go to link 2 - 1</a><br>
<a href="whereeveryouwanttogopage.html">- Click here to go to link 2 - 2</a><br>
</div>
</div>
</div>
</td>
</tr>
</table>

</body>
</html>



The 'divs' will only apply to whatever encapsulates them.

Hope this is ok and let me know if you have any problems.

Regards,
Ges
janifour
10-17-2006, 12:51 AM
It worked! But hmm... how do you do the "+" "-" one? do you know what I mean?
Ges
10-17-2006, 01:12 AM
Hi Janifour,
Not sure what you mean. Please tell me exactly and I'll take a look.
Thanks,
Ges.