...

View Full Version : DropDown Menu



rn5a
06-27-2009, 02:22 PM
This is how I am creating drop down menus:


<html>
<head>
<style>
#divBg{
height:20px;
left:100px;
position:absolute;
top:0px;
visibility:hidden;
width=100%;
}

#divBgColor{
height:20px;
left:900px;
position:relative;
top:0px;
width:100%;
}

div.clSub{
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
left:2px;
padding-bottom:0px;
padding-left:4px;
padding-right:2px;
padding-top:4px;
position:absolute;
top:15px;
visibility:hidden;
width:100px;
layer-background-color:lime
}

div.clTop{
font-color:black;
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:bold;
left:10px;
position:absolute;
top:0px;
visibility:visible
}

#divTop0{
left:10%;
top:150px
}

#divTop1{
left:20%;
top:150px
}

#divTop2{
left:35%;
top:150px
}

#divTop3{
left:50%;
top:150px
}

#divTop4{
left:65%;
top:150px
}
</style>
<script language="javascript">
ie=document.all?1:0
n=document.layers?1:0
<!--//Do you want it to move with the page if the user scroll the page?-->
var moveOnScroll=true
numberOfMenus=5 <!--//How many menus do you have-->
<!--//Do you want to hide all the other submenus when you click a new?-->
var hideAll=true

function makeMenuBar(obj,nest,vis){
nest=(!nest)?'':'document.'+nest+'.'
this.css=(n)?eval(nest+'document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt;
this.showIt=b_showIt
if(ie && vis)
this.css.visibility='hidden'
this.evnt=(n)?eval(nest+'document.'+obj):eval(obj);
this.go=0
this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj=obj+"Object";
eval(this.obj+"=this")
}

<!--//Get's the top position.-->
function b_gettop(){
var gleft=(n)?eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
<!--//The functions for showing and hiding-->
function b_showIt(){
this.css.visibility="visible"
}

function b_hideIt(){
this.css.visibility="hidden"
}

function checkScrolled(){
if(!oMenu.go)
oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n)
setTimeout('checkScrolled()',30)
}

function menuBarInit(){
oSub=new Array()
oTop=new Array()
for(i=0;i<numberOfMenus;i++){
oTop[i]=new makeMenuBar('divTop'+i,'divBg')
oSub[i]=new makeMenuBar('divSub'+i,'divBg.document.divTop'+i,1)
oSub[i].evnt.onmouseout=evOut;
}
<!--//Moving menuBar-->
oMenu=new makeMenuBar('divBg')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.top=eval(scrolled)
oMenu.css.visibility='visible'
if(moveOnScroll)
ie?window.onscroll=checkScrolled:checkScrolled();
}

function evOut(){
if(ie)
this.style.visibility='hidden'
else if(n)
this.visibility='hidden'
}

<!--//CanceLling event bubbling in ie-->
function ieShow(num){
if(ie){
oSub[num].showIt()
window.event.cancelBubble=true
}
}

function extract(num){
if(hideAll){
for(i=0;i<oSub.length;i++){
if(num!=i) oSub[i].hideIt()
}
}
oSub[num].showIt();
}
onload=menuBarInit;
</script>
</head>
<body>
<div class=clTop id=divTop0>
<a href="../index.html#" onMouseOver=extract(0)>ASIA</a>
<div class=clSub id=divSub0>
<a href="../index.html#" onMouseOut=ieShow(0) onMouseOver=ieShow(0)>China</a><br>
<a href="../index.html#" onMouseOut=ieShow(0) onMouseOver=ieShow(0)>Japan</a><br>
<a href="../index.html#" onMouseOut=ieShow(0) onMouseOver=ieShow(0)>India</a><br>
<a href="../index.html#" onMouseOut=ieShow(0) onMouseOver=ieShow(0)>Nepal</a><br>
<a href="../index.html#" onMouseOut=ieShow(0) onMouseOver=ieShow(0)>Korea</a><br><br>
</div>
</div>

<div class=clTop id=divTop1>
<a href="../index.html#" onMouseOver=extract(1)>EUROPE</a>
<div class=clSub id=divSub1>
<a href="../index.html#" onMouseOut=ieShow(1) onMouseOver=ieShow(1)>France</a><br>
<a href="../index.html#" onMouseOut=ieShow(1) onMouseOver=ieShow(1)>Sweden</a><br>
<a href="../index.html#" onMouseOut=ieShow(1) onMouseOver=ieShow(1)>U.K.</a><br>
<a href="../index.html#" onMouseOut=ieShow(1) onMouseOver=ieShow(1)>Greece</a><br>
<a href="../index.html#" onMouseOut=ieShow(1) onMouseOver=ieShow(1)>Belgium</a><br><br>
</div>
</div>

<div class=clTop id=divTop2>
<a href="../index.html#" onMouseOver=extract(2)>AFRICA</a>
<div class=clSub id=divSub2>
<a href="../index.html#" onMouseOut=ieShow(2) onMouseOver=ieShow(2)>Zambia</a><br>
<a href="../index.html#" onMouseOut=ieShow(2) onMouseOver=ieShow(2)>Zimbabwe</a><br>
<a href="../index.html#" onMouseOut=ieShow(2) onMouseOver=ieShow(2)>South Africa</a><br>
<a href="../index.html#" onMouseOut=ieShow(2) onMouseOver=ieShow(2)>Algeria</a><br>
<a href="../index.html#" onMouseOut=ieShow(2) onMouseOver=ieShow(2)>Chad</a><br><br>
</div>
</div>

<div class=clTop id=divTop3>
<a href="../index.html#" onMouseOver=extract(3)>SOUTH AMERICA</a>
<div class=clSub id=divSub3>
<a href="../index.html#" onMouseOut=ieShow(3) onMouseOver=ieShow(3)>Brazil</a><br>
<a href="../index.html#" onMouseOut=ieShow(3) onMouseOver=ieShow(3)>Argentina</a><br>
<a href="../index.html#" onMouseOut=ieShow(3) onMouseOver=ieShow(3)>Peru</a><br>
<a href="../index.html#" onMouseOut=ieShow(3) onMouseOver=ieShow(3)>Chile</a><br>
<a href="../index.html#" onMouseOut=ieShow(3) onMouseOver=ieShow(3)>Bolivia</a><br><br>
</div>
</div>
</div>
</body>
</html>

As such the above works fine but I want to put all the links in a HTML table. I tried wrapping the links in <table>, <tr> & <td> tags but it is not working out. Can someone please help me put all the links in a HTML table?

Thanks

jmrker
06-27-2009, 02:39 PM
I may take a major re-write because of the following options in the script:


<script language="javascript">

ie=document.all?1:0
n=document.layers?1:0
<!--//Do you want it to move with the page if the user scroll the page?-->
var moveOnScroll=true
numberOfMenus=5 <!--//How many menus do you have-->
<!--//Do you want to hide all the other submenus when you click a new?-->
var hideAll=true
...

I don't think tables were meant to be scrolled anywhere...
and it is hard to control individual cells in a table in IE
and it appears to be browser specific with 'document.all' and 'document.layers'



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum