当前位置: 主页->网页特效专栏->页面导航->很Cool and Cool 的图形渐隐导航菜单栏
栏目导航
网页特效
  典型特效 状态栏
  游戏类 页面背景
  页面特效 页面导航
  文本操作 文本特效
  图形特效 鼠标特效
  时间日期 密码类
  浏览相关 警告对话
  技巧类 计数转换
  测试搜索 代码生成
  播放音乐 按钮特效
  系统相关 链接特效
  黑客性质 相关特效
  窗口特效 其它特效
最新更新
 
 
 
 
 
 
 
 
 
 
热点文章
 
 
 
 
 
 
 
 
 
 

很Cool and Cool 的图形渐隐导航菜单栏

夜鹰电脑教学网 加入日期:2005-04-08 21:30:00 点击数:

查看:[大字体 中字体 小字体]

说明: 很Cool and Cool 的图形渐隐导航菜单栏

效果: 点这里看效果!

代码:


<html>
<head>
<title>网页特效 页面导航 很Cool and Cool 的图形渐隐导航菜单栏 夜鹰电脑教学网</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="网页特效,页面导航,Cool,图形渐隐导航菜单栏,夜鹰电脑教学网">
<style type=text/css>
body { background:#799AE1; margin:0px; font:normal 12px 宋体; }
table { border:0px; }
td { font:normal 12px 宋体; }
img { vertical-align:bottom; border:0px; }
a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; }
a:hover { color:#428EFF }
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; }
.menu_title { }
.menu_title span { position:relative; top:2px; left:8px; color:#215DC6; font-weight:bold; }
.menu_title2 { }
.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; }
</style>
<script language=javascript>
function menuShow(obj,maxh,obj2)
{
if(obj.style.pixelHeight<maxh)
{
obj.style.pixelHeight+=maxh/20;
obj.filters.alpha.opacity+=5;
obj2.background="title_bg_hide.gif";
if(obj.style.pixelHeight==maxh/10)
obj.style.display='block';
myObj=obj;
myMaxh=maxh;
myObj2=obj2;
setTimeout('menuShow(myObj,myMaxh,myObj2)','5');
}
}
function menuHide(obj,maxh,obj2)
{
if(obj.style.pixelHeight>0)
{
if(obj.style.pixelHeight==maxh/20)
obj.style.display='none';
obj.style.pixelHeight-=maxh/20;
obj.filters.alpha.opacity-=5;
obj2.background="title_bg_show.gif";
myObj=obj;
myMaxh=maxh
myObj2=obj2;
setTimeout('menuHide(myObj,myMaxh,myObj2)','5');
}
else
if(whichContinue)
whichContinue.click();
}
function menuChange(obj,maxh,obj2)
{
if(obj.style.pixelHeight)
{
menuHide(obj,maxh,obj2);
whichOpen='';
whichcontinue='';
}
else
if(whichOpen)
{
whichContinue=obj2;
whichOpen.click();
}
else
{
menuShow(obj,maxh,obj2);
whichOpen=obj2;
whichContinue='';
}
}
</script>
<base target=main>
</head>
<body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;">
<table cellpadding=0 cellspacing=0 width=158 align=center>
<tr style="cursor:hand;">
<td height=42 valign=bottom>
<img src=title.gif width=158 height=38>
</td>
</tr>
</table>

<table cellpadding=0 cellspacing=0 width=158 align=center>
<tr style="cursor:hand;">
<td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=title_bg_hide.gif id=menuTitle1 onclick="menuChange(menu1,80,menuTitle1);">
<span>系统选项</span> </td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158px;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_safe.gif>
安全选项</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_recycle.gif>
垃圾邮件选项</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_dynamic.gif>
动态规则选项</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language=javascript>
var whichOpen=menuTitle1;
var whichContinue='';
</script>

<table cellpadding=0 cellspacing=0 width=158 align=center>
<tr style="cursor:hand;">
<td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=title_bg_show.gif id=menuTitle2 onclick="menuChange(menu2,120,menuTitle2);">
<span>系统规则</span> </td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu2>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_ip.gif>
IP过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_mailer.gif>
信封过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_mailheader.gif>
信头过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_mailbody.gif>
信体过滤规则</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_accessory.gif>
附件过滤规则</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table cellpadding=0 cellspacing=0 width=158 align=center>
<tr style="cursor:hand;">
<td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=title_bg_show.gif id=menuTitle3 onclick="menuChange(menu3,120,menuTitle3);">
<span>系统管理</span> </td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu3>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_user.gif>
用户管理</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_course.gif>
进程管理</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_host.gif>
主机运行状态</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_data.gif>
数据备份</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_recycle.gif>
垃圾目录管理</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table cellpadding=0 cellspacing=0 width=158 align=center>
<tr style="cursor:hand;">
<td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=title_bg_show.gif id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4);">
<span>系统统计</span> </td>
</tr>
<tr>
<td>
<div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu4>
<table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;">
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_ip.gif>
IP过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_mailer.gif>
信封过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_mailheader.gif>
信头过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_mailbody.gif>
信体过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_accessory.gif>
附件过滤统计</a>
</td>
</tr>
<tr>
<td height=20>
<a href=http://www.yy0736.com onfocus=this.blur();><img src=icon_dynamic.gif>
动态规则统计</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table cellpadding=0 cellspacing=0 width=158 align=center>
<tr style="cursor:hand;">
<td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=title_bg_quit.gif>
<span>退出系统</span> </td>
</tr>
</table>
</body>

</html>

作者:佚名 来源: 网上转帖  

   

上篇:一个很漂亮的转入别的页面时等待页!   下篇:非常简单的导航“菜块” 呵


[夜鹰论坛] [我要留言] [关闭窗口] [ ][TOP]

此文章最新评论(不超过十条)
■评论此文章 ( 有问题请去夜鹰论坛发帖 )
共有评论: 查看全部评论 姓名:
【 声明 】 您所发表的言论将被众多网友阅读,因此,您所发表的言论应不违反中国法律,不违背一般的道德原则,否则,您必须对您的不当言论引发的一切不良后果负责;此外,我们的管理员有权删除您发表的不当言论,谢谢合作!