快捷導(dǎo)航

鼠標(biāo)觸發(fā)移動(dòng)的分層菜單層菜單moveMenu

更新時(shí)間：2012年12月25日 15:27:45 作者：

會(huì)移動(dòng)的菜單，層菜單，鼠標(biāo)放在菜單上，菜單就會(huì)移動(dòng)，上浮的菜單，像是TAB風(fēng)格的菜單，使用了一張圖片，順著代碼可下載到這張修飾的小圖片,需要的朋友可以參考下

會(huì)移動(dòng)的菜單，層菜單，鼠標(biāo)放在菜單上，菜單就會(huì)移動(dòng)，上浮的菜單，像是TAB風(fēng)格的菜單，使用了一張圖片，順著代碼可下載到這張修飾的小圖片。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>移動(dòng)菜單，層菜單moveMenu</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css>.alpha { FILTER: Alpha(Opacity=80) } .td1 { FONT-SIZE: 12px } .td2 { BACKGROUND-COLOR: #ccffff; CURSOR: hand; FONT-SIZE: 12px } .maskl { OVERFLOW: hidden } .cardtitle { BORDER-BOTTOM: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: default; FONT-SIZE: 12px; TEXT-INDENT: 4pt } .cardbottom { BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90) } </STYLE>  <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> <BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0" marginwidth="0"> <div   id="ublnpf9mb"   class=maskl id=menuPos style="HEIGHT: 216px; LEFT: 115px; POSITION: absolute; TOP: 59px; WIDTH: 132px; Z-INDEX: 1"> <div   class="ublnpf9mb"   id=menu1 onmouseout=menuBack(1) onmouseover=menuOut(1) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1"> <div   id="ublnpf9mb"   class=cardbottom id=Layer1 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>選項(xiàng)一</TD></TR> <TR> <TD class=td1>選項(xiàng)二</TD></TR> <TR> <TD class=td1>選項(xiàng)三</TD></TR> <TR> <TD class=td1>選項(xiàng)四</TD></TR> <TR> <TD>&nbsp;</TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>選項(xiàng)卡一</TD></TR></TBODY></TABLE></DIV> <div   class="ublnpf9mb"   id=menu2 onmouseout=menuBack(2) onmouseover=menuOut(2) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 20px; WIDTH: 130px; Z-INDEX: 1"> <div   id="ublnpf9mb"   class=cardbottom id=Layer2 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>選項(xiàng)一</TD></TR> <TR> <TD class=td1>選項(xiàng)二</TD></TR> <TR> <TD class=td1>選項(xiàng)三</TD></TR> <TR> <TD class=td1>選項(xiàng)四</TD></TR> <TR> <TD>&nbsp;</TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>選項(xiàng)卡二</TD></TR></TBODY></TABLE></DIV> <div   class="ublnpf9mb"   id=menu3 onmouseout=menuBack(3) onmouseover=menuOut(3) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 40px; WIDTH: 130px; Z-INDEX: 1"> <div   id="ublnpf9mb"   class=cardbottom id=Layer3 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>選項(xiàng)一</TD></TR> <TR> <TD class=td1>選項(xiàng)二</TD></TR> <TR> <TD class=td1>選項(xiàng)三</TD></TR> <TR> <TD class=td1>選項(xiàng)四</TD></TR> <TR> <TD>&nbsp;</TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>選項(xiàng)卡三</TD></TR></TBODY></TABLE></DIV> <div   class="ublnpf9mb"   id=menu4 onmouseout=menuBack(4) onmouseover=menuOut(4) style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 60px; WIDTH: 130px; Z-INDEX: 1"> <div   id="ublnpf9mb"   class=cardbottom id=Layer4 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>選項(xiàng)一</TD></TR> <TR> <TD class=td1>選項(xiàng)二</TD></TR> <TR> <TD class=td1>選項(xiàng)三</TD></TR> <TR> <TD class=td1>選項(xiàng)四</TD></TR> <TR> <TD>&nbsp;</TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>選項(xiàng)卡四</TD></TR></TBODY></TABLE></DIV> <div   class="ublnpf9mb"   id=menu5 onmouseout=menuBack(5) onmouseover=menuOut(5) style="HEIGHT: 134px; LEFT: 30px; POSITION: absolute; TOP: 80px; WIDTH: 130px; Z-INDEX: 1"> <div   id="ublnpf9mb"   class=cardbottom id=Layer5 style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> <TABLE align=center border=0 height="100%" width=75> <TBODY> <TR> <TD class=td1>選項(xiàng)一</TD></TR> <TR> <TD class=td1>選項(xiàng)二</TD></TR> <TR> <TD class=td1>選項(xiàng)三</TD></TR> <TR> <TD class=td1>選項(xiàng)四</TD></TR> <TR> <TD>&nbsp;</TD></TR></TBODY></TABLE></DIV> <TABLE border=0 cellPadding=0 cellSpacing=0 width=100> <TBODY> <TR> <TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" width=14></TD> <TD bgColor=#99ccff class=cardtitle height=14 width=86>選項(xiàng)卡五</TD></TR></TBODY></TABLE></DIV></DIV> </BODY></HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

相關(guān)文章

js兼容IE6,IE7菜單高亮顯示效果代碼
原來(lái)做了一個(gè)菜單在IE7下正常沒(méi)想到在IE6下卻沒(méi)有效果，后來(lái)改成使用JS實(shí)現(xiàn)雖然是實(shí)現(xiàn)的，但總覺(jué)得不是很好，在網(wǎng)上找了些資料，用CSS實(shí)現(xiàn)了。
2008-07-07
javascript 靜態(tài)樹(shù)菜單實(shí)現(xiàn)代碼
coding這么多年，我居然不知道有"dl"這種html標(biāo)記，慚愧啊，今天偶然發(fā)現(xiàn)，覺(jué)得好玩，如是我為它添加了折疊功能，變成了一顆靜態(tài)樹(shù).
2010-12-12
jquery 導(dǎo)航設(shè)計(jì)實(shí)現(xiàn)代碼學(xué)習(xí)jquery的朋友可以看下
jquery 導(dǎo)航設(shè)計(jì)，主要是通過(guò)jquery控制一些css樣式變換。
2009-09-09
超酷的鼠標(biāo)拖拽翻頁(yè)(分頁(yè))效果實(shí)現(xiàn)javascript代碼
超酷的鼠標(biāo)拖拽翻頁(yè)(分頁(yè))效果實(shí)現(xiàn)javascript代碼,非常的不錯(cuò)。
2009-09-09
DIV+CSS設(shè)計(jì)的橫向?qū)Ш讲藛?，可自己修改顏色?
2010-07-07