类似Windows风格的导航菜单，CSS+JavaScript实现_菜单导航特效

缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鎯у⒔閹虫捇鈥旈崘顏佸亾閿濆簼绨奸柟鐧哥秮閺岋綁顢橀悙鎼闂傚洤顦甸弻銊モ攽閸℃瑥鈷堥梺鎼炲€曢ˇ鎵崲濞戞﹩鍟呮い鏃囧吹閸戝綊姊洪崫鍕櫤缂佽鐗撳璇测槈濮橆偅鍕冮梺缁樺姦閸撴稑鈻撻妶澶嬧拺闁告稑锕ラ埛鎺楁煛娴ｅ憡鎲告俊鍙夊姍楠炴ḿ鈧稒锚椤庢捇姊洪崷顓犲笡閻㈩垰锕ョ粩鐔煎即閵忊檧鎷绘繛杈剧导鐠€锕傚绩閺夋５鐟扳堪鎼粹€斥拫濡炪們鍨洪〃濠呯熅闂佺粯绋撻¨鈧琒闂傚倸鍊搁崐鎼佸磹閹间礁纾圭€瑰嫭鍣磋ぐ鎺戠倞鐟滃繘寮抽敃鍌涚厽闁靛繆鎳氶崷顓犵幓婵°倕鎳忛悡娆撴煙濞堝灝鏋涙い锝呫偢閺屾稓鈧絽澧庣弧鈧梺鍝勬湰濞叉ê顕ラ崟顖氶唶婵犻潧妫楅ˉ娆愮節閻㈤潧浠﹂柛銊﹀劶瑜版粓姊虹悰鈥充壕婵炲濮撮鍡涘磹閻㈠憡鐓ユ繝闈涙閺嗘瑥鈹戦敍鍕幋闁哄本绋撻埀顒婄秵閸嬪懎鐣峰畝鈧埀顒冾潐濞叉ḿ鏁敓鐘茬畺婵炲棙鎸搁拑鐔兼煏婢跺牆鍔滈柡鍡╀邯濮婂宕掑▎鎴М闂佸湱鈷堥崑鍕弲闂侀潧艌閺呮稓澹曟繝姘厽闁归偊鍠栭崝瀣煕婵犲倻浠涢柕鍥у楠炴帡宕卞鎯ь棜闂傚倷绀侀悿鍥綖婢舵劕鍨傞柛褎顨呯粻鏍ㄧ箾閸℃ɑ灏柣顓燁殔椤潡鎳滈惉顏呭灴閺佸秵绗熼埀顒€顫忕紒妯诲閻熸瑥瀚禒鈺呮⒑閸涘﹥鐓ラ梺甯到閻ｉ攱瀵奸弶鎴濆敤閻熸粍绮撳畷鐢稿即閻愨晜鏂€闂佺粯锚绾绢參銆傞弻銉︾厸闁告侗鍠楅崐鎰版煛鐏炶濮傞柟顔哄€濆畷鎺戔槈濮楀棔绱�濠电姷鏁告慨鐑藉极閸涘﹥鍙忛柣鎴ｆ閺嬩線鏌熼梻瀵割槮缁炬儳顭烽弻锝夊箛椤掍焦鍎撻梺鎼炲妼閸婂潡骞冪憴鍕闁瑰嘲鐭堥崝鍛攽閻愭彃鎮戦柣妤冨█楠炲啫鐣￠幍铏€婚棅顐㈡处閹尖晜瀵奸埀顒勬⒒娴ｈ櫣甯涚紒璇插€块幃銉︾附缁嬭儻鎽曞┑鐐村灟閸ㄥ綊鎮炲ú顏呯厱闁规澘鍚€缁ㄥ瓨淇婇幓鎺斿ⅵ婵﹨娅ｇ槐鎺懳熺拠鏌ョ€洪梻浣瑰濞插繘宕归挊澶樺殨濠电姵鑹鹃悘鎶芥煙妫颁胶顦﹂柟顔藉灴閺岀喖鎳栭埡鍕婂鏌嶈閸撴瑧澹曢銏╂晩闁硅揪闄勯埛鎺懨归敐鍥ㄥ殌闁崇粯娲熼弻锟犲焵椤掍焦缍囬柍鍝勫€瑰▓浼存⒑鐠恒劌鏋斿┑顔芥尦閹锋垿鎮㈤崗鑲╁帾婵犵數鍋熼崑鎾斥枍閸℃稒鐓曢悗锝庝簼椤ャ垽鏌＄仦鍓с€掑ù鐙呯畵瀹曟粏顦俊鎻掔墕椤啴濡堕崨瀵稿椽闂佺懓鍤栭幏锟� 缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簼閹癸綁鏌ｉ鐐搭棞闁靛棙甯掗～婵嬫晲閸涱剙顥氶梻浣藉Г钃辩紒璇茬墕椤繐煤椤忓秵鏅㈤梺閫炲苯澧扮紒顔芥⒒閳ь剟娼ч幗婊堟偝缂佹ü绻嗛柕鍫濇噺閸ｆ椽鏌ｉ幘瀵告噰婵﹥妞介、姗€濡歌閺嗙姵绻濋埛鈧崶鈺冩毇闂佸搫琚崐婵嗩嚕閸洖绠伴幖绮光偓鍙夋▕闂傚倷绀侀幖顐﹀嫉椤掑嫭鍎庢い鏍ㄧ◥缁诲棝鏌ｉ幋鐘垫憘闁轰礁锕弻锝夊箻閸愯尙妲板┑鐐跺瀹曠數妲愰幘璇茬＜婵炲棙甯╅崬褰掓⒑缁嬫鍎愰柟鍛婃倐閳ワ箓宕稿Δ浣告疂闂傚倸鐗婄粙鎴︼綖瀹ュ鈷戠紓浣股戠亸顓㈡煕閻斿憡灏︾€殿喖顭峰鎾偄妞嬪海鐛梻浣稿閸嬪懐鎹㈤崒鐐┾偓鏍ㄥ緞閹邦厸鎷虹紓鍌欑劍宀ｈ法绮婚妷銉冪懓饪版惔婵嬪仐閻庢鍠栭…鐑藉极閹版澘宸濇い蹇撴噺閺夋悂姊绘担鍛婅础闁稿鎸稿玻鍨枎閹垮啯鏅滈梺璺ㄥ櫐閹凤拷闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簻椤掋垺銇勯幇顏嗙煓闁哄被鍔戦幃銏ゅ传閸曟垯鍨婚惀顏堝箚瑜滈悡濂告煛鐏炲墽娲寸€殿喗鎸虫俊鎼佸Ψ瑜夐崑鎾活敆閸曨剛鍘遍梺闈涱檧缁茶姤淇婇悾宀€纾界€广儱鎳忛崰姗€鏌＄仦鐣屝х€规洦鍋婂畷鐔碱敃閿濆棭鍟€濠碉紕鍋戦崐褏鈧潧鐭傚畷瑙勬綇閳哄倸搴婂┑鐘绘涧椤戝懘锝為崨瀛樼叆婵犻潧妫欓ˉ鐘绘煏閸℃ê濮嶆慨濠冩そ瀹曨偊宕熼鐐╂嫛闂備礁鎲￠幐楣冨窗鎼淬劍鍋╃€瑰嫭瀚堥弮鍫濈劦妞ゆ帒瀚ㄩ崑鎴澝归崗鍏肩稇闂佸崬娲弻锝夊棘閹稿孩鍎撳Δ鐘靛仦閸旀瑥顫忕紒妯诲閻熸瑥瀚禒鈺呮⒑缁嬪灝鐦ㄩ柛銊ㄦ硾閻ｅ嘲鈹戦崱鈺佹倯婵犮垼娉涢鍛村礈椤撱垺鈷戠痪顓炴噺瑜把囨⒒閸曨偄顏柛鈺傜洴楠炴帡骞嬮鐘叉暩闂佽崵濮惧▍锝囦焊閵娾晛绀夐柣鏃傚帶閺嬩線鏌涢鐘插姕闁抽攱鍨块弻娑樷攽閸℃浼傚銈庡亾缁犳捇寮诲☉娆戠瘈闁告劦浜滈埅鍦偓鍏夊亾闁挎繂鐗嗛崝鐢电磼閻樺磭鈽夐柍钘夘槸铻ｆ繝褏鍋撳▍濠囨煛鐏炶濮傜€殿噮鍣ｅ畷鎺戔堪閸愵亶鍋у┑锛勫亼閸婃垿宕曢懠顒傜煓闁规崘鍩栭～鏇㈡煙閹规劦鍤欑痪鎯у悑缁绘盯宕卞Ο铏逛淮婵犵鈧尙鐭欐慨濠冩そ瀹曨偊濡烽妷銈囨崟婵＄偑鍊ら崢楣冨礂濮椻偓閹即顢欑捄銊ф澑濠电偞鍨堕悷锕€鈻嶉姀銈嗏拺閻犳亽鍔屽▍鎰版煙閸戙倖瀚� 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾剧懓顪冪€ｎ亝鎹ｉ柣顓炴閵嗘帒顫濋敐鍛婵°倗濮烽崑鐐烘偋閻樻眹鈧線寮撮姀鈩冩珖闂侀€炲苯澧撮柟顔兼健椤㈡岸鍩€椤掑嫬钃熼柨婵嗘啒閺冨牆鐒垫い鎺戝閸嬪鈹戦悩鍙夋悙闁活厽顨婇悡顐﹀炊閵娧€濮囬梺缁樻尰閻熝呮閹惧瓨濯撮梻鍫熺〒娴犲ジ姊洪崫鍕靛剱缂佸甯楃粚杈ㄧ節閸ャ劌鈧兘鏌熷▓鍨灓闁绘挻鎹囧娲传閸曨偒妲甸梺閫炲苯澧柛鎾村哺瀹曘儳鈧綆鍠栫粻鍦磼椤旂厧甯ㄩ柛瀣崌閹崇娀顢楁担瑙勵仯闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩顔瑰亾閸愵喖骞㈡繛鍡楃箲閻庢娊鎮楅獮鍨姎婵炶绠戦悾鐑藉矗婢跺瞼顔曢梺鐟扮摠閻熴儵鎮橀埡鍌ゆ闁绘劦浜滈悘顏勄庨崶褝韬い銏＄☉閳规垿骞囬渚囧敳闂傚倸鍊搁崐鎼佀囬婊呯煋闁圭虎鍠栭悡姗€鏌熸潏鎯х槣闁轰礁顑夐弻娑㈠焺閸愵亝鍣柦鍐憾濮婄粯鎷呴崨濠傛殘濠殿喖锕ょ紞濠囧Υ閸愨晝绡€闁搞儜鍕氶梻渚€鈧偛鑻晶顖炴煏閸パ冾伃妤犵偞甯￠獮瀣攽閸モ晙澹曞┑鐘垫暩閸嬫盯宕ョ€ｎ喖绀夋繛鍡樻尭閽冪喖鏌ｉ弮鍌楁嫛闁轰礁锕弻銈吤圭€ｎ偅鐝旈梺缁樻尵閸犳牠骞冨Δ鍐╁枂闁告洦鍓涢ˇ銊モ攽閻愯泛鐨洪柛鐘崇墪椤曪絾绻濆顒€鑰垮┑掳鍊曢敃銈夊箖閹达附鈷戦柛娑橈梗缁堕亶鏌涢妸锕€鈻曠€规洏鍨介、妤呭礋椤戣姤瀚藉┑鐐舵彧缂嶁偓濠殿喓鍊楀☉鐢稿醇閺囩喓鍘遍梺鎸庣箓缁绘帡鎮鹃崹顐闁绘劘灏欑粻濠氭煛娴ｈ宕岄柡浣规崌閺佹捇鏁撻敓锟�,闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧湱鈧懓瀚崳纾嬨亹閹烘垹鍊炲銈嗗笂缁€渚€宕滈鐑嗘富闁靛牆妫楁慨褏绱掗悩鍐茬仼缂侇喖鐗忛埀顒婄秵閸嬩焦绂嶅⿰鍫熺厵闁逛絻娅曞▍鍛存煟韫囧﹥娅囬柟顕呭枛椤粓鍩€椤掆偓椤繒绱掑Ο璇差€撶紓浣圭☉椤戝懎鈻撻鐐╂斀妞ゆ梹鏋婚崗顒傜磼閻樿櫕宕岄柡浣瑰姍閹瑩寮堕幋鐘电嵁闂佽鍑界紞鍡涘礈濞戙埄鏁婇柡鍥╁枔缁♀偓闂佹眹鍨藉ḿ褍鐡梻浣呵归鍛涘┑鍡欐殾闁汇垻枪閸楁娊鏌曡箛銉х？闁告ê宕—鍐Χ閸℃衼缂備焦褰冩晶鐣屽垝閸儱鐒垫い鎺戝€荤壕钘壝归敐鍡楃祷濞存粓绠栧娲川婵犲倸顫呴梺鍝勫€搁崐鍦矉瀹ュ應鍫柛顐ゅ枔閸樻悂姊虹粙鎸庢拱婵ǜ鍔嶇粋鎺楀閵堝棛鍘靛銈嗘濡嫰鎮橀敃鍌涚厪闁搞儜鍐句紓缂備胶濮甸惄顖氼嚕閹绢喗鍊烽悗鐢电《閸嬫捇宕滆绾捐棄霉閿濆牊顏犻悽顖涚洴閺岋綁鍩℃繝鍌滀桓闂佺粯渚楅崰姘跺焵椤掑﹦绉甸柛鐘愁殜瀹曟劙鎮滈懞銉у幐婵犮垼娉涢鍛存倶閳哄倻绠鹃柛顐ｇ☉閳ь剚绻傞～蹇曠磼濡顎撻梺鍛婄洴濞佳呯礊婵犲洢鈧線寮介鐐茶€垮┑鐐村灦宀ｅ潡顢欐径鎰拺闁硅偐鍋涢崝鈧柣蹇曞仜婢х晫绮欐笟鈧缁樻媴閸涘﹤鏆堢紓浣筋嚙閸婂鍩€椤掍胶娈伴柛銉戝啫娈ら梺鐟板悑閻ｎ亪宕濆澶嬪亗婵炲棙鍔戞禍婊堟煛瀹擃喖瀚峰Λ鐐烘煟鎼淬垹鍤柛鐘愁殘缁顓兼径妯绘櫆闂佸壊鍋嗛崯鍧楀箯缂佹ḿ绠鹃弶鍫濆⒔閸掍即鏌熺拠褏绡€鐎规洦鍨堕幃娆撴倻濡厧骞楅梻浣虹帛濮婄懓岣垮▎鎾崇闁靛牆顦伴悡娆愵殽閻愯尙浠㈤柣蹇婃櫊閹藉爼鏁愰崨顐熷亾閹烘埈娼╅柣鎾虫捣娴犫晛鈹戦悙鑼闁告柨绉堕幑銏犫攽鐎ｎ偄浠洪梻鍌氱墛閸掆偓闁挎繂娲ㄥΛ顖炴煛婢跺孩纭堕弫鍫ユ倵濞堝灝鏋熼柣鎿勭節閻涱噣寮介妸锕€顎撻梺闈╁瘜閸樼厧顕ｉ幎鑺モ拻濞达綀娅ｇ敮娑欑箾閸欏澧电€规洘鍔欏畷鐑筋敇濞戞ü澹曞┑顔结缚閸嬫挾鈧熬鎷�!

