隐藏在左侧，鼠标点击展开CSS菜单

2024-09-05 12:19:47

字体：大中小

来源：转载

供稿：网友

平时隐藏在左侧的CSS动感菜单，像很多导航菜单一样，不点击的时候隐藏在网页左侧，鼠标放上后自动展开，本款是鼠标点击后才激活，然后动画出现，个人感觉比鼠标放上就触发的要好一点，这样更符合浏览者的意愿。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>隐藏菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>  #menuShow{  border: 1px solid #666666;  background-color: #EEEEEE;  padding: 0px;  font-size: 12px;  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;  }  a {  font-family: "tahoma"; font-size: 12px; line-height: 23px; color: #555555; text-decoration: none}  a:hover {color: #0066CC; text-decoration: none}  </style> </head> <body> <body bgcolor="#FFFFFF" text="#000000">  <div id="menuSelect" style="">      <img src="/d/file/p/2024/09-05/820502eeedee981bd692349048a67e4a.gif" border="0"></div>  <div id="menuShow" style="" align="center">      <img src="/d/file/p/2024/09-05/8c198c940468a0d5997ea8aecb9362dd.gif" border="0">隐藏菜单 <br>ASP<br>PHP<br>.NET<br>脚本资源<br>jQuery<br>电子书籍<br>工具软件</div>  <SCRIPT LANGUAGE="JavaScript">  Show ="no";  var OffX = -200;  var PosX =  10;  var PosY =  10;  var speed        = 5;  var increment    = 5;  var incrementNS4 = 5; 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></body></html>

上一篇：CSS+JSS滚动切换的选项卡【荐】

下一篇：仿淘宝网的网页选项卡（超级漂亮）