28 November 2009

一款简洁的下拉导航菜单代码

先看下下面的效果图吧：

破解激活 杀毒软件 系统相关 Windows 7 软件相关 资讯知识 其他文章

怎么样？还不赖吧。代码中个别部分需要自己修改成自己的东西，如果有什么不懂的可以在本页下面给我留言。由于整体代码很长，而且直接放在这里会影响网页排版，导致错位，所以我将其保存在记事本存入网盘中。

网盘下载地址

最新修改版：

<script language="JavaScript" type="text/javascript">

//<![CDATA[

function MM_findObj(n, d) { //v4.0

var p,i,x;if(!d) d=document;if((p=n.indexOf("?"))>0 && parent.frames.length){

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n]) && d.all) x=d.all[n]; for (i=0;!x && i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x && d.layers && i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && document.getElementById) x=document.getElementById(n); return x;}

function MM_showHideLayers() { //v3.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

obj.visibility=v; }}

//showhidelayer

 

function mOvr(src, cOvr)

{if (!src.contains(event.fromElement)) {src.style.cursor = "default";src.bgColor = cOvr;}}

function mOut(src, cOut)

{if (!src.contains(event.toElement)) {src.style.cursor = "default";src.bgColor = cOut;}}

//changetdcolor

//]]>

</script>

<table border="1" cellpadding="1" cellspacing="1" width="550">

<tbody>

<tr align="middle" class="dmenu">

<td>

<div id="menu03" style="POSITION: absolute">

<div id="product" onmouseout="MM_showHideLayers('product','','hide')" onmouseover="MM_showHideLayers('product','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 12">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="154">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="150">

<colgroup span="2">

<col width="55%" />

<col width="45%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">破解激活升级专区</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','show','help','','hide' )"><b>破解激活</b></a>

</td>

<td>

<div id="menu01" style="POSITION: absolute">

<div id="sub" onmouseout="MM_showHideLayers('sub','','hide')" onmouseover="MM_showHideLayers('sub','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 11">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="104">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="100">

<colgroup span="3">

<col width="33%" />

<col width="33%" />

<col width="34%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">ESET NOD32</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">卡巴斯基</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">其他安全相关</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','show','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"><b>杀毒软件</b></a>

</td>

<td>

<div id="menu02" style="POSITION: absolute">

<div id="mo" onmouseout="MM_showHideLayers('mo','','hide')" onmouseover="MM_showHideLayers('mo','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 12">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="104">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="100">

<colgroup span="0">

<col width="55%" />

<col width="45%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">系统资源</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">系统相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">vista相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">Xp 相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">系统优化</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">Windows 8</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">Chrome OS</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">Mac OS X</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">linux 相关</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','show','brand','','hide','feature','','hide','product','','hide','help','','hide' )"><b>系统相关</b></a>

</td>

<td>

<div id="menu03" style="POSITION: absolute">

<div id="brand" onmouseout="MM_showHideLayers('brand','','hide')" onmouseover="MM_showHideLayers('brand','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 12">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="154">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="150">

<colgroup span="2">

<col width="55%" />

<col width="45%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">Windows 7专区</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','show','feature','','hide','product','','hide','help','','hide' )"><b>Windows

7</b></a>

</td>

<td>

<div id="menu03" style="POSITION: absolute">

<div id="help" onmouseout="MM_showHideLayers('help','','hide')" onmouseover="MM_showHideLayers('help','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 12">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="104">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="100">

<colgroup span="2">

<col width="55%" />

<col width="45%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">破解软件</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">软件绿化</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">常用软件</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">上传下载</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">office相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">美化相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">驱动相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">媒体相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">文件保存</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">打字输入</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">压缩相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">网页浏览</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">聊天交流</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','show' )"><b>软件相关</b></a>

</td>

<td>

<div id="menu03" style="POSITION: absolute">

<div id="ring" onmouseout="MM_showHideLayers('ring','','hide')" onmouseover="MM_showHideLayers('ring','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 12">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="104">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="100">

<colgroup span="2">

<col width="55%" />

<col width="45%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">资讯知识</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">破解教程</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">信息查询</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','show','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"><b>资讯知识</b></a>

</td>

<td>

<div id="menu04" style="POSITION: absolute">

<div id="feature" onmouseout="MM_showHideLayers('feature','','hide')" onmouseover="MM_showHideLayers('feature','','show')" style=

"HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 13">

<table bgcolor="#3C8830" border="0" cellpadding="1" cellspacing="1" width="104">

<tbody>

<tr bgcolor="#A5DB97">

<td align="middle">

<table border="0" cellpadding="4" cellspacing="1" class="46C92F" width="100">

<colgroup span="1">

<col width="55%" />

<col width="45%" />

</colgroup>

 

<tbody>

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">其他文章</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">虚拟机</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">刻录相关</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">网站代码</a>

</td>

</tr>

 

<tr bgcolor="#FAFEF4">

<td>

<a class="pt03" href="/">游戏相关</a>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<a class="menu" href="/" onmouseout=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide' )"

onmouseover=

"MM_showHideLayers ('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','show','product','','hide','help','','hide' )"><b>其他文章</b></a>

</td>

</tr>

</tbody>

</table>

相关文章：

利用jimdo自带"博客显示"功能实现"最近更新"功能及其修饰美化

一款二分栏、灰黑色调、DIV+CSS布局的jimdo模板-诸葛草帽

诸葛草帽电脑工作室出现谷歌网站链接（Google Sitelinks）兼谈sitelinks如何触发？

jimdo技巧-jimdo留言、博文评论输入框在IE6下的小“bug”修复

jimdo技巧-jimdo留言、评论、博文中含有较长网址链接导致网页出现问题的解决方法

网站优化：页面代码体积大小与SEO的关系

jimdo网站优化-验证你的网页是否符合W3C标准

网站向谷歌网站管理员工具提交sitemap，让google成为你的忠实读者

巧用谷歌阅读器（google reader）实现网站自动调用“最近更新”模块

jimdo添加QQ在线状态

Google和百度站内搜索代码（乱码修正）

Tags: 网站代码, jimdo

Write a comment

Comments: 2
  • #1

    yuyehong (Saturday, 13 February 2010 15:24)

    我要一份。我QQ：184272460

  • #2

    诸葛草帽 (Saturday, 13 February 2010 16:46)

    回复yuyehong：代码在我的网盘中，文中提到了，下载地址：http://down.qiannao.com/space/file/zhugecaomao/-4e0a-4f20-5206-4eab/-7b80-6d01-4e0b-62c9-5bfc-822a-83dc-5355.txt/.page