首页网页特效库

首页 > 特效 > 导航菜单 > 正文

隐藏菜单效果

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按钮菜单效果; 左侧隐藏的菜单

网站首页 | 关于我们 | 游客留言 | 网站地图 | 免责声明 | 返回顶部