Avatar of splanton
splanton
Flag for United Kingdom of Great Britain and Northern Ireland asked on

CSS/Javascript menu. Want to get elements left of parent.

I hae a web site that I am designing a menu system for. I am utalising a CSS/Javascript/HTML menu that I have used on many occasions.

The menu is horizontal and uses nested unordered lists to drive it.

Included is a complete test page (work in progress and strictly a test set!)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.menumain {
	background-color: #156ab9;
	float: left;
	width: 984px;
	margin: 10px 0px 0px 0px;
}
ul.menu {list-style:none; margin:0; padding:0;
}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#fff; text-decoration:none}
ul.menu li {position:relative; float:left;}
ul.menu ul {clear:both; position:absolute; top:35px;  left:0px; background:#156ab9;display:none; opacity:0; list-style:none; width:540px;}
ul.menu ul li {position:relative; width:280px; margin:20px 10px 20px 10px;}
ul.menu ul li a {display:block; padding:5px 7px 5px 10px; background-color: #eeeeee;color: #FFFFFF;}
ul.menu ul li a:hover {background-color: #125ca0;}
ul.menu .menulink {padding:10px 5px 10px 10px; font-weight:bold; font-size: 14px;}
ul.menu .menulink:hover, ul.menu .menuhover {background-color: #125ca0;color: #FFFFFF;}


</style>
<script type="text/javascript">
var menu=function(){
	var t=5,z=50,s=10,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();		</script>

</head>
	<div class="menumain">
		<ul class="menu" id="menu">
			<li><a href="#" class="menulink">Home</a>
				<ul>
					<li><a href="#" class="topline">Commercial Waste</a></li>
					<li><a href="#">Contract Waste</a></li>
				</ul>
			</li>
			<li><a href="#" class="menulink">Profile</a>
				<ul>
					<li><a href="#" class="topline">Commercial Waste</a></li>
					<li><a href="#">Contract Waste</a></li>
				</ul>
			</li>
			<li><a href="#" class="menulink">Tournaments</a>
				<ul>
					<div style="width: 100px;height:100px;float:left;background-color: #ff0000;margin: 20px 10px 10px 10px;">here we go again</div>
					<div style="width: 100px;height:100px;float:right;background-color: #ff0000;margin: 20px 10px 10px 10px;">here we go again</div>
					<li><a href="#" class="topline">Commercial Waste</a></li>
					<li><a href="#">Contract Waste</a></li>
				</ul>
			</li>
			<li><a href="#" class="menulink">Tuition</a>
				<ul>
					<div style="width: 100px;height:100px;float:left;background-color: #ff0000;margin: 20px 10px 10px 10px;">here we go again</div>
					<div style="width: 100px;height:100px;float:right;background-color: #ff0000;margin: 20px 10px 10px 10px;">here we go again</div>
					<li><a href="#" class="topline">Commercial Waste</a></li>
					<li><a href="#">Contract Waste</a></li>
				</ul>
			</li>
			<li><a href="#" class="menulink">Sponsors</a></li>
			<li><a href="#" class="menulink">Contact</a></li>
		</ul>
		<script type="text/javascript">
			var menu=new menu.dd("menu");
			menu.init("menu","menuhover");
		</script>
	</div>

<Div style="float:left; width:500px;height:1000px;background-color: #125ca0;"

<body>
</body>
</html>

Open in new window


What I would like to achieve is to have the 'popup' menus appear left justified to the 'mainmenu' <div> rather than relative to their immediate <li> parent.
CSSJavaScriptHTML

Avatar of undefined
Last Comment
COBOLdinosaur

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck