鼠标触发型导航菜单

经常在一些网站上看到这样的效果,感觉很不错,很好看还节省页面空间

1 把如下代码复制到与之间


2 把如下代码复制到与之间

网页特效集锦 网页工具库1 网页工具库2 网页工具库3

示例:

<html>
<head>

<style type="text/css">
<!--
.ww1 {width:500px;background-color:#D1E7FC;border-top:1px solid #9EC9EC;border-left:1px solid #9EC9EC;}
.ww1 td {border-right:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;height:28px;text-align:center;width:125px;font-size:12px;cursor:hand;}
.ww1 td.s {border-bottom:1px solid #FFFFFF;font-weight:bold;background-color:#FFFFFF;}
.ww2 {width:500px;border-right:1px solid #9EC9EC;border-top:none;border-left:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;font-size:12px;}
.ww2 a:link {color:#00007f;text-decoration:none;}
.ww2 a:visited {color:#800080;text-decoration:none;}
.ww2 a:hover {color:#00007f;text-decoration:underline;}
.ww2 a:active {color:#00007f;text-decoration:underline;}
.dis {display:block}
.undis {display:none}
-->
</style>
<script>
	function getNames(obj,name,tij)
	{	
		var p = document.getElementById(obj);
		var plist = p.getElementsByTagName(tij);
		var rlist = new Array();
		for(i=0;i<plist.length;i++)
		{
			if(plist<span style="text-decoration: line-through;">.getAttribute("name") == name)
			{
				rlist[rlist.length] = plist<span style="text-decoration: line-through;">;
			}
		}
		return rlist;
	}

		function butong_net(obj,name)
		{
			var p = obj.parentNode.getElementsByTagName("td");
			var p1 = getNames(name,"f","div");
			for(i=0;i<p1.length;i++)
			{
				if(obj==p<span style="text-decoration: line-through;">)
				{
					p<span style="text-decoration: line-through;">.className = "s";
					p1<span style="text-decoration: line-through;">.className = "dis";
				}
				else
				{
					p<span style="text-decoration: line-through;">.className = "";
					p1<span style="text-decoration: line-through;">.className = "undis";
				}
			}
		}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="ww1">
 <tr>
   <td class="s" onmouseover="butong_net(this,'butong_net1')">网页特效集锦</td>
   <td onmouseover="butong_net(this,'butong_net1')">网页工具库1</td>
   <td onmouseover="butong_net(this,'butong_net1')">网页工具库2</td>
   <td onmouseover="butong_net(this,'butong_net1')">网页工具库3</td>
 </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="ww2">
 <tr>
   <td height="60" align="center">
     <div id=butong_net1>
      <div class=dis name="f">
	   <a href="http://lzw.me" target="_blank">背景按钮特效</a>    <a href="http://lzw.me" target="_blank">导航菜单特效</a>    <a href="http://lzw.me" target="_blank">网页图片特效</a>    <a href="http://lzw.me" target="_blank">网页文本特效</a>    <a href="http://lzw.me" target="_blank">另类网页特效</a>
	  </div>
      <div class=undis name="f">
	   <a href="http://lzw.me" target="_blank">在线html编辑器</a>    <a href="http://lzw.me" target="_blank">在线CSS编辑器</a>    <a href="http://lzw.me" target="_blank">网页颜色选择器</a>    <a href="http://lzw.me" target="_blank">滚动条颜色生成器</a>
	  </div>
      <div class=undis name="f">
	   <a href="http://lzw.me" target="_blank">弹出窗口生成器</a>    <a href="http://lzw.me" target="_blank">页面过渡效果生成器</a>    <a href="http://lzw.me" target="_blank">网页加密解密工具</a>
      </div>
      <div class=undis name="f">
	   <a href="http://lzw.me" target="_blank">文本繁简体转换工具</a>    <a href="http://lzw.me" target="_blank">汉字转换成拼音工具</a>    <a href="http://lzw.me" target="_blank">文字加密解密工具</a>
      </div>
     </div>
   </td>
 </tr>
</table>
</body>
</html>
点赞 (0)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code