类似Windows风格的导航菜单，CSS+JavaScript实现，有人或许会喜欢这种菜单，通过各种颜色的修饰形成类似Windows窗体以及按钮的风格，具有立体感，当然，修改颜色值会改变风格，换成你想要的样式。

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>类似Windows风格的导航菜单，CSS+JavaScript实现</title>
</head>
<body>
<STYLE type=text/css>#menubar {
        BACKGROUND: rgb(212,208,200); FONT: menu; CURSOR: default; POSITION: relative
}
#menubar .root {
        BORDER-RIGHT: rgb(212,208,200) 1px solid; PADDING-RIGHT: 2pt; BORDER-TOP: rgb(212,208,200) 1px solid; PADDING-LEFT: 2pt; BORDER-LEFT: rgb(212,208,200) 1px solid; BORDER-BOTTOM: rgb(212,208,200) 1px solid
}
#menubar TABLE {
        BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 1pt; BORDER-TOP: #000000 1px solid; DISPLAY: none; PADDING-LEFT: 1pt; BACKGROUND: #ffffff; PADDING-BOTTOM: 0pt; MARGIN: 0pt; FONT: menu; BORDER-LEFT: #000000 1px solid; PADDING-TOP: 0pt; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute
}
#menubar TABLE TD {
        PADDING-RIGHT: 15pt; PADDING-LEFT: 12pt; PADDING-BOTTOM: 2pt; MARGIN: 0pt; PADDING-TOP: 2pt
}
#menubar .highlight {
        BACKGROUND: #b5bed6; COLOR: 000000;

}
#menubar .disabledhighlight {
        BACKGROUND: rgb(212,208,200); COLOR: gray
}
#menubar #break {
        COLOR: gray
}
#menubar .disabled {
        COLOR: gray
}
#menubar #break {
        PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; MARGIN: 0pt; PADDING-TOP: 0pt
}
#menubar SPAN.more {
        PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; LEFT: 14pt; FLOAT: right; PADDING-BOTTOM: 0pt; MARGIN: 0pt; FONT: 9pt webdings; WIDTH:0.8em; PADDING-TOP: 0pt; POSITION: relative; TOP: -2pt; HEIGHT: 9pt
}
#menubar .TBHandle {
    BACKGROUND-COLOR: menu;
    BORDER-LEFT: buttonhighlight 1px solid;
    BORDER-RIGHT: buttonshadow 1px solid;
    BORDER-TOP:        buttonhighlight        1px solid;
    FONT-SIZE: 1px;
    HEIGHT: 50px;
    POSITION: absolute;
    TOP: 1px;
    WIDTH: 3px
}
#menubar .yToolbar {
    BACKGROUND-COLOR: menu;
    BORDER-BOTTOM: buttonshadow        1px solid;
    BORDER-LEFT: buttonhighlight 1px solid;
    BORDER-RIGHT: buttonshadow 1px solid;
    BORDER-TOP:        buttonhighlight        1px solid;
    HEIGHT: 27px;
    LEFT: 1px;
    POSITION: relative;
    TOP: 1px;
}
.handbtn {
        BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; HEIGHT: 21px; WIDTH: 3px
}
.sepbtn1 {
        BORDER-LEFT: buttonshadow 1px ridge; BORDER-RIGHT: buttonhighlight 1px solid; WIDTH: 2px
}

