Closed Thread Icon

Topic awaiting preservation: cool menu Pages that link to <a href="https://ozoneasylum.com/backlink?for=8335" title="Pages that link to Topic awaiting preservation: cool menu" rel="nofollow" >Topic awaiting preservation: cool menu\

 
Author Thread
emaker
Nervous Wreck (II) Inmate

From: china
Insane since: Oct 2002

posted posted 10-06-2002 12:21
code:
<HTML>
<HEAD>
<TITLE>emaker.126.com</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
.alpha {
FILTER: Alpha(Opacity=80)
}
.td1 {
FONT-SIZE: 10px; font-family: "tahoma"}
.td2 {
FONT-SIZE: 10px; CURSOR: hand; BACKGROUND-COLOR: #CFE7FF
; font-family: "tahoma"}
.maskl {
OVERFLOW: hidden
}
.cardtitle {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 10px; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid
; font-family: "tahoma"}
.cardbottom {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #99ccff
}
</STYLE>
<SCRIPT language=Jscript>
//ÓÃÊý×éÀ´´æ´¢¶à¸ötimeOut±êʶ.
tBack=new Array(6);
tOut=new Array(6);
//¼¤»îµ±Ç°Ñ¡Ï.
function menuOut(whichMenu){
var curMenu=eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex=6;
clearTimeout(tBack[whichMenu]);
moveOut(whichMenu);
}
//»Ö¸´³õʼ״̬.
function menuBack(whichMenu){
var curMenu=eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;
clearTimeout(tOut[whichMenu]);
moveBack(whichMenu);
}
//Òƶ¯µ±Ç°Ñ¡Ï
function moveOut(curNum){
var curMenu=eval("menu"+curNum);
if(curMenu.style.posLeft>0) {
curMenu.style.posLeft-=2;
tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1);
}
}
//ÒÆ»ØÑ¡Ï.
function moveBack(curNum){
var curMenu=eval("menu"+curNum);
if(curMenu.style.posLeft<30) {
curMenu.style.posLeft+=2;
tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);
}

}
//Êó±êÒƹýʱ¸Ä±ä±í¸ñµ¥ÔªÊ½Ñù¡£
function swapClass(){
var o=event.srcElement;
if(o.className=="td1") o.className="td2"
else if(o.className=="td2") o.className="td1";
}
document.onmouseover=swapClass;
document.onmouseout=swapClass;
</SCRIPT>
</HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<DIV class=maskl id=menuPos
style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 236px">
<DIV id=menu1 onmouseover=menuOut(1)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px"
onmouseout=menuBack(1)>
<DIV class=cardbottom id=Layer1
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" width=100% align=center border=0 cellpadding="0" cellspacing="0">
<TR>
<TD class=td1 align="center">option1</TD></TR>
<TR>
<TD class=td1 align="center">option2</TD></TR>
<TR>
<TD class=td1 align="center">option3</TD></TR>
<TR>
<TD class=td1 align="center">option4</TD></TR>
<TR>
<TD>&nbsp;</TD></TR>
</TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TR>
<TD width=14 height=18><IMG height=18 src="stang.gif"
width=14></TD>
<TD class=cardtitle width=86 bgColor=#99ccff
height=14>MENUCARD1</TD></TR>
</TABLE></DIV>
<DIV id=menu2 onmouseover=menuOut(2)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 20px; HEIGHT: 20px"
onmouseout=menuBack(2)>
<DIV class=cardbottom id=Layer2
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" width=100% align=center border=0 cellpadding="0" cellspacing="0">
<TR>
<TD class=td1 align="center">option1</TD></TR>
<TR>
<TD class=td1 align="center">option2</TD></TR>
<TR>
<TD class=td1 align="center">option3</TD></TR>
<TR>
<TD class=td1 align="center">option4</TD></TR>
<TR>
<TD>&nbsp;</TD></TR>
</TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TR>
<TD width=14 height=18><IMG height=18 src="stang.gif"
width=14></TD>
<TD class=cardtitle width=86 bgColor=#99ccff
height=14>MENUCARD2</TD></TR>
</TABLE></DIV>
<DIV id=menu3 onmouseover=menuOut(3)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px"
onmouseout=menuBack(3)>
<DIV class=cardbottom id=Layer3
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" width=100% align=center border=0 cellpadding="0" cellspacing="0">
<TR>
<TD class=td1 align="center">option1</TD></TR>
<TR>
<TD class=td1 align="center">option2</TD></TR>
<TR>
<TD class=td1 align="center">option3</TD></TR>
<TR>
<TD class=td1 align="center">option4</TD></TR>
<TR>
<TD>&nbsp;</TD></TR>
</TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TR>
<TD width=14 height=18><IMG height=18 src="stang.gif"
width=14></TD>
<TD class=cardtitle width=86 bgColor=#99ccff
height=14>MENUCARD3</TD></TR>
</TABLE></DIV>
<DIV id=menu4 onmouseover=menuOut(4)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px"
onmouseout=menuBack(4)>
<DIV class=cardbottom id=Layer4
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" width=100% align=center border=0 cellpadding="0" cellspacing="0">
<TR>
<TD class=td1 align="center">option1</TD></TR>
<TR>
<TD class=td1 align="center">option2</TD></TR>
<TR>
<TD class=td1 align="center">option3</TD></TR>
<TR>
<TD class=td1 align="center">option4</TD></TR>
<TR>
<TD>&nbsp;</TD></TR>
</TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TR>
<TD width=14 height=18><IMG height=18 src="stang.gif"
width=14></TD>
<TD class=cardtitle width=86 bgColor=#99ccff
height=14>MENUCARD4</TD></TR>
</TABLE></DIV>
<DIV id=menu5 onmouseover=menuOut(5)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px"
onmouseout=menuBack(5)>
<DIV class=cardbottom id=Layer5
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" width=100% align=center border=0 cellpadding="0" cellspacing="0">
<TR>
<TD class=td1 align="center">option1</TD></TR>
<TR>
<TD class=td1 align="center">option2</TD></TR>
<TR>
<TD class=td1 align="center">option3</TD></TR>
<TR>
<TD class=td1 align="center">option4</TD></TR>
<TR>
<TD>&nbsp;</TD></TR>
</TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TR>
<TD width=14 height=18><IMG height=18 src="stang.gif"
width=14></TD>
<TD class=cardtitle width=86 bgColor=#99ccff
height=14>MENUCARD5</TD></TR>
</TABLE></DIV>
<DIV id=menu6 onmouseover=menuOut(6)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 100px; HEIGHT: 134px"
onmouseout=menuBack(6)>
<DIV class=cardbottom id=Layer6
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" width=100% align=center border=0 cellpadding="0" cellspacing="0">
<TR>
<TD class=td1 align="center">option1</TD></TR>
<TR>
<TD class=td1 align="center">option2</TD></TR>
<TR>
<TD class=td1 align="center">option3</TD></TR>
<TR>
<TD class=td1 align="center">option4</TD></TR>
<TR>
<TD>&nbsp;</TD></TR>
</TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TR>
<TD width=14 height=18><IMG height=18 src="stang.gif"
width=14></TD>
<TD class=cardtitle width=86 bgColor=#99ccff
height=14>MENUCARD6</TD></TR>
</TABLE></DIV></DIV>
</BODY>
</HTML>



Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 10-06-2002 18:12

