Closed Thread Icon

Topic awaiting preservation: cool menu (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=8335" title="Pages that link to Topic awaiting preservation: cool menu (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: cool menu <span class="small">(Page 1 of 1)</span>\
 
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

« Backwards — Onwards »

Show Forum Drop Down Menu