上一篇
下一篇
仿QQ导航菜单
作者:cmscn 日期:2007-05-20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>仿QQ导航菜单</title>
<style type="text/css">
.titleStyle{
background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#eeffee;color:blue;font-size:9pt;
}
a{
color:blue;
}
body{
font-size:9pt;
}
</style>
</head>
<body>
<script language="JavaScript">
<!--
var layerTop=20; //菜单顶边距
var layerLeft=30; //菜单左边距
var layerWidth=180; //菜单总宽
var titleHeight=26; //标题栏高度
var contentHeight=340; //内容区高度
var stepNo=10; //移动步数，数值越大移动越慢
var itemNo=0;runtimes=0;
document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #008800;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');
function addItem(itemTitle,itemContent){
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+
'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+
'<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr></table></div>';
document.write(itemHTML);
itemNo++;
}
//添加菜单标题和内容，可任意多项，注意格式：
addItem('欢迎','<BR> 欢迎光临设计在线！');
addItem('网页陶吧','<center><a href="#">网页工具</a> <BR><BR><a href="#">技术平台</a> <BR><BR><a href="#">设计理念</a> <BR><BR><a href="#">更多</a></center>');
addItem('美工教室','<center><a href="#">平面设计 </a> <BR><BR><a href="#">三维空间</a> <BR><BR><a href="#">设计基础</a> <BR><BR><a href="#">更多..</a></center>');
addItem('Flash','<center><a href="#">基础教程</a> <BR><BR><a href="#">技巧运用</a> <BR><BR><a href="#">实例剖析</a> <BR><BR><a href="#">更多..</a></center>');
document.write('</span>')
document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;
toItemIndex=itemNo-1;onItemIndex=itemNo-1;
function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
runtimes++;
if(runtimes>=stepNo){
onItemIndex=toItemIndex;
runtimes=0;}
else
setTimeout("changeItem(toItemIndex)",10);
}
function moveUp(){
for(i=onItemIndex+1;i<=toItemIndex;i++)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
}
function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
}
//-->
</script>
<BODY text=#000000 vLink=#996633 aLink=#ff9933 link=#003399 bgColor=#ffffff topMargin=0>
<script language=javascript>
<!--
var gbN2LibMonMigrated = true;
var N2Loaded = false;
var n2LMStart = new Date();
var gaN2CSSLibs = new Array();
var gaN2JSLibs = new Array();
var oTheDoc = document;
var oTheBody = oTheDoc.body;
var oTheHead = document.getElementsByTagName('head').item(0);
var n2sRTW1='onload';
var n2sRTWTBS='simplepopoverloaded';
function N2Initializer () {
this.aHandlers = new Array();
this.aEventsRun = new Array();
this.bCoreLoaded = false;
}
new N2Initializer ();
N2Initializer.prototype.runThisWhen = function (sWhen, fFn, sComment) {
if ( (typeof fFn != 'function') || fFn == null) return false;
sWhen = sWhen.toLowerCase();
if ( (sWhen =='inbody' && document.body) || this.aEventsRun[sWhen] ){
fFn();
} else {
this.aHandlers[this.aHandlers.length] = { sWhen: sWhen, fFn: fFn, sComment: sComment };
}
return true
}
N2Initializer.prototype.initializeThis = N2Initializer.prototype.runThisWhen
N2Initializer.prototype.loadThisWhen = function (sWhen, sURL, sID, sComment) {
sWhen = sWhen.toLowerCase();
goN2LibMon.monitorLoad (sID);
if ( sWhen =='now' ) {
n2LoadScript(sURL, true, sID);
} else {
this.aHandlers[this.aHandlers.length] = { sWhen: sWhen, sURL: sURL, sID: sID, sComment: sComment };
}
return true
}
N2Initializer.prototype.run = function (sWhen) {
sWhen = (typeof sWhen == 'undefined') ? null : sWhen;
sWhen = sWhen.toLowerCase();
this.aEventsRun[sWhen] = true;
if (sWhen == 'coreloaded') { this.bCoreLoaded=true; }
if (window.goN2Debug) goN2Debug.info("N2Initializer called with " + (sWhen ? "'"+sWhen+"'" : "null"));
var aH = this.aHandlers;
var len = aH.length;
for (var i=0;i<len;i++) {
var oTmp = aH[i];
if ((oTmp.bCalled != true) &&
(oTmp.fFn || oTmp.sURL) &&
( (sWhen == null) || (oTmp.sWhen && (oTmp.sWhen == sWhen)))
) {
if ((oTmp.sWhen == 'coreloaded') && !this.bCoreLoaded) continue;
if (window.goN2Debug) ;
if (oTmp.fFn) {
oTmp.fFn();
} else if (oTmp.sURL) {
n2LoadScript(oTmp.sURL, true, oTmp.sID);
}
oTmp.bCalled = true;
}
}
}
goN2Initializer = new N2Initializer();
function n2RunThisWhen (sWhen, fFn, sComment) {
goN2Initializer.runThisWhen(sWhen, fFn, sComment);
}
function n2LoadThisWhen (sWhen, sURL, sID, sComment) {
goN2Initializer.loadThisWhen(sWhen, sURL, sID, sComment);
}
function n2RunIfLoaded (sLibID, fFn, sComment) {
n2RunThisWhen(sLibID+'loaded', fFn, 'sequenced init of '+ sComment);
}
function n2LoadScript (sURL, bLocalCacheOK, sLibID) {
if (sLibID) { goN2LibMon.requestLoad (sLibID); }
var e = oTheDoc.createElement("script");
e.type="text/javascript";
if (bLocalCacheOK) {
e.src = sURL;
} else {
e.src = sURL + (sURL.indexOf('?') == -1 ? '?' : '&') + 'lt='+ new Date().getTime();
}
oTheHead.appendChild(e);
}
function N2LibraryMonitor() {
this.aLibs = {};
this.bJSLoaded=false;
this.bCSSLoaded=false;
this.sNotLoaded ='A desirable part of the page did not load. Please refresh the page to try again. \n';
this.nTimer=null;
this.nTimeoutMs = 10000;
}
new N2LibraryMonitor();
N2LibraryMonitorProto = N2LibraryMonitor.prototype;
N2LibraryMonitor.prototype.monitorLoad = function (sLibID) {
this.aLibs[sLibID] = { sID: sLibID, nDuration: -1 };
}
N2LibraryMonitor.prototype.requestLoad = function (sLibID, sFeatureID) {
var oTmp = this.aLibs[sLibID];
if (oTmp) { oTmp.nDuration= -2; }
this.resetTimer();
}
N2LibraryMonitor.prototype.beginLoad = function (sLibID, sFeatureID) {
var oTmp = this.aLibs[sLibID];
if (oTmp) {
oTmp.sFeature = sFeatureID;
oTmp.nBegin = new Date().getTime();
oTmp.nDuration= -3;
}
};
N2LibraryMonitor.prototype.endLoad = function (sLibID, nStatus) {
var oTmp = this.aLibs[sLibID];
if (oTmp) { oTmp.nDuration = new Date().getTime() - oTmp.nBegin; oTmp.bLoaded=true;}
var bALL;
if (bALL=this.allLibsLoaded()) {
this.clearTimer();
} else {
this.resetTimer();
}
goN2Initializer.run(sLibID+'loaded');
if (bALL) {
goN2Initializer.run('lastlibraryloaded');
}
}
N2LibraryMonitorProto.clearTimer=function() {
if (this.nTimer) {
clearTimeout(this.nTimer);
this.nTimer = null;
}
}
N2LibraryMonitorProto.resetTimer=function() {
if (this.nTimer) {
clearTimeout(this.nTimer); }
this.nTimer = setTimeout(n2LibraryLoadTimeout, this.nTimeoutMs);
}
function n2LibraryLoadTimeout() {
goN2Initializer.run('libraryloadfailed');
}
N2LibraryMonitor.prototype.allLibsLoaded = function () {
var bAllLoaded=true;
for (var key in this.aLibs) {
if (this.aLibs[key] && this.aLibs[key].nDuration <0) { bAllLoaded=false; }
}
this.bJSLoaded = bAllLoaded;
return bAllLoaded;
}
N2LibraryMonitor.prototype.confirmJSLoaded = function() { return this.bJSLoaded; }
N2LibraryMonitor.prototype.confirmCSSLoaded = function() { this.bCSSLoaded=true; }
N2LibraryMonitor.prototype.isJSLoaded = function() { return this.bJSLoaded; }
N2LibraryMonitor.prototype.isCSSLoaded = function() { return this.bCSSLoaded; }
N2LibraryMonitor.prototype.status = function() {
if (this.bJSLoaded) return "OK!";
else return this.sNotLoaded;
}
N2LibraryMonitor.prototype.stats = function() { return "N/A"; };
goN2LibMon = new N2LibraryMonitor();
var n2LLStop = new Date();
var n2LMStop = new Date();
function N2ConfigBase() {
this.getValue = function(id,d) {
if(typeof this[id] != 'undefined') { return this.id; }
else { return d; } } }
var goN2ConfigBase = new N2ConfigBase();
document.write('<link href="http://g-images.amazon.com/images/G/01/nav2/prod/n2CoreCSS/n2CoreCSS-n2v1-4580.css" type="text/css" rel="stylesheet">'+
'');
goN2LibMon.monitorLoad ("utilities");
goN2LibMon.monitorLoad ("events");
goN2LibMon.monitorLoad ("simplePopover");
document.write('<script language="javascript" src="http://g-images.amazon.com/images/G/01/nav2/prod/n2CoreLibs/n2CoreLibs-utilities-19637.js" type="text/javascript"></script><\/script>'+
'<script language="javascript" src="http://g-images.amazon.com/images/G/01/nav2/prod/n2CoreLibs/n2CoreLibs-events-63727.js" type="text/javascript"></script><\/script>'+
'<script language="javascript" src="http://g-images.amazon.com/images/G/01/nav2/prod/n2CoreLibs/n2CoreLibs-simplePopover-18851.js" type="text/javascript"></script><\/script>'+
'');
var goCust = new Object();
goCust.isLoggedIn=function() { return false; }
var goN2Explorer;
var gaTD;
var goN2AC;
n2RunThisWhen (n2sRTWTBS,
function() {
oAllCatPopover = new N2SimplePopover();
goN2Events.registerFeature('two-tabs', 'oAllCatPopover', 'n2MouseOverHotspot', 'n2MouseOutHotspot');
goN2Events.setFeatureDelays('two-tabs',200, 400, 200);
oAllCatPopover.initialize('AllCatPopoverDiv', 'oAllCatPopover',null,null,'below','c');
},
'All Categories popover');
n2RunThisWhen(n2sRTW1,
function() {
if (!window.gaTD) gaTD = new Array();
N2Loaded = goN2LibMon.isJSLoaded();
}, "Last Init"
);
//-->
</script>
<DIV style="DISPLAY: none">
<DIV id=all-categories>
<DIV style="width:300">
<TABLE cellSpacing=0 cellPadding=1 width="100%" align=center border=0>
<TR vAlign=top>
<TD class=popover-tiny>
<DIV class=indent>
<DIV class=list>
<DIV noWrap><A
href="#">菜单1</A></DIV>
<DIV noWrap><A
href="#">菜单2</A></DIV>
<DIV noWrap><A
href="#">菜单3</A></DIV>
<DIV noWrap><A
href="#">菜单4</A></DIV>
<DIV noWrap><A
href="#">菜单5</A></DIV>
<DIV noWrap></DIV>
</DIV></DIV></TD>
<TD class=popover-tiny>
<DIV class=indent>
<DIV class=list>
<DIV noWrap><A
href="#">菜单6</A></DIV>
<DIV noWrap><A
href="#">菜单7</A></DIV>
<DIV noWrap><A
href="#">菜单8</A></DIV>
<DIV noWrap><A
href="#">菜单9</A></DIV>
<DIV noWrap><A
href="#">菜单0</A></DIV>
<DIV noWrap></DIV>
</DIV></DIV></TD>
</TR>
</TABLE>
</DIV></DIV></DIV>
</TD>
</TR>
</TABLE>
<TD class=middleon>
<DIV align=center><A href="#" name=two-tabs|he|all-categories>显示菜单</A></DIV></TD>
</TR></table>
<br><br><br><br><br><br>
<style>
a
{
font-size: 8pt;
}
a:hover
{
position: relative;
top: 3px;
}
</style>
<center>
<a href="#">test test</a>
<br><br><br>
<DIV id=Rounded_Corners2_by_Gene align=center>
<DIV id=t1 style="OVERFLOW: hidden; WIDTH: 238px;(t1); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"></DIV>
<DIV id=t2 style="OVERFLOW: hidden; WIDTH: 244px;(t2=t1+6); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c2 style="OVERFLOW: hidden; WIDTH: 238px;(c2=t1); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t3 style="OVERFLOW: hidden; WIDTH: 248px;(t3=t2+4); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c3 style="OVERFLOW: hidden; WIDTH: 244px;(c3=t2); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t4 style="OVERFLOW: hidden; WIDTH: 250px;(t4=t3+2); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c4 style="OVERFLOW: hidden; WIDTH: 248px;(c4=t3); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t5 style="OVERFLOW: hidden; WIDTH: 252px;(t5=t4+2); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c5 style="OVERFLOW: hidden; WIDTH: 250px;(c5=t4); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t6 style="OVERFLOW: hidden; WIDTH: 254px;(t6=t5+2); HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c6 style="OVERFLOW: hidden; WIDTH: 252px;(c6=t5); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t7 style="OVERFLOW: hidden; WIDTH: 256px;(t7=t6+2); HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c7 style="OVERFLOW: hidden; WIDTH: 254px;(c7=t6); HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t8 style="OVERFLOW: hidden; WIDTH: 258px;(t8=t7+2); HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c8 style="OVERFLOW: hidden; WIDTH: 256px;(c8=t7); HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=main style="OVERFLOW: hidden; WIDTH: 260px; HEIGHT: 100px; BACKGROUND-COLOR: #3366cc">
<DIV id=main style="OVERFLOW: hidden; WIDTH: 258px; HEIGHT: 100px; BACKGROUND-COLOR: #ffffff"><BR><FONT face=Verdana color=#333330>Testing Rounded Corners <BR>without images
& javascript<BR><BR>by Gene</FONT></DIV></DIV>
<DIV id=t8 style="OVERFLOW: hidden; WIDTH: 258px; HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c8 style="OVERFLOW: hidden; WIDTH: 256px; HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t7 style="OVERFLOW: hidden; WIDTH: 256px; HEIGHT: 2px; BACKGROUND-COLOR: #3366cc"><DIV id=c7 style="OVERFLOW: hidden; WIDTH: 254px; HEIGHT: 2px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t6 style="OVERFLOW: hidden; WIDTH: 254px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c6 style="OVERFLOW: hidden; WIDTH: 252px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t5 style="OVERFLOW: hidden; WIDTH: 252px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c5 style="OVERFLOW: hidden; WIDTH: 250px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t4 style="OVERFLOW: hidden; WIDTH: 250px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c4 style="OVERFLOW: hidden; WIDTH: 248px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t3 style="OVERFLOW: hidden; WIDTH: 248px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c3 style="OVERFLOW: hidden; WIDTH: 244px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t2 style="OVERFLOW: hidden; WIDTH: 244px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"><DIV id=c2 style="OVERFLOW: hidden; WIDTH: 238px; HEIGHT: 1px; BACKGROUND-COLOR: #ffffff"></DIV></DIV>
<DIV id=t1 style="OVERFLOW: hidden; WIDTH: 238px; HEIGHT: 1px; BACKGROUND-COLOR: #3366cc"></DIV>
</DIV>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 8 | 引用: 0 | 查看次数: 802
发表评论