And the point of this post would be?

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

posted posted 10-06-2002 18:14

*slaps drac*. its a cool menu! dont you get it?

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 10-06-2002 18:17

Looks a little orange to me.

Maybe I need another slap'n

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 10-06-2002 19:31

what does stang.gif look like?

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 10-07-2002 18:11

Okay, I played around with this a little, and cleaned up some of the mangled javascript & style info. I still would like to see what you're using for stang.gif.....

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>::: Pugzly Tweaked This Code! :::</title>
<style type="text/css">
body {
color: #000000;
background-color: #ffffff;
margin: 0px;
}
.alpha {
filter: alpha(opacity=80);
}
.td1 {
font: 10px tahoma;
text-align: center;
text-decoration: none;
color: #000000;
}
.td2 {
font: 10px tahoma;
cursor: hand;
background-color: #cfe7ff;
text-align: center;
}
.maskl {
overflow: hidden;
}
.cardtitle {
border: 1px solid #000000;
border-left: 0px;
border-bottom: 0px;
font: 10px tahoma;
cursor: default;
text-indent: 4pt;
width: 86px;
heigh: 14px;
background-color: #99ccff;
}
.cardbottom {
border: 1px solid #000000;
border-top: 0px;
filter: alpha(opacity=90);
background-color: #99ccff;
z-index: 1;
left: 0px;
width: 100px;
position: absolute;
top: 17px;
height: 115px;
}
</style>
<script type="text/javascript" language="javascript">
tBack = new Array(6);
tOut = new Array(6);

function menuOut(whichMenu){
var curMenu = eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex = 6;
clearTimeout(tBack[whichMenu]);
moveOut(whichMenu);
}

function menuBack(whichMenu){
var curMenu = eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;
clearTimeout(tOut[whichMenu]);
moveBack(whichMenu);
}

function moveOut(curNum){
var curMenu = eval("menu"+curNum);
if(curMenu.style.posLeft>0) {
curMenu.style.posLeft-=2;
tOut[curNum] = setTimeout("moveOut('"+curNum+"')",1);
}
}

function moveBack(curNum){
var curMenu = eval("menu"+curNum);
if(curMenu.style.posLeft<30) {
curMenu.style.posLeft+=2;
tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);
}
}

function swapClass(){
var o = event.srcElement;
if(o.className == "td1"){
o.className = "td2"
}else if(o.className == "td2"){
o.className = "td1";
}
}
function jump(url){
location = "http://" + url;
}
document.onmouseover = swapClass;
document.onmouseout = swapClass;
</script>
</head>

<body>
<div class="maskl" id="menupos" style="z-index: 1; left: 12px; width: 132px; position: absolute; top: 14px; height: 236px">

