Thank you so much. This script now works fine in all browsers and it now provides a simple submenu capability. I added some code to center the text in each menu choice. I also added some code to align both the middle of the main menu and the submenus in the same place so that they overlap each other. Here is my final code:
Code:
<style type="text/css">
#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}
#popitmenu a{
text-decoration: none;
text-align: center;
padding-left: 6px;
color: black;
display: block;
}
#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}
</style>
<script type="text/javascript">
/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var defaultMenuWidth="150px" //set default menu width.
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
linkset[0]='<a href="http://dynamicdrive.com">Dynamic Drive</a>'
linkset[0]+='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
linkset[0]+='<a href="#" onClick="showmenu(event,linkset[2], \'180px\', \'sub\'); return false" style="position:relative">Coding Forums</a>'
linkset[0]+='<a href="#" onClick="showmenu(event,linkset[3], \'180px\', \'sub\'); return false" style="position:relative">CSS Drive</a>'
linkset[0]+='<a href="http://freewarejava.com">Freewarejava</a>'
linkset[1]='<a href="http://msnbc.com">MSNBC</a>'
linkset[1]+='<a href="http://cnn.com">CNN</a>'
linkset[1]+='<a href="http://news.bbc.co.uk">BBC News</a>'
linkset[1]+='<a href="http://www.washingtonpost.com">Washington Post</a>'
linkset[2]='<a href="http://msnbc.com">FORUM #1</a>'
linkset[2]+='<a href="http://cnn.com">FORUM #2</a>'
linkset[2]+='<a href="http://news.bbc.co.uk">FORUM #3</a>'
linkset[2]+='<a href="http://www.washingtonpost.com">FORUM #4</a>'
linkset[3]='<a href="http://www.cssdrive.com">CSS DRIVE #1</a>'
linkset[3]+='<a href="http://www.cssdrive.com">CSS DRIVE #2</a>'
linkset[3]+='<a href="http://www.cssdrive.com">CSS DRIVE #3</a>'
linkset[3]+='<a href="http://www.cssdrive.com">CSS DRIVE #4</a>'
////No need to edit beyond here
var ie5=document.all && !window.opera
var ns6=document.getElementById
if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}
function showmenu(e, which, optWidth, subMenu){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobjwidthmiddle=menuobj.contentwidth / 2
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
// if this is a submenu request use previous menu horizontal and vertical positions
if(subMenu=="sub"){
menuobj.style.left=saveleft-menuobjwidthmiddle+"px"
menuobj.style.top=savetop+"px"
}
else
{
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the menu
if (rightedge<menuobj.contentwidth){
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
//save the desired horizontal position for the submenu coming next
saveleft=ie5? iecompattest().scrollLeft+eventX : window.pageXOffset+eventX
}else{
//position the horizontal position of the middle of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobjwidthmiddle+"px" : window.pageXOffset+eventX-menuobjwidthmiddle+"px"
//save the desired horizontal position for the submenu coming next
saveleft=ie5? iecompattest().scrollLeft+eventX : window.pageXOffset+eventX
}
//if the vertical distance isn't enough to accomodate the height of the menu
if (bottomedge<menuobj.contentheight){
//move the vertical position of the menu to the top by it's height
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
//save the desired vertical position for the submenu coming next
savetop=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
}else{
//move the vertical position of the menu to where the mouse was clicked
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
//save the desired vertical position for the submenu coming next
savetop=ie5? iecompattest().scrollTop+event.clientY : window.pageYOffset+eventY
}
}
menuobj.style.visibility="visible"
return false
}
function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}
function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}
function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
//if (ie5||ns6)
//document.onclick=hidemenu
</script>
</script>
<body>
<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a><br>
<a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">News sites</a>
Pop-It Menu Submenu Capability
Reply With Quote
Bookmarks