Javascript Menu

[EXreaction]

Hey guys, I am working on the templates for my new(once I get my credit card so I can order hosting) site.

The menu I would like to setup is something like the menu at newegg.com where you slide over an option and some more options come up(I dont know the exact name of it, which is why I am having trouble figuring it out(google can't search without a name )

Any links or examples of it?

[RicheemxX]

here's what i use sorry its kind of long
<script type="text/javascript">



//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.spoofee.com/">Spoofee Deals</a>'
menu1[1]='<A HREF="http://www.fatwallet.com/">FatWallet.Com </A>'
menu1[2]='<A HREF="http://www.slickdeals.net/">SlickDeals.net</A>'
menu1[3]='<A HREF="http://www.techbargains.com/index.cfm">Techbargains.com</A>'
menu1[4]='<A HREF="http://resellerratings.com/">ResellerRatings</A>'



//Contents for menu 2
var menu2=new Array()
menu2[0]='<A HREF="http://www.techimo.com/forum/index.html">TechImo</a>'
menu2[1]='<A HREF="http://hardforum.com/index.php?">[H]ardForums</a>'
menu2[2]='<A HREF="http://www.amdzone.com/">AmdZone</a>'
menu2[3]='<A HREF="http://forums.anandtech.com/login.cfm">AnandTech</a>'
menu2[4]='<A HREF="http://www.aoaforums.com/forum/">AoAforums</a>'
menu2[5]='<A HREF="http://www.ocworkbench.com/index.stm">OcWorkbench</a>'




var menuwidth='165px'
var menubgcolor='black'
var disappeardelay=250
var hidemenu_onclick="yes"



var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';backg round-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

[RicheemxX]

here's a decent site with info http://www.alistapart.com/articles/horizdropdowns

[EXreaction]

Hmm, that link looks like it has just the stuff I need.

[RicheemxX]

yeah the one i use is pretty basic drop down menu however you can get more complex horizontal<i think thats what they are called> menus like what newegg has

[EXreaction]

Quote:

Originally Posted by RicheemxX

yeah the one i use is pretty basic drop down menu however you can get more complex horizontal<i think thats what they are called> menus like what newegg has

Ya, I am going to make images for it instead of words and have buttons slide down.

[EXreaction]

Hmm, I seem to have a problem with IE 6...IE doesn't have the drop downs when you hover over it.

I am using:

<ul> 
	<li><a><b>Other stuff</b></a> 
		<ul> 
			<li class="css_menu"><a href="viewtopic.php?f=4&t=12">Web Services</a></li> 
			<li class="css_menu"><a href="../phpbb2/index.php">phpBB2 Demo Forum</a></li> 
		</ul> 
	</li> 
</ul>

(I cut out a bunch that is the same thing except with different links)

And the CSS style:

/* CSS Menu
 ------------ */

.css_menu {
	background: #fff;
	border: 1px solid #ccc; /* IE6 Bug */
	}

.css_menu:hover {
	background: #ececec;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 0px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	top: 20px;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	border: 0px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}

* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
		
li:hover ul { display: block; }