在网页左上角隐藏的滑出导航菜单

代码简介:在网页右上角隐藏的滑出菜单,鼠标移过去,菜单自然出现,移开自动隐藏,可以用作副菜单。

代码内容:

<html>
<head>
<title>在网页左上角隐藏的滑出导航菜单_网页代码站(www.webdm.cn)</title>
</head>
<body>
<style type="text/css">
<!--
#menuBar
{position: absolute;left: -200px; width: 300px; top: 0px; clip: rect( )}
#glider
{position: absolute;left: 200px;top: 0px; width: 80px}/* www.webdm.cn */
.glideText
{font-size: 18px;color: #E2E2E2;text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif}
a:link
{ color: #D7D7D7; text-decoration: none}
a:visited
{ color: #E0E0E0; text-decoration: none}
a:active
{ color: #333333; text-decoration: none}
a:hover
{ color: #333333}
.mentd
{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; background-color: #999999; background-image:

url(graygrid2.gif)
}
td
{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333}
h1
{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF}
-->
</style>
<script language="JavaScript">
<!--
var pee = -200
var drec = 40;
var speed = 20;
var l = pee;
function Proj7GlideBack () {l += drec;
if (document.layers) {
document.menuBar.left
= l;
}
else if (document.all) {document.all.menuBar.style.pixelLeft = l;
}
else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px';
}
if (l < 0)
setTimeout(
'Proj7GlideBack()', speed);

else {
if (document.layers) {
var html = '';
html
+= '<A HREF="javascript:;"';
html
+= 'onClick="Proj7GlideOut(); return false;"';
html
+= 'Class="glideText"';
html
+= 'close'+ '<br>';
html
+= 'close'+ '<Br>';
html
+= '<\/A>';
var a = window.document.menuBar.document.glider;
a.document.open();
a.document.write(html);
a.document.close();
}
else if (document.all) {document.all.glidetextLink.innerHTML = 'close';
document.all.glidetextLink.onclick
= moveIn;
}
else if (document.getElementById) {
document.getElementById(
'glidetextLink').firstChild.nodeValue ='close';
document.getElementById(
'glidetextLink').onclick = moveIn;
}
}
}

function Proj7GlideOut () {l -= drec;
if (document.layers) {document.menuBar.left = l;
}
else if (document.all) {document.all.menuBar.style.pixelLeft = l;
}
else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px';
}
if (l > pee)
setTimeout(
'Proj7GlideOut()', speed);
else {
if (document.layers) {
var html = '';
html
+= '<A HREF="javascript:;"';
html
+= 'onclick="Proj7GlideBack(); return false;"';
html
+= 'Class="glideText"';
html
+= 'menu'+ '<Br>';
html
+= 'menu'+ '<Br>';
html
+= '<\/A>';
var a = window.document.menuBar.document.glider;
a.document.open();
a.document.write(html);
a.document.close();
}
else if (document.all) {document.all.glidetextLink.innerHTML = 'Menu';
document.all.glidetextLink.onclick
= moveOut;
}
else if (document.getElementById) {
document.getElementById(
'glidetextLink').firstChild.nodeValue = 'Menu';
document.getElementById(
'glidetextLink').onclick = moveOut;
}
}
}
function moveIn () {Proj7GlideOut();return false;
}
function moveOut() {Proj7GlideBack();return false;
}
<!--NNresizeFix Reloads the page to workaround a Netscape Bug-->
if (document.layers) {
origWidth
= innerWidth;
origHeight
= innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (document.layers) onresize = redo;
//-->
</script>
<div ID="menuBar" style="">
<table width="272" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
<tr>
<td>
<table width="100%" border="0" cellpadding="8" cellspacing="1">
<tr>
<td bgcolor="#FF9900" valign="top" class="mentd">
<a href="/" onFocus="if(this.blur)this.blur()" class="menu">网页特效</a><Br>
<a href="http://www.webdm.cn" onFocus="if(this.blur)this.blur()" class="menu">网站开发</a><Br>
<a href="http://www.webdm.cn" onFocus="if(this.blur)this.blur()" class="menu">电子书籍</a><Br>
<a href="/" onFocus="if(this.blur)this.blur()" class="menu">站长工具</a><Br>
<a href="http://www.webdm.cn" onFocus="if(this.blur)this.blur()" class="menu">网页特效</a><Br>
<a href="/" onFocus="if(this.blur)this.blur()" class="menu">论坛系统</a>
</td>
<td width="72" bgcolor="#CC0000"> </td>
</tr>
</table>
</td>
</tr>
</table>
<span ID="glider" style="">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><a id="glidetextLink"
href
="javascript:;"
class
="glideText"
onClick
="Proj7GlideBack(); return false" onFocus="if(this.blur)this.blur()">Menu</a></td>
</tr>
</table></span> </div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/dec2a8ba-9c04-4dca-b071-472773a3d898.html

原文地址:https://www.cnblogs.com/webdm/p/1948170.html