Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: DropDown Menu

  1. #1
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DropDown Menu

    This is how I am creating drop down menus:
    Code:
    <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

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    I may take a major re-write because of the following options in the script:
    Code:
    <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'


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •