当前位置：首页 > 资讯 > 技术文档

鼠标触发移动的分层菜单层菜单moveMenu

时间：2020-03-17 02:43 编辑：来源：阅读：
扫一扫，手机访问

摘要：鼠标触发移动的分层菜单层菜单moveMenu

会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。

移动菜单，层菜单moveMenu 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"> 
 
 
<meta content="MSHTML 5.00.2920.0" name="GENERATOR"> 
 
<div class="maskl" id="menuPos" style="HEIGHT: 216px; LEFT: 115px; POSITION: absolute; TOP: 59px; WIDTH: 132px; Z-INDEX: 1"> 
<div id="menu1" onmouseout="menuBack(1)" onmouseover="menuOut(1)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1"> 
<div 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">选项一</td></tr> 
<tr> 
<td class="td1">选项二</td></tr> 
<tr> 
<td class="td1">选项三</td></tr> 
<tr> 
<td class="td1">选项四</td></tr> 
<tr> 
<td> </td></tr></tbody></table></div> 
<table border="0" cellpadding="0" cellspacing="0" width="100"> 
<tbody> 
<tr> 
<td height="18" width="14">[img]http://www.1sucai.cn/jscss/demoimg/201212/stang.gif[/img]
</td> 
<td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡一</td></tr></tbody></table></div> 
<div id="menu2" onmouseout="menuBack(2)" onmouseover="menuOut(2)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 20px; WIDTH: 130px; Z-INDEX: 1"> 
<div 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">选项一</td></tr> 
<tr> 
<td class="td1">选项二</td></tr> 
<tr> 
<td class="td1">选项三</td></tr> 
<tr> 
<td class="td1">选项四</td></tr> 
<tr> 
<td> </td></tr></tbody></table></div> 
<table border="0" cellpadding="0" cellspacing="0" width="100"> 
<tbody> 
<tr> 
<td height="18" width="14">[img]http://www.1sucai.cn/jscss/demoimg/201212/stang.gif[/img]
</td> 
<td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡二</td></tr></tbody></table></div> 
<div id="menu3" onmouseout="menuBack(3)" onmouseover="menuOut(3)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 40px; WIDTH: 130px; Z-INDEX: 1"> 
<div 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">选项一</td></tr> 
<tr> 
<td class="td1">选项二</td></tr> 
<tr> 
<td class="td1">选项三</td></tr> 
<tr> 
<td class="td1">选项四</td></tr> 
<tr> 
<td> </td></tr></tbody></table></div> 
<table border="0" cellpadding="0" cellspacing="0" width="100"> 
<tbody> 
<tr> 
<td height="18" width="14">[img]http://www.1sucai.cn/jscss/demoimg/201212/stang.gif[/img]
</td> 
<td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡三</td></tr></tbody></table></div> 
<div id="menu4" onmouseout="menuBack(4)" onmouseover="menuOut(4)" style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 60px; WIDTH: 130px; Z-INDEX: 1"> 
<div 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">选项一</td></tr> 
<tr> 
<td class="td1">选项二</td></tr> 
<tr> 
<td class="td1">选项三</td></tr> 
<tr> 
<td class="td1">选项四</td></tr> 
<tr> 
<td> </td></tr></tbody></table></div> 
<table border="0" cellpadding="0" cellspacing="0" width="100"> 
<tbody> 
<tr> 
<td height="18" width="14">[img]http://www.1sucai.cn/jscss/demoimg/201212/stang.gif[/img]
</td> 
<td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡四</td></tr></tbody></table></div> 
<div id="menu5" onmouseout="menuBack(5)" onmouseover="menuOut(5)" style="HEIGHT: 134px; LEFT: 30px; POSITION: absolute; TOP: 80px; WIDTH: 130px; Z-INDEX: 1"> 
<div 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">选项一</td></tr> 
<tr> 
<td class="td1">选项二</td></tr> 
<tr> 
<td class="td1">选项三</td></tr> 
<tr> 
<td class="td1">选项四</td></tr> 
<tr> 
<td> </td></tr></tbody></table></div> 
<table border="0" cellpadding="0" cellspacing="0" width="100"> 
<tbody> 
<tr> 
<td height="18" width="14">[img]http://www.1sucai.cn/jscss/demoimg/201212/stang.gif[/img]
</td> 
<td bgcolor="#99ccff" class="cardtitle" height="14" width="86">选项卡五</td></tr></tbody></table></div></div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：仿新浪微博首页"大家正在说"渐入轮显效果
下一篇：几个不错的自动收缩菜单导航效果

资讯排行榜
更多>>

鼠标触发移动的分层菜单 层菜单moveMenu

鼠标触发移动的分层菜单层菜单moveMenu