您现在的位置: 365建站网 > 365学习 > 隐藏于网页左侧,鼠标单击展开的CSS菜单代码

隐藏于网页左侧,鼠标单击展开的CSS菜单代码

文章来源:365jz.com     点击数:994    更新时间:2011-03-03 10:36   参与评论

代码简介:

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

代码内容:

HTML;gutter:false;><!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>隐藏于网页左侧,鼠标单击展开的CSS菜单代码_PQ秀秀网(www.365jz.com)</title>
<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=""> <a href="#" onClick="moveOnMenu();moveOffSelector()">   
  <img src="/uploads/allimg/201103/20110303134312501.gif" border="0"></a></div>  
<div id="menuShow" style="" align="center"> <a href="#" onClick="moveOffMenu();moveOnSelector()">   
  <img src="/uploads/allimg/201103/20110303134312763.gif" border="0"></a> <br>  
<a href="/">PQ秀秀网</a><br>
<a href="https://www.365jz.com">ASP</a><br>
<a href="/">PHP</a><br>
<a href="/">.NET</a><br>
<a href="/">脚本资源</a><br>
<a href="https://www.365jz.com">jQuery</a><br>
<a href="/">电子书籍</a><br>
<a href="https://www.365jz.com">工具软件</a>
</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>  
<br>
<a href="https://www.365jz.com">网页代码站</a> - PQ秀秀网!

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (994人查看-2条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------