Topic: dropdowns a little funny looking
i found a little script that i managed to mod just a bit and got a cool dropdown effect for my site. the only problem is that they dont seem to work as well when i stick them in the template for my boards.
i think its possibly that the script tags dont work in a .tpl file. is there some type of obvios problem that im missing here?
you can peep what im talking about at http://www.fatalthugs.com/forum/index.php
thanks guys.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="{pun_content_direction}">
<head>
<script language="JavaScript1.2">
//Drop down menu link- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and 100's more DHTML scripts, visit http://www.dynamicdrive.com
//Credit MUST stay intact for use
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=/clan_members.php><font size=0 face=verdana color=FFFFFF> ../clan members</font></a><br>'
menu1[1]='<a href=/clan_members.php><font size=0 face=verdana color=FFFFFF> ../clan history</font></a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=test.htm><font size=0 face=verdana color=FFFFFF> ../fatal articles</font></a><br>'
menu2[1]='<a href=test.htm><font size=0 face=verdana color=FFFFFF> ../gap attack</font></a><br>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href=test.htm>Menu link here</a><br>'
menu3[1]='<a href=test.htm>Menu link here</a><br>'
menu3[2]='<a href=test.htm>Menu link here</a><br>'
</script>
<meta http-equiv="Content-Type" content="text/html; charset={pun_char_encoding}">
{pun_head}
</head>
<body{pun_body}>
<script language="JavaScript1.2">
//reusable/////////////////////////////
//Drop down menu by http://www.dynamicdrive.com
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}
function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}
if (ie4||ns6)
document.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!--start my site-->
<br>
<center>
<!-- Main Table -->
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#808080" width="670"><tr><td colspan="2">
<!-- Header -->
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#808080" width="100%">
<tr>
<td height="90" bgcolor="#354463"><div align="center"><img src="/f8l_banner.gif" height="75" width="95%"></div></td>
</tr>
</table>
</td></tr></table>
<!-- End Header -->
</td></tr>
<tr><td>
<!-- Menu -->
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table cellspacing="1" cellpadding="2" border="0" bgcolor="#354463" width="100%">
<tr>
<td bgcolor="#354463" class="small" width="150"> NAVIGATION >> </td>
</tr>
</table>
</td></tr></table>
</td>
<td>
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="520"><tr><td>
<table cellspacing="1" cellpadding="2" border="0" bgcolor="#354463" width="520">
<tr>
<td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/default3.php"><font color="#e9f2fc">/ROOT</font></a></td>
<td width="70" bgcolor="#5F7797" class="small" align="left" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'">
<!----------Menu 1 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')"><font color="#FFFFFF" face=Verdana> /MEMBS</font></a>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->
</td>
<td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/forum/index.php"><font color="#e9f2fc">/FORUM</font></a></td>
<td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/clan_pics/index.php"><font color="#e9f2fc">/PICS</font></a></td>
<td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/Links.php"><font color="#e9f2fc">/LINKS</font></a></td>
<td width="60" bgcolor="#5F7797" class="small" align="left" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'">
<!----------Menu 2 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')"><font color="#FFFFFF" face=Verdana> /INFO</font></a>
</span>
</div>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->
</td>
<td bgcolor="#5F7797" class="small" align="center" onMouseOver="this.style.backgroundColor='#354463';" onMouseOut="this.style.backgroundColor='#5F7797'"><a href="/vids_game.php"><font color="#e9f2fc">/VIDS</font></a></td>
</tr>
</table>
</td></tr></table>
<!-- End Menu -->
</td></tr>
<tr><td colspan="2">
<!-- Main Field -->
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" cellpadding="0" cellspacing="10" width="100%" bgcolor="#dcdcdc">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="100%" align="right">
<p>
<font size="2"><a href="/member_tools.php"><font color=707770>SITE TOOLS</font></a> // <a href="/forum/login.php?action=out"><font color=707770>LOGOUT</font></a></font>
</p>
</td></tr>
</table>
<table width=100% height=100%>
<tr>
<td align=left>
<!--end my site-->
<table class="punmain" cellspacing="1" cellpadding="4">
<tr class="punhead">
<td class="punhead">
<span class="punheadline">{pun_title}</span><br>
{pun_desc}
</td>
</tr>
<tr>
<td class="puncon1">
{pun_navlinks}<br><br>
{pun_status}
</td>
</tr>
</table>
{pun_main}
<table class="punmain" cellspacing="1" cellpadding="4">
<tr>
<td class="puncon2">
<table class="punplain" cellspacing="0" cellpadding="0">
<tr>
<td class="puntop">
</td>
<td class="puntopright">
Powered by <a target="_blank" href="http://punbb.org/">PunBB</a><br>
Version: 1.0.1<br>
© Copyright 2002, 2003 Rickard Andersson
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--start my site-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End Mainfield -->
</td></tr>
<tr><td colspan="2" width="100%">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000" width="100%"><tr><td>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#354463" align="left" class="infohead" width="25%"><a href=bug_rpt.php><font color="FFFFFF">Report a bug / comment!</font></a></td>
<td bgcolor="#354463" align="right" class="infohead" width="75%">© copyright 2003 coded by: <a href=http://www.sporkit.com><font color=707770>www.sporkit.com</font></a></td></tr></table></td>
</tr>
</table>
</td></tr></table>
</table>
<!-- End Main Table -->
</center>
<br>
<!--end my site-->
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:5f7797;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:5f7797;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu
}
</script>
<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu
}
</script>
</body>
</html>