I am redesigning my website and have setup a DHTML menu. you can view the basic page at development.ourfamilygenealogy.com
This Menu have the main anchor and one drop down menu, I would like to be able to modify the code so that it can containt an additional submenu that opens to the right, so When you click on For instance "Surnames (A-G) it will open a menu that lists A, B, Etc.... when you hove over or click on A it opens a menu to the right thta displays all the A surnames.
Below of the code from my website and above is the website url itself. Anyhelp would be appreciated.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}
</style>
<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://jan.ourfamilygenealogy.com">Jans Family History</a>'
menu1[1]='<a href="http://king.ourfamilygenealogy.org">King Family History</a>'
//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="../Surnames/alquire.htm">Alquire</a>'
menu2[1]='<a href="../Surnames/baker.htm">Baker</a>'
menu2[2]='<a href="../Surnames/baranowski.htm">Baranowski</a>'
//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="../Surnames/king.htm">King</a>'
menu3[1]='<a href="../Surnames/iversen.htm">Iversen</a>'
//Contents for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="../Surnames/king.htm">King</a>'
menu4[1]='<a href="../Surnames/iversen.htm">Iversen</a>'
//Contents for menu 5, and so on
var menu5=new Array()
menu5[0]='<a href="../Surnames/king.htm">King</a>'
menu5[1]='<a href="../Surnames/iversen.htm">Iversen</a>'
//Contents for menu 6, and so on
var menu6=new Array()
menu6[0]='<a href="../Surnames/king.htm">King</a>'
menu6[1]='<a href="../Surnames/iversen.htm">Iversen</a>'
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-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().clientWidth-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().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="keywords" content="Genealogy Family Tree Surnames King Family History Moore Family History Iversen Family History Genealogy Research">
<meta name="description" content="Ourfamilygenealogy.com is dedicated to linking family trees of family's all over the world. We presently have information on over 180 different surnames. Two families are hosting their public genealogy information at Our Family Genealogy">
<title>Our Family Genealogy - Family Tree and Genealogy Research of over 180 different surnames.</title>
</head>
<body>
<div align="center">
<p><img src="images/00000001.png" width="613" height="86"></p>
<p><a href="default.htm" ="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Home</a>
| <a href="default2.htm" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Surnames
(A - G)</a> | <a href="default3.htm" onMouseover="dropdownmenu (this, event, menu3, '200px')" onMouseOut="delayhidemeny()">Surnames
(H - M)</a> | <a href="default4.htm" onMouseover="dropdownmenu (this, event, menu4, '200px')" onMouseOut="delayhidemeny()">Surnames
(N - T)</a> | <a href="default5.htm" onMouseover="dropdownmenu (this, event, menu5, '200px')" onMouseOut="delayhidemeny()">Surnames
(U - Z)</a> | <a href="default6.htm" onMouseover="dropdownmenu (this, event, menu6, '200px')" onMouseOut="delayhidemeny()">Links
</a>
<p>*</div>
</body>
</html>
23-Sep-2005, 19:28
Python ebook by crystalattice
Similar Threads