</STYLE>
<BODY topmargin="0" leftmargin="0" bgcolor="rgb(212,208,200)">
<div align="center">
<script language=javascript>

OutBarFolder1=new Array(
"网页代码",

"none","default","网页代码","http://169.254.212.61","_top"
);
OutBarFolder2=new Array(
"最酷特效",

"none","default","最酷特效","http://","_top"
);
OutBarFolder3=new Array(
"网页代码",

"none","default","网页代码","http://","_top"
);
OutBarFolder4=new Array(
"网页代码",

"none","default","网页代码","http://","_top"
);
OutBarFolder5=new Array(
"网页代码",

"none","default","网页代码","http://","_top"
);

var childActive = null
    var menuActive = null
    var lastHighlight = null
    var active = false
    function getReal(el) {
     temp = el
      while ((temp!=null) && (temp.tagName!="TABLE") && (temp.className!="root") && (temp.id!="menuBar")) {
        if (temp.tagName=="TD")
          el = temp
        temp = temp.parentElement
      }
      return el
    }
    function raiseMenu(el) {
      el.style.borderLeft = "1px #08246B solid"
      el.style.borderTop = "1px #08246B solid"
      el.style.borderRight = "1px #08246B solid"
      el.style.borderBottom = "1px #08246B solid"
      el.style.background = "#B5BED6"
    }
    function clearHighlight(el) {
      if (el==null) return
      el.style.borderRight = "1px lightgrey solid"
      el.style.borderBottom = "1px lightgrey solid"
      el.style.borderTop = "1px lightgrey solid"
      el.style.borderLeft = "1px lightgrey solid"
      el.style.background = "rgb(212,208,200)"
    }
    function sinkMenu(el) {
      el.style.borderRight = "1px #EEEEEE solid"
      el.style.borderBottom = "1px #EEEEEE solid"
      el.style.borderTop = "1px gray solid"
      el.style.borderLeft = "1px gray solid"
      el.style.background = "rgb(212,208,200)"
    }
    function menuHandler(menuItem) {
      return true
    }
    function getOffsetPos(which,el,tagName) {
      var pos = 0
      while (el.tagName!=tagName) {
        pos+=el["offset" + which]
        el = el.offsetParent
      }
      return pos
    }

