网页设计中不错的二级导航菜单特效

{$MY_网站顶部} {$MY_频道栏目导航} {$MY_网站通栏广告} {$MY_频道导航}

网页设计中不错的二级导航菜单特效

网页设计中不错的二级导航菜单特效
副标题：
作者：佚名文章来源：网页教学网点击数：更新时间：2008-1-3 22:36:11


网页特效代码，网页设计中不错的导航，而且有二级导航啊！并且符合网站标准。效果相当不错哦！ <!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>Horizontal Drop Down Menus</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type=text/javascript> /** 菜单的构造,需要绑定到onload / startList = function() { if (document.all&&document.getElementById) { dropmenuRoot = document.getElementById("dropmenu"); for (i=0; i<dropmenuRoot.childNodes.length; i++) { node = dropmenuRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; //开始灌水 for(j=0;j<this.childNodes.length;j++){ if (this.childNodes[j].nodeName=="UL"){ if (this.childNodes[j].childNodes[0].nodeName=="LI"){ if (this.offsetLeft+this.childNodes[j].childNodes.lengththis.childNodes[j].childNodes[0].offsetWidth-dropmenuRoot.offsetLeft>dropmenuRoot.offsetWidth){ var len=this.childNodes[j].childNodes.lengththis.childNodes[j].childNodes[0].offsetWidth; //菜单的长度 (len>dropmenuRoot.offsetWidth) ? this.childNodes[j].style.width=776+"px" : this.childNodes[j].style.width=len+"px"; //给ul设置宽度如果子菜单比较多，大于容器的宽度，那么ul的宽度就是容器的宽度 len =this.offsetLeft+len-dropmenuRoot.offsetLeft-dropmenuRoot.offsetWidth; (len>this.offsetLeft-dropmenuRoot.offsetLeft) ? this.childNodes[j].style.marginLeft=-(this.offsetLeft-dropmenuRoot.offsetLeft) : this.childNodes[j].style.marginLeft=-len+"px"; } } } } } //灌水完毕 node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> </head> <style type="text/css"> body { font: normal 11px verdana; background: #45b97c; position:absolute } ul { margin: 0; padding: 0; } li { list-style-position: outside; list-style: none;} a { text-decoration: none; color: #666;} ul#dropmenu,ul#dropmenu ul{ margin: 0 auto; text-align: left; padding: 0; list-style: none; z-index: 99; } ul#dropmenu { width: 774px; display: block; height: 24px; clear: both; border: 1px solid #ccc; text-align: center; background: #fff; } ul#dropmenu li { position: relative; z-index: 999; float: left; } ul#dropmenu ul li{ float: left; display: block; } ul#dropmenu ul { /width: 122px; w\idth: 120px;/ height: auto; position: absolute; text-align: left; left: 0px; display: none; border: solid 1px #ccc; } /当鼠标在子菜单和父菜单上时，父菜单的样式/ ul#dropmenu li.over a,ul#dropmenu li:hover a{ border-color: #ccc; background: #c00; color: #fff; } /将子菜单的样式清除/ ul#dropmenu li.over ul a,ul#dropmenu li:hover ul a{ font-weight: normal; color: #666; background: #fff;; } /子菜单的hover样式/ ul#dropmenu li.over ul a:hover,ul#dropmenu li:hover ul a:hover{ font-weight: normal; color: #cc0000; font-weight: bold; background: #f6f6f6; } /* Styles for Menu Items / ul#dropmenu a { display: block; padding: 0 0 0 10px; width: 106px; w\idth: 96px; color: #666; line-height: 24px; } ul#dropmenu ul li{ width: 110px; border: 0; } / End / ul#dropmenu ul a { FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=70); / 透明 / padding: 2px 0px 2px 10px; border: 0; width: 120px; w\idth: 110px;/ Sub Menu Styles / } ul#dropmenu li:hover ul,ul#dropmenu li.over ul { display: block; / The magic */ } </style> <body> <div id="nav"> <ul id="dropmenu"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Offices</a></li> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Drop Down Menu</a></li> </ul> </li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
文章录入：布冰责任编辑：布冰

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。本站地址：Http://Www.Gzwm.Net
	上一篇文章：网页特效：个性化的网页按钮下一篇文章：没有了
【字体：小大】发表评论加入收藏告诉好友打印此文关闭窗口

	[组图]Photoshop创意打
	[组图]photoshop教程：
	[组图]photoshop调色教
	[组图]让你操作Windows
	《浴女》—CD网格实战大
	《浴女》—CD网格实战大
	用coreldraw绘制国画荷
	用Coreldraw设计家装彩

	Photoshop教程:冷色调M
	Dreamweaver制作网页13
	自己动手修改QQ等级
	QQ空间播放多首背景音乐
	QQ空间免费领养5级植物
	QQ鼠年新年贺词发给好
	能上QQ却打不开网页的原
	贵州数据提供100M永久免

用鼠标直接动态改
网页特效代码：模
网页中弹出小窗口
网页中弹出小窗口
关于限制网页表单

Photoshop创意打造奇

photoshop教程：酒久

photoshop调色教程：

让你操作Windows于弹

（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

{$MY_2006网页通用底部}