首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
导航菜单
> 正文
隐藏菜单效果
2009-11-24 导航菜单 230℃
<style> #menuShow{ border: 1px solid #999999; background-color: #cccccc; padding: 0px; font-size: 10px; font-family: tahoma; position: absolute; width: 161px; height: auto; } #menuSelect{ border: 1px solid #999999; background-color: #cccccc; padding: 0px; font-size: 10px; font-family: tahoma; position: absolute; width: 161px; height: 24px; } a { font-family: "tahoma"; font-size: 10px; line-height: 16px; color: #333333; text-decoration: none} a:hover { font-family: "tahoma"; font-size: 10px; line-height: 16px; color: #FFFFFF; text-decoration: none} </style> <body bgcolor="#FFFFFF" text="#000000"> <div id="menuSelect" style=""> <a href="#" onClick="moveOnMenu();moveOffSelector()"> <img src="jsfile/bb2/2.gif" width="161" height="24" border="0"></a></div> <div id="menuShow" style="" align="center"> <a href="#" onClick="moveOffMenu();moveOnSelector()"> <img src="jsfile/bb2/1.gif" width="161" height="24" border="0"></a> <br> <a href="/">网页特效</a><br> <a href="/">资料库</a><br> <a href="/">Menu Item C</a><br> <br> <a href="/">Menu Item D</a><br> <a href="/">Menu Item E</a><br> <br> <a href="/">Menu Item F</a><br> <a href="/">Menu Item G</a><br> <a href="/">Menu Item H</a><br> </div> <SCRIPT LANGUAGE="JavaScript"> // Set Show to "yes" to show the menu on start-up. // Set Show to "no" to show the selector on start-up. Show ="no"; // Set OffX in pixels to a negative number // somewhat larger than the width of the menu. var OffX = -200; // Set the PosX and PosY variables // to the location on the screen where the // menu should position (in pixels) when stopped. var PosX = 10; var PosY = 10; // Usually, use the settings shown; but you can // change the speed and the increment of motion // across the screen, below. var speed = 5; var increment = 5; var incrementNS4 = 5; // for slower NS4 browsers // do not edit below this line // =========================== var is_NS = navigator.appName=="Netscape"; var is_Ver = parseInt(navigator.appVersion); var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5; var is_NS5up = is_NS&&is_Ver>=5; var MenuX = OffX; var SelX = PosX; var sPosX = PosX; var sOffX = OffX; if (Show == "yes") { sPosX = OffX; sOffX = PosX; MenuX = sOffX; SelX = sPosX; } if (is_NS4) { increment = incrementNS4; Lq = "document.layers."; Sq = ""; eval(Lq+'menuSelect'+Sq+'.left=sPosX'); eval(Lq+'menuShow'+Sq+'.left=sOffX'); eval(Lq+'menuSelect'+Sq+'.top=PosY'); eval(Lq+'menuShow'+Sq+'.top=PosY'); } else { Lq = "document.all."; Sq = ".style"; document.getElementById('menuSelect').style.left = sPosX+"px"; document.getElementById('menuShow').style.left = sOffX+"px"; document.getElementById('menuSelect').style.top = PosY+"px"; document.getElementById('menuShow').style.top = PosY+"px"; } function moveOnMenu() { if (MenuX < PosX) { MenuX = MenuX + increment; if (is_NS5up) { document.getElementById('menuShow').style.left = MenuX+"px"; } else { eval(Lq+'menuShow'+Sq+'.left=MenuX'); } setTimeout('moveOnMenu()',speed); } } function moveOffMenu() { if (MenuX > OffX) { MenuX = MenuX - increment; if (is_NS5up) { document.getElementById('menuShow').style.left = MenuX+"px"; } else { eval(Lq+'menuShow'+Sq+'.left=MenuX'); } setTimeout('moveOffMenu()',speed); } } function moveOffSelector() { if (SelX > OffX) { SelX = SelX - increment; if (is_NS5up) { document.getElementById('menuSelect').style.left = SelX+"px"; } else { eval(Lq+'menuSelect'+Sq+'.left=SelX'); } setTimeout('moveOffSelector()',speed); } } function moveOnSelector() { if (SelX < PosX) { SelX = SelX + increment; if (is_NS5up) { document.getElementById('menuSelect').style.left = SelX+"px"; } else { eval(Lq+'menuSelect'+Sq+'.left=SelX'); } setTimeout('moveOnSelector()',speed); } } </script>
相关特效代码
无相关信息
热门特效代码
三级竖向展开/收缩导航菜单
鼠标指向弹出菜单
jQuery 弹出菜单层
CSS二级下拉导航菜单
CSS做的垂直导航菜单效果
横向二级导航菜单
仿google首页下端图片文字动画导
导航链接菜单间隔闪烁
动态翻滚的导航条[酷比flash]
纯CSS的三级联动级联菜单
推荐特效代码
CSS+div+js组合强大实现超酷菜单
动态翻滚的导航条[酷比flash]
CSS横向下拉菜单
微软风格的CSS横向菜单
立体的CSS按钮菜单效果
左侧隐藏的菜单