function getRootTable(el) {
      el = el.offsetParent
      if (el.tagName=="TR")
        el = el.offsetParent
      return el
    }

function getElement(el,tagName) {
      while ((el!=null) && (el.tagName!=tagName) )
        el = el.parentElement
      return el
    }

function processClick() {
      var el = getReal(event.srcElement)
      if ((getRootTable(el).id=="menuBar") && (active)) {
        cleanupMenu(menuActive)
        clearHighlight(menuActive)
        active=false
        lastHighlight=null
        doHighlight(el)
      }
      else {
        if ((el.className=="root") || (!menuHandler(el)))
          doMenuDown(el)
        else {
          if (el._childItem==null)
            el._childItem = getChildren(el)
          if (el._childItem!=null)  return;
          if ((el.id!="break") && (el.className!="disabled") && (el.className!="disabledhighlight") && (el.className!="clear"))  {
            if (menuHandler(el)) {
              cleanupMenu(menuActive)
              clearHighlight(menuActive)
              active=false
              lastHighlight=null
            }
          }
        }
      }
    }
    function getChildren(el) {
      var tList = el.children.tags("TABLE")
      var i = 0
      while ((i<tList.length) && (tList[i].tagName!="TABLE"))
        i++
      if (i==tList.length)
        return null
      else
        return tList[i]
    }
    function doMenuDown(el) {
      if (el._childItem==null)
        el._childItem = getChildren(el)
      if ((el._childItem!=null) && (el.className!="disabled") && (el.className!="disabledhighlight")) {
        ch = el._childItem
        if (ch.style.display=="block") {
          removeHighlight(ch.active)
          return
        }
        ch.style.display = "block"
        if (el.className=="root") {
          ch.style.pixelTop = el.offsetHeight + el.offsetTop + 2
          ch.style.pixelLeft = el.offsetLeft + 1
          if (ch.style.pixelWidth==0)
            ch.style.pixelWidth = ch.rows[0].offsetWidth+50
          sinkMenu(el)
          active = true
          menuActive = el
        } else {
          childActive = el
          ch.style.pixelTop = getOffsetPos("Top",el,"TABLE") -3
          ch.style.pixelLeft = el.offsetLeft + el.offsetWidth
          if (ch.style.pixelWidth==0)
            ch.style.pixelWidth = ch.offsetWidth+50
        }
      }
    }
     function doHighlight(el) {
      el = getReal(el)
      if ("root"==el.className) {
        if ((menuActive!=null) && (menuActive!=el)) {
          clearHighlight(menuActive)
        }
        if (!active) {
          raiseMenu(el)
        }
        else
          sinkMenu(el)
        if ((active) && (menuActive!=el)) {
          cleanupMenu(menuActive)
          doMenuDown(el)
        }
        menuActive = el
        lastHighlight=null
      }
      else {
        if (childActive!=null)
          if (!childActive.contains(el))
            closeMenu(childActive, el)

if (("TD"==el.tagName) && ("clear"!=el.className)) {
          var ch = getRootTable(el)
          if (ch.active!=null) {
            if (ch.active!=el) {
              if (ch.active.className=="disabledhighlight")
                ch.active.className="disabled"
              else
                ch.active.className=""
              }
            }
          ch.active = el
          lastHighlight = el
          if ((el.className=="disabled") || (el.className=="disabledhighlight") || (el.id=="break"))
            el.className = "disabledhighlight"
          else {
            if (el.id!="break") {
              el.className = "highlight"
              if (el._childItem==null)
                el._childItem = getChildren(el)
              if (el._childItem!=null) {
                doMenuDown(el)
              }
            }
          }
        }
      }
    }
    function removeHighlight(el) {
      if (el!=null)
        if ((el.className=="disabled") || (el.className=="disabledhighlight"))
          el.className="disabled"
        else
          el.className=""
    }
    function cleanupMenu(el) {
      if (el==null) return
      for (var i = 0; i < el.all.length; i++) {
        var item = el.all[i]
        if (item.tagName=="TABLE")
         item.style.display = ""
        removeHighlight(item.active)
        item.active=null
      }
    }
    function closeMenu(ch, el) {
      var start = ch
      while (ch.className!="root") {
          ch = ch.parentElement
          if (((!ch.contains(el)) && (ch.className!="root"))) {
            start=ch
          }
      }
      cleanupMenu(start)
    }
     function checkMenu() {
      if (document.all.menuBar==null) return
      if ((!document.all.menuBar.contains(event.srcElement)) && (menuActive!=null)) {
        clearHighlight(menuActive)
        closeMenu(menuActive)
        active = false
        menuActive=null
        choiceActive = null
      }
    }
    function doCheckOut() {
      var el = event.toElement
      if ((!active) && (menuActive!=null) && (!menuActive.contains(el))) {
        clearHighlight(menuActive)
        menuActive=null
      }
    }

} else {
                curCell = lastHighlight.cellIndex - 1
                curRow = getElement(lastHighlight,"TR").rowIndex
              }
            }
            doHighlight(itemCell.rows[curRow].cells[curCell])
            break;
           if (lastHighlight==null) {
              curCell = menuActive._childItem
              curRow = curCell.rows.length-1
            }
            else {
              curCell = getRootTable(lastHighlight)
              if (getElement(lastHighlight,"TR").rowIndex==0)
                curRow = curCell.rows.length-1
              else
                curRow = getElement(lastHighlight,"TR").rowIndex-1
            }
            doHighlight(curCell.rows[curRow].cells[0])
            break;
        }
      }
    }
