Below is another simple script to create dropdown menus from a set of tables
using ids as links to submenus.
Just copy the page below and try it out or visit the first link on
my website
http://hgsweb.de with some other
examples.
This example has been testet to work with
- Chrome 19.x.x.
- FF12
- IE9
- Opera 11.64
- Safari 5.1.2
Have fun !
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" title="text/css">
/********************************************/
/** horizontal navigation list ************/
/********************************************/
.outerHorlist{
margin:0;
margin-left:10px;
padding:0;
background:#000066;
width:100%;
}
.outerHorlist td{
margin:0;
padding:0;
}
.horlist{
margin:0;
margin-left:10px;
padding:0;
/*width:100%;*/
background:#000066;
border-left: 1px solid white;
}
.horlist td {
color:white;
font-weight:bold;
border-right: 1px solid white;
padding:0;
padding-left:10px;
padding-right:10px;
}
.horlist a {
color:white;
text-decoration:none;
border:0;
font-weight:bold;
}
.horlist a:hover {
text-decoration:underline;
color:#EF980D;
}
.submen{
border:1px solid black;
margin:0;
padding:0;
display:none;
background:#D0CFCF;
box-shadow: 4px 4px 4px #aaaaaa;
border-radius: 4px;
}
.submen td{
border-bottom:1px solid #aaaaaa;
}
.submen td img{
margin-left:10px;
}
.submen a {
color:black;
text-decoration:none;
border:0;
font-weight:bold;
}
.submen a:hover {
text-shadow: gray 3px 3px 2px;
}
</style>
<script type="text/javascript">
var HGS_MENU={
/*************************************************************************
HGS_MENU 1.0 Copyright (c) 2012 Heinrich Schweitzer
Contact me at hgs@hgsweb.de
This copyright notice MUST stay intact for use.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
***************************************************************************/
lastmen:[],
timer:'',
topLevel:'',
init:function(top){
///////////////
var topLevel=top;
HGS_MENU.topLevel=top;
function show(t,id){
var obj=t;
var x=0,y=0;
document.getElementById(id).onmouseout='';
document.getElementById(id).onmouseover=function(){clearTimeout(HGS_MENU.timer)};
HGS_MENU.hide();
x=obj.offsetLeft;
y=obj.clientHeight;
clearTimeout(HGS_MENU.timer);
while(obj.tagName.toUpperCase()!=='BODY'){
obj=obj.parentNode;
x+=obj.offsetLeft;
y+=obj.offsetTop;
}
document.getElementById(id).style.display='block';
document.getElementById(id).style.position='absolute';
document.getElementById(id).style.left=x+'px'
document.getElementById(id).style.top=y+'px';
HGS_MENU.lastmen[HGS_MENU.lastmen.length]=id;
document.getElementById(id).onmouseout=settimer;
}
function settimer(){
////////////////
HGS_MENU.timer=setTimeout("HGS_MENU.hide();",500);
}
function subm_show(t,id){
/////////////////////
var obj=t;
var ih,x,y=0;
clearTimeout(HGS_MENU.timer);
document.getElementById(id).onmouseout='';
document.getElementById(id).onmouseover=function(){clearTimeout(HGS_MENU.timer)};
ih=t.innerHTML;
t.innerHTML=ih+''; //forces recalculation of layout ??
x=obj.offsetLeft+obj.offsetWidth;
while(obj.tagName.toUpperCase()!=='BODY'){
obj=obj.parentNode;
x+=obj.offsetLeft;
y+=obj.offsetTop;
}
document.getElementById(id).style.display='block';
document.getElementById(id).style.position='absolute';
document.getElementById(id).style.left=x+'px'
document.getElementById(id).style.top=y+'px';
HGS_MENU.lastmen[HGS_MENU.lastmen.length]=id;
document.getElementById(id).onmouseout=settimer;
}
function walk_menu(id){
///////////////////
var men,targetId;
var rows,cells,nr,nc,ir,ic;
men=document.getElementById(id);
if(men===null){
alert('Missing menu with id '+id);
return;
}
rows=men.rows;
nr=rows.length;
for(ir=0;ir<nr;ir++){
cells=rows[ir].cells;
nc=cells.length;
for(ic=0;ic<nc;ic++){
if(cells[ic].id==='' ){
if(id === topLevel){
cells[ic].onmouseover=HGS_MENU.hide;
}
} else {
targetId=document.getElementById(cells[ic].id.split('p_')[1]);
if(targetId!==null){
if(id === topLevel){
cells[ic].onmouseover=function(){
show(this,this.id.split('p_')[1])
};
} else {
cells[ic].onmouseover=function(){
subm_show(this,this.id.split('p_')[1])
};
}
}
walk_menu(cells[ic].id.split('p_')[1]);
}
}
}
}
HGS_MENU.addEvent(window,'load',function(){walk_menu(HGS_MENU.topLevel);})
},
hide:function(){
////////////
var i,t=HGS_MENU.lastmen;
clearTimeout(HGS_MENU.timer);
for(i=0;i<t.length;i++){
document.getElementById(t[i]).style.display='none';
document.getElementById(t[i]).onmouseout='';
}
},
addEvent: function(obj, ev, fu) {
/////////////////////////////
if (obj.addEventListener){
obj.addEventListener(ev, fu, false);
} else {
var eev="on" + ev;
obj.attachEvent(eev, fu);
}
}
}
HGS_MENU.init('topLevel'); // start with topLevel menue
</script>
</head>
<body>
<!-******************************************************************************
if ids within TD element start with 'p_' they are interpreted as a pointer to
the submenu (table) with an id that follows the leading 'p_'.
The javascript function walk_menu(id) is responsible for setting the onmouseover
event handlers on the TD elements with such ids, in order to show the submenu.
******************************************************************************-->
<table class="outerHorlist"> <tr><td>
<table id="topLevel" class="horlist">
<tr>
<td id="p_sub1">File</td>
<td id="p_sub2">Edit</td>
<td id='p_sub1sub1sub1' >Options</td>
<td id="p_sub3">Help</td>
</tr>
</table>
</td></tr>
</table>
<table id="sub1" class="submen">
<tr><td><A HREF=#>New..</A><BR></TD></TR>
<tr><td>Open..</TD></TR>
<tr><td id='p_sub1sub1' ><span style="float:left">Other </span><span style="float:right"><img src="navi-orange.gif"></span></TD></TR>
</table>
<table id="sub2" class="submen">
<tr><td><A HREF="newhtml.html?day=1">Insert..</A><BR></TD></TR>
<tr><td>Cut</TD></TR>
<tr><td>Past</TD></TR>
</table>
<table id="sub3" class="submen">
<tr><td><A HREF="newhtml.html?day=1">Index..</A><BR></TD></TR>
<tr><td>Website</TD></TR>
<tr><td>PDF</TD></TR>
</table>
<table id="sub1sub1" class="submen">
<tr><td><A HREF=#>Save As..</A></TD></TR>
<tr><td>Licence</TD></TR>
<tr><td>Registrations2</TD></TR>
<tr><td id='p_sub1sub1sub1' ><span style="float:left">BDE</span><span style="float:right"><img src="navi-orange.gif"></span></TD></TR>
<tr><td>Paperhandling</TD></TR>
</table>
<table id="sub1sub1sub1" class="submen">
<tr><td><A HREF=#>Close</A></TD></TR>
<tr><td>Change..</TD></TR>
<tr><td>Paperhandling</TD></TR>
</table>
<h2>Everything you need is in the source of this page<br>
move mouse over the above menu
</body>
</html>
Before you post, read our: 