<div id="menu1" onmouseover="menuOut(1);" style="z-index: 1; left: 30px; width: 130px; position: absolute; top: 0px; height: 20px" onmouseout="menuBack(1);">
<div class="cardbottom" id="layer1">
<table height="100%" width="100"% align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="td1" onclick="jump('www.ozoneasylum.com');">Asylum</td></tr>
<tr><td class="td1" onclick="jump('www.gurusnetwork.com');">Gurus</td></tr>
<tr><td class="td1" onclick="jump('www.runningwolf.com');">RunningWolf</td></tr>
<tr><td class="td1" onclick="jump('www.macombsheriff.com');">Sheriff</td></tr>
</table>
</div>

<table cellspacing="0" cellpadding="0" width="102" border="0">
<tr>
<td width="14" height="18"><img src="stang.gif" width="14" height="18" border="0" alt="" /></td>
<td class="cardtitle">menucard1</td>
</tr>
</table>
</div>

<div id="menu2" onmouseover="menuOut(2);" style="z-index: 1; left: 30px; width: 130px; position: absolute; top: 20px; height: 20px" onmouseout="menuBack(2);">
<div class="cardbottom" id="layer2">
<table height="100%" width="100"% align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="td1" onclick="jump('faq.ozoneasylum.com/');" style="cursor: help;">Ozone FAQ</td></tr>
<tr><td class="td1" onclick="jump('www.yahoo.com');">Yahoo</td></tr>
<tr><td class="td1" onclick="jump('www.google.com');">Google</td></tr>
<tr><td class="td1" onclick="jump('www.msn.com');">MSN</td></tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" width="102" border="0">
<tr>
<td width="14" height="18"><img src="stang.gif" width="14" height="18" border="0" alt="" /></td>
<td class="cardtitle">menucard2</td>
</tr>
</table>
</div>

<div id="menu3" onmouseover="menuOut(3);" style="z-index: 1; left: 30px; width: 130px; position: absolute; top: 40px; height: 20px" onmouseout="menuBack(3);">
<div class="cardbottom" id="layer3">
<table height="100%" width="100"% align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="td1" onclick="jump('www.msnbc.com');">MSNBC</td></tr>
<tr><td class="td1" onclick="jump('www.cnn.com');">CNN</td></tr>
<tr><td class="td1" onclick="jump('www.foxnews.com');">Fox News</td></tr>
<tr><td class="td1" onclick="jump('www.techtv.com');">TechTV</td></tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" width="102" border="0">
<tr>
<td width="14" height="18"><img src="stang.gif" width="14" height="18" border="0" alt="" /></td>
<td class="cardtitle">menucard3</td>
</tr>
</table>
</div>

<div id="menu4" onmouseover="menuOut(4);" style="z-index: 1; left: 30px; width: 130px; position: absolute; top: 60px; height: 20px" onmouseout="menuBack(4);">
<div class="cardbottom" id="layer4">
<table height="100%" width="100"% align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="td1" onclick="jump('www.gosschiro.com');">Goss Chiropractic</td></tr>
<tr><td class="td1" onclick="jump('www.metropolitanuniform.com');">Metro Uniform</td></tr>
<tr><td class="td1" onclick="jump('');">option3</td></tr>
<tr><td class="td1" onclick="jump('');">option4</td></tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" width="102" border="0">
<tr>
<td width="14" height="18"><img src="stang.gif" width="14" height="18" border="0" alt="" /></td>
<td class="cardtitle">menucard4</td>
</tr>
</table>
</div>

<div id="menu5" onmouseover="menuOut(5);" style="z-index: 1; left: 30px; width: 130px; position: absolute; top: 80px; height: 134px" onmouseout="menuBack(5);">
<div class="cardbottom" id="layer5">
<table height="100%" width="100"% align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="td1" onclick="jump('');">option1</td></tr>
<tr><td class="td1" onclick="jump('');">option2</td></tr>
<tr><td class="td1" onclick="jump('');">option3</td></tr>
<tr><td class="td1" onclick="jump('');">option4</td></tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" width="102" border="0">
<tr>
<td width="14" height="18"><img src="stang.gif" width="14" height="18" border="0" alt="" /></td>
<td class="cardtitle">menucard5</td>
</tr>
</table>
</div>

<div id="menu6" onmouseover="menuOut(6);" style="z-index: 1; left: 30px; width: 130px; position: absolute; top: 100px; height: 134px" onmouseout="menuBack(6);">
<div class="cardbottom" id="layer6">
<table height="100%" width="100"% align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="td1" onclick="jump('');">option1</td></tr>
<tr><td class="td1" onclick="jump('');">option2</td></tr>
<tr><td class="td1" onclick="jump('');">option3</td></tr>
<tr><td class="td1" onclick="jump('');">option4</td></tr>
</table>
</div>
<table cellspacing="0" cellpadding="0" width="102" border="0">
<tr>
<td width="14" height="18"><img src="stang.gif" width="14" height="18" border="0" alt="" /></td>
<td class="cardtitle">menucard6</td>
</tr>
</table>
</div>

</div>
</body>
</html>



Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 10-07-2002 19:34

it's a cool concept, code-wise... but the look and funtionality of such a nav system might get a little annoying..


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

« BackwardsOnwards »

Show Forum Drop Down Menu