function make_menu() {
document.write("<table width='740px' cellpadding='0' cellspacing='0' border='0' style='background=ffffff; BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid;'>");
document.write("<tr><TD><SPAN class=handbtn></SPAN></TD><td>");
document.write("<TABLE ID=menuBar ONSELECTSTART='return false' ONCLICK='processClick()' ONMOUSEOVER='doHighlight(event.toElement)' ONMOUSEOUT='doCheckOut()' ONKEYDOWN='processKey()'><TR>");
        j=1;
        while(eval("window.OutBarFolder"+j))
                j++;
        i=1;
        while(i<j)
        {
                Folder=eval("OutBarFolder"+i)
        document.write("<TD NOWRAP CLASS=root>"+Folder[0]+"<TABLE CELLSPACING=0 CELLPADDING=0>");
                MakeItems(Folder);
        document.write("</TABLE>");
                i++;
        }
document.write("</TD></TR></TABLE>");
document.write("</td><td width=100% ONMOUSEOVER='processClick()'></td></tr></table>");
}
function MakeItems(Folder)
{
        var items=0;
        while(Folder[items+1])
                items+=5;
        items/=5;
        for(var i=1;i<items*5;i+=5)
        {
/*
                if(Folder[i+1]=="BREAK") {
                        document.write("<TD NOWRAP ID=break><HR></TD>");
                }
                else {
                        document.write("<TR><TD NOWRAP>"+Folder[i+1]+"</TD></TR>");
                }
*/
                        document.write("<TR><TD NOWRAP"+((Folder[i+0]=="none")?"":" ID='"+Folder[i+0]+"'")+((Folder[i+3]=="none")?"":" onclick=\"go(1,'"+Folder[i+3]+"')\"")+">"+((Folder[i+1]=="default")?"":"<font color="+Folder[i+1]+">")+Folder[i+2]+((Folder[i+1]=="default")?"":"</font>")+"</TD></TR>");
//alert("<TR><TD NOWRAP "+((Folder[i+0]=="none")?"":"ID='"+Folder[i+0]+"'")+((Folder[i+3]=="none")?"":" onclick=go(1,'"+Folder[i+3]+"')")+">"+((Folder[i+1]=="default")?"":"<font color="+Folder[i+1]+">")+Folder[i+2]+((Folder[i+1]=="default")?"":"</font>")+"</TD></TR>");
        }
}

function go(i,iurl) {
        switch (i)
        {
                case 1 : parent.location=iurl;break;
                case 2 : top.main.location='/';break;
                case 3 : top.main.location='/';break;
                case 4 : top.main.location='/';break;
                case 5 : top.main.location='/';break;
                case 6 :
                        var obj=top.main
                        var str=obj.location.href;
                        if(str.indexOf("index1")>0)
                                obj.location="index1.asp?page="+obj.document.all("ppage").value;
                        else
                                obj.location="/";
                        break;
                case 7 :
                        var obj=top.main
                        var str=obj.location.href;
                        if(str.indexOf("index1")>0)
                                obj.location="index1.asp?page="+obj.document.all("npage").value;
                        else
                                obj.location="/";
                        break;
                case 8 :
                        var obj=top.main
                        var str=obj.location.href;
                        if(str.indexOf("index1")>0)
                                obj.location="index1.asp?page="+obj.document.all("epage").value;
                        else
                                obj.location="index1.asp";
                        break;
                case 9: top.main.location='editinfo.asp';break;
                case 10: top.main.location='quit.asp';break;
                case 11: top.main.location='userinfo.asp';break;
                case 12:
                        var newwin=top.open("http://www.mb5u.com/jscss/");
                        newwin.focus();
                        break;
        }
}

make_menu();
</script>
</div>
<div style='width:100%;height:94%' ONMOUSEOVER='processClick()'>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-23

[收藏][报错][返回列表]

评论加载中....

类似Windows风格的导航菜单，CSS+JavaScript实现_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些