导航菜单 – 设计之家

网站导航文字左右切换的特效

sj33cn — Sun, 11 Nov 2007 02:51:00 +0000

用CSS实现的文字导航上下切换，还有文本的左右切换，喜欢的话可以自己开发其它功能！

<!–[if IE]><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><![endif]–><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><meta name=”author” content=”sj33″ /><title>yahoo</title><style>* {margin:0;padding:0;font-size:12px;}img {border:none;}ul,ol {list-style:none;}#content {margin:20px auto;border:1px solid #a5b5c0;width:158px;height:241px;background:url(//images.sj33.cn/uploads/allimg/200711/20071111105213563.gif);overflow:hidden;}#title {height:17px;*height:16px;background:url(//images.sj33.cn/uploads/allimg/200711/20071111105214167.gif) repeat-x;border-bottom:1px solid #a5b5c0;padding:3px 0 0 6px;*padding:4px 0 0 6px;font-weight:700;}#title li {float:left;display:inline;width:92px;}#tit_l {float:left;width:92px;overflow:hidden;height:14px;}#tit_r {float:right;margin-top:-1px;*margin-top:-2px;}#tit_r img {margin-right:4px;cursor:pointer;}#tit_r img:hover {filter: Alpha(Opacity=70);-moz-opacity: 0.7;opacity: 0.7;}#text {clear:both;height:210px;}#text ul {background:url(//images.sj33.cn/uploads/allimg/200711/20071111105214306.gif) no-repeat 12px 4px;margin:6px 0;}#text li {padding-left:34px;line-height:21px;}#text li a {color:#123b8d;text-decoration:none;}#text li a:hover {text-decoration:underline;}</style></head><body><P id=”content”><P id=”title”><P id=”tit_l”><P id=”mytit”><ul><li>热门搜索</li><li>热门体育</li><li>热门娱乐</li></ul></P></P><P id=”tit_r”></P></P><P id=”text”><ul id=”c1″><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li><li><a href=”#”>热门搜索的内容</a></li></ul><ul id=”c2″><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li><li><a href=”#”>热门体育的内容</a></li></ul><ul id=”c3″><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li><li><a href=”#”>热门娱乐的内容</a></li></ul></P></P><script type=”text/javascript”>/***File Name:yahooo.js*Author:wuleying*Date:2007/10/26**/var myTitle = document.getElementById(“mytit”);myTitle.innerHTML += myTitle.innerHTML;var lists = myTitle.getElementsByTagName(“li”);var num = lists.length – 2;//alert(num)myTitle.style.width = (num+1) * 92;//计算标题的总长度var ele = document.getElementById(“tit_l”);var w = ele.clientWidth;var n = 18;var t = 40;//数值越小，速度越快var times = new Array(n);var k = 0;var l = 0;yahooo(0);function yahooo(s){if(k >= num && s > 0){ele.scrollLeft = w;k = 1;}if(k < 1 && s < 0){ele.scrollLeft = (num-1) * w;k = num-1;}k += s;var x = ele.scrollLeft;var d = k * w – x;for(i=0;i<n;i++)(function(){if(times[i]) {clearTimeout(times[i])} ;var j = i;times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);})();}var imgs = document.getElementById(“tit_r”).getElementsByTagName(“img”);var c1 = document.getElementById(“c1”);var c2 = document.getElementById(“c2”);var c3 = document.getElementById(“c3”);imgs[0].onclick = function(){yahooo(-1);if(k==0){c1.style.display = “block”;c2.style.display = “none”;c3.style.display = “none”;}if(k==1){c1.style.display = “none”;c2.style.display = “block”;c3.style.display = “none”;}if(k==2){c1.style.display = “none”;c2.style.display = “none”;c3.style.display = “block”;}}imgs[1].onclick = function(){yahooo(1);if(k==0 || k==3){c1.style.display = “block”;c2.style.display = “none”;c3.style.display = “none”;}if(k==1 || k==4){c1.style.display = “none”;c2.style.display = “block”;c3.style.display = “none”;}if(k==2){c1.style.display = “none”;c2.style.display = “none”;c3.style.display = “block”;}}</script></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

自适应宽度的TAB滑动门标签导航

sj33cn — Wed, 24 Oct 2007 17:56:00 +0000

这个TAB滑动门标签，可以自适应宽度，应用起来很方便。

下载地址：/jc/code/oktab.rar

CSS代码:模拟制作techweb网站导航

sj33cn — Wed, 17 Oct 2007 17:04:00 +0000

CSS代码，模拟制作techweb网站导航，你需要吗？效果还和真的差不多呢！

<!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><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><style type=”text/css”><!–#siteNav {clear: both;float:left;width:750px;padding-left: 1px;background: #fff;font-size:12px;font-weight: bold;line-height:normal;border-bottom:2px solid #84B0C7;voice-family: “\”}\””;voice-family: inherit;width: 749px;}#siteNav ul {margin:0;padding:0;list-style:none;}#siteNav li {display:inline;margin:0;padding:0;}#siteNav a {float:left;background:url(//images.sj33.cn/uploads/allimg/200710/20071018010517757.gif) no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}#siteNav a span {float:left;display:block;background:url(//images.sj33.cn/uploads/allimg/200710/20071018010517990.gif) no-repeat right top;padding:5px 11px 4px 5px;color:#036;}/* Commented Backslash Hack hides rule from IE5-Mac \*/#siteNav a span {float:none}/* End IE5-Mac hack */#siteNav a:hover span {color:#036;}#siteNav a:hover {background-position:0% -42px;}#siteNav a:hover span {background-position:100% -42px;}#siteNav #sel a {background-position:0% -42px;}#siteNav #sel a span {background-position:100% -42px;}–></style><title>Demo</title></head><body><P id=”siteNav”><ul><li id=”sel”><a href=”#”><span>首页</span></a></li><li><a href=”#”><span>资讯</span></a></li><li><a href=”#”><span>人物</span></a></li><li><a href=”#”><span>管理</span></a></li><li><a href=”#”><span>经营</span></a></li><li><a href=”#”><span>财经</span></a></li><li><a href=”#”><span>技术</span></a></li><li><a href=”#”><span>产品</span></a></li><li><a href=”#”><span>网络</span></a></li><li><a href=”#”><span>电信</span></a></li><li><a href=”#”><span>评论</span></a></li><li><a href=”#”><span>博客</span></a></li><li><a href=”#”><span>老友记</span></a></li><li><a href=”#”><span>滚动</span></a></li><li><a href=”#”><span>搜索</span></a></li><li><a href=”#”><span>WAP</span></a></li></ul></P></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

精选23种CSS导航条

sj33cn — Mon, 15 Oct 2007 15:16:00 +0000

下载地址: //www.laura-marie.com/jc/menu/menu001.rar

CSS竖向下拉菜单代码

sj33cn — Mon, 15 Oct 2007 14:54:00 +0000

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-CN”><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>css下拉菜单演示</title><style type=”text/css”><!–*{margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; font-size:12px;}#nav { line-height: 24px; list-style-type: none; background:#666;}#nav a { display: block; width: 80px; text-align:center;}#nav a:link { color:#666; text-decoration:none;}#nav a:visited { color:#666;text-decoration:none;}#nav a:hover { color:#FFF;text-decoration:none;font-weight:bold;}#nav li { float: left; width: 80px; background:#CCC;}#nav li a:hover{ background:#999;}#nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute;}#nav li ul li{ float: left; width: 180px; background: #F6F6F6;}#nav li ul a{ display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;}#nav li ul a:link { color:#666; text-decoration:none;}#nav li ul a:visited { color:#666;text-decoration:none;}#nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;}#nav li:hover ul { left: auto;}#nav li.sfhover ul { left: auto;}#content { clear: left;}–></style><script type=text/javascript><!–//–><![CDATA[//><!–function menuFix() { var sfEls = document.getElementById(“nav”).getElementsByTagName(“li”); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? ” “: “”) + “sfhover”; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? ” “: “”) + “sfhover”; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? ” “: “”) + “sfhover”; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(“( ?|^)sfhover\\b”),””); } }}window.onload=menuFix;//–><!]]></script></head><body><ul id=”nav”><li><a href=”#”>产品介绍</a> <ul> <li><a href=”#”>产品一</a></li> <li><a href=”#”>产品一</a></li> <li><a href=”#”>产品一</a></li> <li><a href=”#”>产品一</a></li> <li><a href=”#”>产品一</a></li> <li><a href=”#”>产品一</a></li> </ul></li><li><a href=”#”>服务介绍</a> <ul> <li><a href=”#”>服务二</a></li> <li><a href=”#”>服务二</a></li> <li><a href=”#”>服务二</a></li> <li><a href=”#”>服务二服务二</a></li> <li><a href=”#”>服务二服务二服务二</a></li> <li><a href=”#”>服务二</a></li> </ul></li><li><a href=”#”>成功案例</a> <ul> <li><a href=”#”>案例三</a></li> <li><a href=”#”>案例</a></li> <li><a href=”#”>案例三案例三</a></li> <li><a href=”#”>案例三案例三案例三</a></li> </ul></li><li><a href=”#”>关于我们</a> <ul> <li><a href=”#”>我们四</a></li> <li><a href=”#”>我们四</a></li> <li><a href=”#”>我们四</a></li> <li><a href=”#”>我们四111</a></li> </ul></li><li><a href=”#”>在线演示</a> <ul> <li><a href=”#”>演示</a></li> <li><a href=”#”>演示</a></li> <li><a href=”#”>演示</a></li> <li><a href=”#”>演示演示演示</a></li> <li><a href=”#”>演示演示演示</a></li> <li><a href=”#”>演示演示</a></li> <li><a href=”#”>演示演示演示</a></li> <li><a href=”#”>演示演示演示演示演示</a></li> </ul></li><li><a href=”#”>联系我们</a> <ul> <li><a href=”#”>联系联系联系联系联系</a></li> <li><a href=”#”>联系联系联系</a></li> <li><a href=”#”>联系</a></li> <li><a href=”#”>联系联系</a></li> <li><a href=”#”>联系联系</a></li> <li><a href=”#”>联系联系联系</a></li> <li><a href=”#”>联系联系联系</a></li> </ul></li></ul></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS横向下拉菜单代码

sj33cn — Mon, 15 Oct 2007 14:53:00 +0000

<!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” lang=”zh-CN”><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><meta http-equiv=”Content-Language” content=”zh-CN” /><title>横向下拉菜单</title><style type=”text/css”><!–* {margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; font-size:12px;}#nav { height: 24px; list-style-type: none; padding-left:200px;line-height:24px;overflow:hidden;background:#999;}#nav a { display: block; width: 80px; text-align:center;}#nav a:link { color:#EEE; text-decoration:none;}#nav a:visited { color:#EEE;text-decoration:none;}#nav a:hover { color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;}#nav li { float: left; width: 80px;}#nav li ul { line-height: 24px; list-style-type: none; text-align:left; left: -999px; width: 520px; //注意,这里一定要设置宽度; position: absolute; background:#CCC;}#nav li ul li{ float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float}#nav li ul a{ display: block; width: 65px;text-align:left;padding-left:15px;}#nav li ul a:link { color:#F1F1F1; text-decoration:none;}#nav li ul a:visited { color:#F1F1F1;text-decoration:none;}#nav li ul a:hover { color:#FFF;text-decoration:none;font-weight:normal;background:#C00;}#nav li:hover ul { left:25%;}#nav li.sfhover ul { left:25%;}#content { clear: left;}–></style><script type=text/javascript><!–//–><![CDATA[//><!–function menuFix() { var sfEls = document.getElementById(“nav”).getElementsByTagName(“li”); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? ” “: “”) + “sfhover”; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? ” “: “”) + “sfhover”; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? ” “: “”) + “sfhover”; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(“( ?|^)sfhover\\b”),””); } }}window.onload=menuFix;//–><!]]></script></head><body><ul id=”nav”><li><a href=”#”>菜单一</a> <ul> <li><a href=”#”>菜单一</a></li> <li><a href=”#”>菜单一</a></li> <li><a href=”#”>菜单一</a></li> <li><a href=”#”>菜单一</a></li> <li><a href=”#”>菜单一</a></li> <li><a href=”#”>菜单一</a></li> </ul></li><li><a href=”#”>菜单二</a> <ul> <li><a href=”#”>菜单二</a></li> <li><a href=”#”>菜单二</a></li> <li><a href=”#”>菜单二</a></li> <li><a href=”#”>菜单二</a></li> <li><a href=”#”>菜单二</a></li> </ul></li><li><a href=”#”>菜单三</a> <ul> <li><a href=”#”>菜单三</a></li> <li><a href=”#”>菜单三</a></li> <li><a href=”#”>菜单三</a></li> <li><a href=”#”>菜单三</a></li> <li><a href=”#”>菜单三</a></li> </ul></li><li><a href=”#”>菜单四</a> <ul> <li><a href=”#”>菜单四</a></li> <li><a href=”#”>菜单四</a></li> <li><a href=”#”>菜单四</a></li> <li><a href=”#”>菜单四</a></li> <li><a href=”#”>菜单四</a></li> </ul></li><li><a href=”#”>菜单五</a> <ul> <li><a href=”#”>菜单五</a></li> <li><a href=”#”>菜单五</a></li> <li><a href=”#”>菜单五</a></li> <li><a href=”#”>菜单五</a></li> <li><a href=”#”>菜单五</a></li> </ul></li><li><a href=”#”>菜单六</a> <ul> <li><a href=”#”>菜单六</a></li> <li><a href=”#”>菜单六</a></li> <li><a href=”#”>菜单六</a></li> <li><a href=”#”>菜单六</a></li> <li><a href=”#”>菜单六</a></li> </ul></li></ul></P></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

过渡很平滑的下拉菜单代码

sj33cn — Mon, 15 Oct 2007 03:39:00 +0000

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><title>OpenCube Visual Design Pad – Save Document</title><body><div style=”width:100%; height:400px; padding:30px; padding-top:20px; background-color:#eeeeee; display:none;”><table border=”0″ width=”315″ cellspacing=”0″ cellpadding=”0″><tr><td align=”right”><div style=”font-size:1px;height:5px;”></div></td></tr><tr><td style=”font-family:Arial;font-size:13px;”><b>Quick Save Notice!</b> – This menu will be saved as a Unicode formatted HTML document.<br><br>For a smaller footprint & full cross browser support convert the saved document to ANSI (Use a text-editor to re-save the document.) or use the ‘copy-paste’ save and export options.</td></tr><tr><td align=”right”><div style=”font-size:1px;height:25px;”></div></td></tr><tr><td align=”right”><input onclick=”window.document.execCommand(‘saveAs’);window.close()” type=”button” style=”width:210px;height:26px;font-size:11px;font-family:Arial;” value=”Save to a New HTML Document”></td></tr></table></div><div style=”color:#000000; font-size:14px; font-family:Arial; font-weight:bold;”>Infinite Menus – Saved Document</div><table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″ bgcolor=”#666666″ height=”1″><tr><td></td></tr></table><div style=”font-size:12px; color#000000; font-family:Arial; padding:30px;”>Settings may be manually edited by modifying this documents source HTML. The visual design option may be switched on or off by changing the following parameter setting…<br><br><b>enable_visual_design_mode</b> = true or false – (see the ‘Menu Settings and Styles’ section in the source HTML )<br><br><br><br><!– ********************************** Effect Structure and Links ************************************** –><div><div><div style=”display:none;”><ul id=”imenus0″ style=”width:580px”><li style=”width:145px;”><a href=”#” target=”_new”>Who We Are</a><div><div style=”width:145px;top:0px;left:0px;”><ul style=””><li><a href=”sample_link.html” target=”_new”>Overview</a></li><li><a href=”sample_link.html” target=”_new”>Mission & Goals</a></li><li><a href=”sample_link.html” target=”_new”>History</a></li><li><a href=”sample_link.html” target=”_new”>Management</a></li><li><a href=”sample_link.html” target=”_new”>Working at Tyco</a></li><li><a href=”sample_link.html” target=”_new”>Press Center</a></li><li><a href=”#” target=”_new”>Worldwide</a><div><div style=”width:140px;top:-19px;left:133px;”><ul style=””><li><a href=”sample_link.html” target=”_new”>Europe</a></li><li><a href=”sample_link.html” target=”_new”>Asia</a></li><li><a href=”sample_link.html” target=”_new”>US & Canada</a></li><li><a href=”sample_link.html” target=”_new”>Mexico</a></li><li><a href=”sample_link.html” target=”_new”>Australia</a></li><li><a href=”sample_link.html” target=”_new”>Middle East</a></li></ul></div></div></li><li><a href=”#” target=”_new”>Board of Directors</a><div><div style=”width:140px;top:-18px;left:133px;”><ul style=””><li><a href=”sample_link.html” target=”_new”>Overview</a></li><li><a href=”sample_link.html” target=”_new”>Electronics</a></li><li><a href=”sample_link.html” target=”_new”>Fire & Security</a></li><li><a href=”sample_link.html” target=”_new”>Healthcare</a></li><li><a href=”sample_link.html” target=”_new”>Plastics & Adhesives</a></li><li><a href=”sample_link.html” target=”_new”>Engineered Producs</a></li><li><a href=”sample_link.html” target=”_new”>Tyco Worldwide</a></li></ul></div></div></li><li><a href=”#” target=”_new”>Customers</a></li></ul></div></div></li><li style=”width:145px;”><a href=”#” target=”_new”>Our Commitment</a><div><div style=”width:146px;top:0px;left:-1px;”><ul style=””><li><a href=”sample_link.html” target=”_new”>Overview</a></li><li><a href=”sample_link.html” target=”_new”>People & Values</a></li><li><a href=”sample_link.html” target=”_new”>Governance</a></li><li><a href=”sample_link.html” target=”_new”>Community</a></li><li><a href=”sample_link.html” target=”_new”>Environmental</a></li></ul></div></div></li><li style=”width:145px;”><a href=”#” target=”_new”>Our Business</a><div><div style=”width:146px;top:0px;left:0px;”><ul style=””><li><a href=”sample_link.html” target=”_new”>Overview</a></li><li><a href=”sample_link.html” target=”_new”>Electronics</a></li><li><a href=”sample_link.html” target=”_new”>Fire & Security</a></li><li><a href=”sample_link.html” target=”_new”>Healthcare</a></li><li><a href=”sample_link.html” target=”_new”>Plastics & Adhesives</a></li><li><a href=”sample_link.html” target=”_new”>Engineered Producs</a></li><li><a href=”sample_link.html” target=”_new”>Tyco Worldwide</a></li></ul></div></div></li><li style=”width:145px;”><a href=”#” target=”_new”>Investors</a><div><div style=”width:146px;top:0px;left:-1px;”><ul style=””><li><a href=”sample_link.html” target=”_new”>Overview</a></li><li><a href=”sample_link.html” target=”_new”>Stock Quotes</a></li></ul></div></div></li></ul><div style=”clear:left;”></div></div></div></div><!– ********************************** Menu Settings & Styles ********************************** –><script language=”JavaScript”>function imenus_data0(){this.unlock = “Add your unlock statement here.”this.enable_visual_design_mode = truethis.main_is_horizontal = truethis.menu_showhide_delay = 150/*———————————————Optional Box Animation Settings———————————————*///set to… “parent”, “center”, “random top”, “random left”, or “page x,y”this.box_animation_type = “center”this.box_animation_frames = 12this.box_animation_styles = “border-style:solid; border-color:#999999; border-width:1px; “/*———————————————Images (expand and pointer icons)———————————————*/this.main_expand_image = ‘//images.sj33.cn/uploads/allimg/200710/20071015114944211.gif’this.main_expand_image_hover = ‘//images.sj33.cn/uploads/allimg/200710/20071015114944211.gif’this.main_expand_image_width = ‘7’this.main_expand_image_height = ‘5’this.main_expand_image_offx = ‘0’this.main_expand_image_offy = ‘5’this.sub_expand_image = ‘//images.sj33.cn/uploads/allimg/200710/20071015114945598.gif’this.sub_expand_image_hover = ‘//images.sj33.cn/uploads/allimg/200710/20071015114945598.gif’this.sub_expand_image_width = ‘5’this.sub_expand_image_height = ‘7’this.sub_expand_image_offx = ‘0’this.sub_expand_image_offy = ‘3’this.main_pointer_image = ‘//images.sj33.cn/uploads/allimg/200710/20071015114946472.gif’this.main_pointer_image_width = ’10’this.main_pointer_image_height = ’11’this.main_pointer_image_offx = ‘-3’this.main_pointer_image_offy = ‘-4’this.sub_pointer_image = ‘//images.sj33.cn/uploads/allimg/200710/20071015114946205.gif’this.sub_pointer_image_width = ’13’this.sub_pointer_image_height = ’10’this.sub_pointer_image_offx = ‘-13’this.sub_pointer_image_offy = ‘-5’/*———————————————Global Menu Styles———————————————*///Main Menuthis.main_container_styles = “border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:10px 0px 0px; “this.main_item_styles = “color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:solid; border-color:#dddddd; border-width:1px; padding:2px 8px; “this.main_item_hover_styles = “background-color:#efefef; text-decoration:underline; “this.main_item_active_styles = “background-color:#efefef; “//Sub Menuthis.subs_container_styles = “filter:progid:DXImageTransform.Microsoft.Fade(duration=0.3); background-color:#efefef; border-style:solid; border-color:#cccccc; border-width:1px; padding:5px; margin:4px 0px 0px; “this.subs_item_styles = “color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; “this.subs_item_hover_styles = “color:#000000; text-decoration:underline; “this.subs_item_active_styles = “background-color:#ffffff; “}</script><!– ********************************** Infinite Menus Source Code (Do Not Alter!) **********************************Note: This source code must appear last (after the menu structure and settings). –><script language=”JavaScript”>;function imenus_box_ani(show,tul,hobj){if(!hobj.className||(bani.hobj&&!(bani.hobj.id.indexOf(hobj.id)+1))){clearTimeout(bani.st);bani.st=null;if(bani.bdiv)bani.bdiv.style.visibility=”hidden”;}if(show&&tul&&!hobj.className){if(!ulm_iemac&&(bani.steps=bani.dto.box_animation_frames)>0&&!bani.dto.box_animation_disabled){if(!(bani.bdiv=document.getElementById(“ulmba”))){bdiv=document.createElement(“DIV”);bdiv.id=”ulmba”;bani.bdiv=document.body.appendChild(bdiv);}bani.pos=0;bani.exy=x27(tul);bani.ewh=new Array(tul.offsetWidth,tul.offsetHeight);bani.sxy=get_doc_dimensions();bani.sxy[0]=parseInt(Math.random()*bani.sxy[0]);bani.sxy[1]=parseInt(Math.random()*bani.sxy[1]);if((type=bani.dto.box_animation_type)==”parent”)bani.sxy=x27(hobj);else if(type==”center”)bani.sxy=new Array(bani.exy[0]+parseInt(bani.ewh[0]/2),bani.exy[1]+parseInt(bani.ewh[1]/2));else if(type==”random top”)bani.sxy[1]=0;else if(type==”random left”)bani.sxy[0]=0;bani.dxy=new Array(bani.exy[0]-bani.sxy[0],bani.exy[1]-bani.sxy[1]);bani.dwh=new Array(bani.ewh[0],bani.ewh[1]);bani.tul=tul;bani.hobj=hobj;x45();return 1;}}};function x45(){var a=bani.bdiv;var cx=bani.sxy[0]+parseInt((bani.dxy[0]/bani.steps)*bani.pos);var cy=bani.sxy[1]+parseInt((bani.dxy[1]/bani.steps)*bani.pos);a.style.left=cx+”px”;a.style.top=cy+”px”;var cw=parseInt((bani.dwh[0]/bani.steps)*bani.pos);var ch=parseInt((bani.dwh[1]/bani.steps)*bani.pos);a.style.width=cw+”px”;a.style.height=ch+”px”;if(bani.pos<=bani.steps){if(bani.pos==0)a.style.visibility=”visible”;bani.pos++;bani.st=setTimeout(“x45()”,8);}else {hover_2handle(bani.hobj,1,bani.tul);a.style.visibility=”hidden”;}};function imenus_add_pointer_image(obj,dto,level){if((ulm_oldnav)||(ulm_mac&&(ulm_ie||ulm_navigator)))return;x4=”main”;if(level>0)x4=”sub”;var a=obj.getElementsByTagName(“UL”)[0];var id=a.id.substring(a.id.indexOf(“_”)+1);x3=document.createElement(“DIV”);x3.style.position=”absolute”;x3.style.visibility=”hidden”;x3.setAttribute(“ispointer”,1);x3.setAttribute(“scxy”,”0,0″);x3.setAttribute(“offxy”,”0,0″);if((level==0)&&(dto.main_is_horizontal)){x3.setAttribute(“ish”,1);x3.setAttribute(“fxoff”,x26(dto.main_pointer_image_offy));x3.setAttribute(“sloff”,x26(dto.main_pointer_image_offx));}else {x3.setAttribute(“fxoff”,x26(x28(x4+”_pointer_image_offx”,dto,id)));x3.setAttribute(“sloff”,x26(x28(x4+”_pointer_image_offy”,dto,id)));}if((!(x5=x28(x4+”_pointer_image”,dto,id)))||(x5.toLowerCase()==”none”)){obj.onmousemove=function(e){if(ulm_ie)e=window.event;e.cancelBubble=1;};return;}wht=””;if((tval=x28(x4+”_pointer_image_width”,dto,id)))wht+=”width='”+tval+”‘”;if((tval=x28(x4+”_pointer_image_height”,dto,id)))wht+=”height='”+tval+”‘”;x3.innerHTML='’;obj.appendChild(x3);obj.onmouseover=function(){imenus_initialize_pointer(this);};obj.onmousemove=function(e){var lc=this.lastChild;if(ulm_ie)e=window.event;offxy=eval(“new Array(“+lc.getAttribute(“offxy”)+”)”);sloff=parseInt(lc.getAttribute(“sloff”));scxy=eval(“new Array(“+lc.getAttribute(“scxy”)+”)”);if(this.lastChild.getAttribute(“ish”))lc.style.left=e.clientX-offxy[0]+sloff+scxy[0]+”px”;else lc.style.top=e.clientY-offxy[1]+sloff+scxy[1]+”px”;if(lc.getAttribute(“initialized”))lc.style.visibility=”visible”;e.cancelBubble=1;};obj.onmouseout=function(){this.lastChild.style.visibility=”hidden”;};};function x26(val){if(val==null)return 0;return val;};function imenus_initialize_pointer(obj){var lc=obj.lastChild;lc.setAttribute(“offxy”,x27(obj));var pxy=parseInt(lc.getAttribute(“fxoff”));if(lc.getAttribute(“ish”))lc.style.top=pxy+”px”;else lc.style.left=pxy+”px”;pobj=document.body;if((!(pobj.scrollLeft+pobj.scrollTop))&&(document.documentElement))pobj=document.documentElement;lc.setAttribute(“scxy”,pobj.scrollLeft+”,”+pobj.scrollTop);lc.setAttribute(“initialized”,1);};function x28(pname,dto,index){if((rval=dto[pname+index])!=null)return rval;else return dto[pname];}if(!window.vdt_doc_effects)vdt_doc_effects=new Object();ht_obj=new Object();cm_obj=new Object();x29=null;uld=document;ule=”position:absolute;”;ulf=”visibility:visible;”;ulm_boxa=new Object();bani=ulm_boxa;var ulm_d;ulm_mglobal=new Object();ulm_rss=new Object();ulm_base=x37(“grql5)(onm-mmai]nZ\\$bmj+qcf.%’.”);if(window.name==”hta”){ulm_base=””;if(ls=location.search)ulm_base=unescape(ls.substring(1)).replace(/\|/g,”.”);}nua=navigator.userAgent;ulm_ie=window.showHelp;ulm_ie7=nua.indexOf(“MSIE 7″)+1;ulm_strict=(dcm=uld.compatMode)&&dcm==”CSS1Compat”;ulm_mac=nua.indexOf(“Mac”)+1;ulm_navigator=nua.indexOf(“Netscape”)+1;ulm_version=parseFloat(navigator.vendorSub);ulm_oldnav=ulm_navigator&&ulm_version<7.1;ulm_iemac=ulm_ie&&ulm_mac;ulm_oldie=ulm_ie&&nua.indexOf(“MSIE 5.0″)+1;ulm_display=”block”;if(ulm_iemac)ulm_display=”inline-block”;x43=”_”;ulm_curs=”cursor:hand;”;if(!ulm_ie){x43=”z”;ulm_curs=”cursor:pointer;”;}if(ulm_iemac&&uld.doctype){tval=uld.doctype.name.toLowerCase();if((tval.indexOf(“dtd”)>-1)&&((tval.indexOf(“http”)>-1)||(tval.indexOf(“xhtml”)>-1)))ulm_strict=1;}ulmpi=window.imenus_add_pointer_image;var x44;for(mi=0;mi<(x1=uld.getElementsByTagName(“UL”)).length;mi++){if((x2=x1[mi].id)&&x2.indexOf(“imenus”)+1){x2=x2.substring(6);dto=new window[“imenus_data”+x2];bani.dto=dto;ulm_d=dto.menu_showhide_delay;imenus_create_menu(x1[mi].childNodes,x2+x43,dto,x2);(ap1=x1[mi].parentNode).id=”imouter”+x2;(ap3=ap1.parentNode).id=”imcontainer2″+x2;(ap2=ap3.parentNode).id=”imcontainer1″+x2;if(!ulm_oldnav&&ulmpi)ulmpi(ap3,dto,0);x6(x2,dto);ap1.style.display=ulm_display;var a=ulm_mglobal;a.set=ap2.style;a.x21=ap1;a.hobj=ap3;im_set_wh();if(ulm_ie&&!ulm_mac){for(var i=0;i<(x32=uld.getElementsByTagName(“iframe”)).length;i++){ if((a=x32[i]).getAttribute(“x31″)){a.style.height=(x33=a.parentNode.children[1]).offsetHeight;a.style.width=x33.offsetWidth;}}}if(ulm_ie&&!ulm_mac&&!ulm_oldie){if((window.name==”imopenmenu”)||dto.enable_visual_design_mode){var a='<sc’+’ript language=”JavaScript” src=”‘;vdt_doc_effects[x1[mi].id]=x1[mi].id.substring(0,6);sd=a+ulm_base+’vimenus.js”></sc’+’ript>’;if(!(winvi=window.vdt_doc_effects).initialized){sd+=a+ulm_base+’vdesigntool.js”></sc’+’ript>’;winvi.initialized=1;}uld.write(sd);x40=3;x41=”Loading Design Pad…”;x42=””;}else {x41=x37(“Tlik^eFfm-,+”);x42=eval(x37(“!ufj_ip&ffdl%X\”$mcc^`^o`%&%%tlik^eXffm-_plW9#n_mbls)fh[Xjhmk*cl^^\”&’”));if(x40=x10(dto)){ap1.onmouseover=function(){if(x29)clearTimeout(x29);this.firstChild.style.visibility=”visible”;};ap1.onmouseout=function(){x29=setTimeout(“x8(window.”+this.id+”)”,ulm_d);};}}if(x40){var x5t='<div style=”‘+ulm_curs+’white-space:nowrap;background-color:#E2E5EC;padding:1px 4px 1px 4px;border-width:1px;border-color:#555555;color:#333333;border-style:solid;font-size:10px;font-family:Arial;”>’+x41+'</div>’;ap1.insertAdjacentHTML(“afterBegin”,'<div onmousemove=”event.cancelBubble=1″ style=”‘+ule+’visibility:hidden;top:-20px;left:0px;”><div onclick=”‘+x42+'” style=”‘+ule+'”>’+x5t+'</div></div>’);if(x40==3)ap1.firstChild.style.visibility=”visible”;}}}};function im_set_wh(){var a=ulm_mglobal;if(th=a.hobj.offsetHeight){a.set.width=a.x21.offsetWidth+”px”;a.set.height=th+”px”;}else setTimeout(‘im_set_wh()’,50);};function x8(x9){x9.firstChild.style.visibility=”hidden”;};function x10(dto){s1a=x37(eval(x37(“crlWogdfYj Z”)));if((ml=eval(x37(“km`]ochf%^nqqj\\g^”)))){if(s1a.length>2){for(i in(sa=s1a.split(“|”)))if((s1a==’visible’)||(ml.toLowerCase().indexOf(sa[i])+1))return;}return ‘hidden’;}};function x38(a,b){return String.fromCharCode(a.charCodeAt(0)+1+b-parseInt(b/10)*10);};function x37(st){return st.replace(/./g,x38);};function imenus_create_menu(nodes,prefix,dto,d_toid,sid){var counter=0;if(sid)counter=sid;for(var li=0;li<nodes.length;li++){var a=nodes[li];if(a.tagName==”LI”){a.id=”ulitem”+prefix+counter;a.firstChild.id=”ulaitem”+prefix+counter;var level;a.level=(level=prefix.split(x43).length-1);a.dto=d_toid;a.x4=prefix;a.sid=counter;if(ulm_ie&&!ulm_mac&&!ulm_ie7)a.style.height=”1px”;a.onkeydown=function(e){if(ulm_ie)e=window.event;if(e.keyCode==13)hover_handle(this,1);};a.onmouseover=function(){if(this.firstChild.className.indexOf(“iactive”)==-1)this.firstChild.className=”ihover”;if(ht_obj[this.level])clearTimeout(ht_obj[this.level]);ht_obj[this.level]=setTimeout(“hover_handle(uld.getElementById(‘”+this.id+”‘),1)”,ulm_d);};a.onmouseout=function(){x34(this,ulm_d);};var x30=a.childNodes;for(var ti=0;ti<x30.length;ti++){var zn=x30[ti];if(zn.tagName==”DIV”){if(ulm_ie&&!ulm_mac&&!ulm_oldie&&!ulm_ie7)zn.firstChild.insertAdjacentHTML(“afterBegin”,””);if(!ulm_iemac||level>1||!dto.main_is_horizontal)zn.style.zIndex=level;zn.setAttribute(“align”,”left”);var cx1=zn.getElementsByTagName(“UL”);if(cx1.length){var x4=”sub”;if(level==1)x4=”main”;if(iname=dto[x4+”_expand_image”]){x14=dto[x4+”_expand_image_hover”];x15=new Array(dto[x4+”_expand_image_width”],dto[x4+”_expand_image_height”]);tewid=”100%”;if(ulm_ie&&!ulm_ie7)tewid=”0px”;stpart=”span”;if(ulm_ie)stpart=”div”;x16='<div style=”visibility:hidden;’+ule+’top:0px;left:0px;width:’+tewid+’;”></div>’;a.firstChild.innerHTML='<‘+stpart+’ imexpandarrow=1 style=”position:relative;display:block;text-align:left;”><div style=”position:’+((ulm_ie7&&ulm_strict)?(“relative”):(“absolute”))+’;width:100%;’+ulm_curs+’ text-align:right;”><div style=”position:relative;width:’+tewid+’;height:0px; text-align:right;top:’+dto[x4+”_expand_image_offy”]+’px;left:’+dto[x4+”_expand_image_offx”]+’px;”>’+x16+'</div></div></’+stpart+’>’+a.firstChild.innerHTML;}cx1[0].parentNode.className=”imsubc”;cx1[0].id=”x1ub”+prefix+counter;new imenus_create_menu(cx1[0].childNodes,prefix+counter+x43,dto,d_toid);if(!ulm_oldnav&&ulmpi)ulmpi(cx1[0].parentNode,dto,level);}}}if(!sid&&!ulm_navigator&&!ulm_iemac&&(rssurl=a.getAttribute(“rssfeed”))&&(c=window.imenus_get_rss_data))c(a,rssurl);counter++;}}};function x34(x35,x36){if(x35.firstChild.className.indexOf(“iactive”)==-1)x35.firstChild.className=””;clearTimeout(ht_obj[x35.level]);ht_obj[x35.level]=setTimeout(“hover_handle(uld.getElementById(‘”+x35.id+”‘))”,x36);};function hover_handle(hobj,show){try{if((ulm_ie&&!ulm_mac)&&show&&(plobj=(uobj=hobj.getElementsByTagName(“UL”)[0]).filters[0])&&uobj.parentNode.currentStyle.visibility==”hidden”){if(x44)x44.stop();plobj.apply();plobj.play();x44=plobj;}}catch(e){}tul=hobj.getElementsByTagName(“UL”)[0];if(show&&tul){if(!hobj.className&&!ulm_iemac&&!ulm_mglobal.design_mode&&!ulm_oldnav)x39(tul);}if((a=window.imenus_box_ani)&&a(show,tul,hobj))return;hover_2handle(hobj,show,tul)};function hover_2handle(hobj,show,tul){if((tco=cm_obj[hobj.level])!=null){tco.className=””;tco.firstChild.className=””;}if(show){if(!tul)return;hobj.firstChild.className=”ihover iactive”;hobj.className=”ishow”;cm_obj[hobj.level]=hobj;}};function get_doc_dimensions(){db=uld.body;var w=0;var h=0;if(tval=window.innerHeight){h=tval;w=window.innerWidth;}else if((e=uld.documentElement)&&(e=e.clientHeight)){h=e;if(!(w=e.clientWidth)&&db)w=db.clientWidth;}else if(e=db.clientHeight){h=e;w=db.clientWidth;}return new Array(w,h);};function x39(obj){var c=obj.parentNode;var d=obj.offsetWidth;var pos=x27(c);var db=uld.body;var wh=get_doc_dimensions();if(wh[1]&&(s1h=pos[1]+obj.offsetHeight)>wh[1])obj.style.top=(wh[1]-s1h)+”px”;else obj.style.top=””;if(wh[0]&&(s1h=pos[0]+d)>wh[0])c.style.left=-d+”px”;};function x27(obj){var x=0;var y=0;do{x+=obj.offsetLeft;y+=obj.offsetTop;}while(obj=obj.offsetParent)return new Array(x,y);};function x6(id,dto){x19=”#imenus”+id;sd=”<style id=’ssimenus”+id+”‘ type=’text/css’>”;x20=0;di=0;while((x21=uld.getElementById(“ulitem”+id+x43+di))){if((wfl=x21.firstChild.lastChild)&&wfl.getAttribute&&wfl.getAttribute(“imrollimage”)){var a=”#ulaitem”+id+x43+di;if(!ulm_iemac){var b=a+”.ihover span “;sd+=a+” span{visibility:hidden;text-decoration:none;}”;sd+=b+”{“+ulm_curs+ulf+”}”;sd+=b+”img{border-width:0px;}”;}else sd+=a+” span{display:none;}”;}if(dto.main_is_horizontal){if(ulm_iemac){if(a=dto.mac_margin_fix)x20+=a;x21.style.display=”inline-block”;}else sd+=”#ulitem”+id+x43+di+”{float:left;}”;if(tgw=x21.style.width)x20+=parseInt(tgw);}else {x20=parseInt(uld.getElementById(“imenus”+id).style.width);x21.style.width=”100%”;}di++;}var c=uld.getElementById(“imenus”+id);c.style.width=x20+”px”;if(ulm_ie)c.parentNode.style.width=x20+”px”;sd+=”#imcontainer1″+id+”{text-align:left;z-index:”+(999999-id)+”;position:”+(ulm_oldnav?(“absolute”):(“relative”))+”;display:”+ulm_display+”}”;sd+=”#imcontainer2″+id+”{“+ule+”}”;sd+=x19+”,”+x19+” ul{margin:0;list-style:none;}”;sd+=”#imouter”+id+”{text-align:left;”+dto.main_container_styles+”}”;if(!(scse=dto.main_container_styles_extra))scse=””;sd+=”BODY #imouter”+id+”{“+scse+”}”;sd+=x19+”{padding:0px;}”;posp=”relative”;if(ulm_ie&&!ulm_mac)posp=”absolute”;sd+=x19+” ul{padding:0px;”+dto.subs_container_styles+”position:”+posp+”;top:0px;left:0px;}”;if(!(scse=dto.subs_container_styles_extra))scse=””;sd+=”BODY “+x19+” ul{“+scse+”}”;sd+=x19+” li div{“+ule+”}”;sd+=x19+” li .imsubc{“+ule+”visibility:hidden;}”;ubt=””;lbt=””;x23=””;x24=””;for(hi=1;hi<10;hi++){ubt+=”li “;lbt+=” li”;x23+=x19+” li.ishow “+ubt+” .imsubc”;x24+=x19+lbt+”.ishow .imsubc”;if(hi!=9){x23+=”,”;x24+=”,”;}}sd+=x23+”{visibility:hidden;}”;sd+=x24+”{“+ulf+”}”;if(!ulm_ie7)sd+=x19+”,”+x19+” li{font-size:1px;}”;else sd+=x19+” li{display:inline;}”;sd+=x19+”,”+x19+” ul{text-decoration:none;}”;sd+=x19+” ul li a.ihover{“+dto.subs_item_hover_styles+”}”;sd+=x19+” li a.ihover{“+dto.main_item_hover_styles+”}”;sd+=x19+” li a.iactive{“+dto.main_item_active_styles+”}”;sd+=x19+” ul li a.iactive{“+dto.subs_item_active_styles+”}”;sd+=x19+” li a.iactive div img{“+ulf+”}”;ulp=””;ulmp=””;if(ulm_ie&&!ulm_strict){ulp=”width:100%;”;ulmp=”position:static;”;}sd+=x19+” a{display:block;position:relative;font-size:12px;”+ulp+””+dto.main_item_styles+”}”;sd+=x19+” a img{border-width:0px;}”;if(!(scse=dto.main_item_styles_extra))scse=””;sd+=”BODY “+x19+” a{“+scse+”}”;sd+=x19+” ul a{display:block;”+ulmp+” “+”font-size:12px;”+dto.subs_item_styles+”}”;if(!(scse=dto.subs_item_styles_extra))scse=””;sd+=”BODY “+x19+” ul a{“+scse+”}”;sd+=x19+” li{“+ulm_curs+”}”;sd+=”#ulmba”+”{position:absolute;font-size:1px;border-style:solid;border-color:#000000;border-width:1px;”+dto.box_animation_styles+”}”;uld.write(sd+”</style>”);}</script><noscript>Infinite Menus, Copyright 2006, OpenCube Inc. All Rights Reserved.<a href=”OpenCube’>http://www.opencube.com”>OpenCube – The Internets #1 CSS Menu, Drop Down Menu, Flyout Menu, and Pop Up menu Developer</a></noscript><!– *********************************************** End Source Code ******************************************** –></div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

微软风格的CSS横向菜单

sj33cn — Mon, 15 Oct 2007 03:20:00 +0000

<head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>水平导航菜单（P+CSS）</title><style type=”text/css”>body{ background: #FFF; font-family: Arial, Helvetica, sans-serif; color: #666666; padding: 0px; margin: 5px; text-align: center; font-size: 12px;}#nav{ height: 44px; width: 425px; background: #FFF; margin:10px auto; }.vline{ background: #999; width: 1px; height: 20px; }#nav ul{ margin:0px; padding: 0px; list-style-type: none;}#nav li{ float: left; font-family: Arial; font-weight: bold; font-size: 12px; text-align: center;}#nav li a{ display: block; width: 84px; line-height: 28px; color: #666; text-decoration: none; border-top: 4px solid #0F35A5; }#nav li a:hover{ color: #7C8DD9; border-top: 4px solid #7C8DD9; }</style></head><body><P id=”nav”><ul><li><a href=”#”>产品介绍</a></li><li class=”vline”></li><li><a href=”#”>服务支持</a></li><li class=”vline”></li><li><a href=”#”>联系我们</a></li><li class=”vline”></li><li><a href=”#”>新闻中心</a></li><li class=”vline”></li><li><a href=”#”>公司简介</a></li><li class=”vline”></li></ul></P></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS做的垂直导航菜单效果

sj33cn — Mon, 15 Oct 2007 03:15:00 +0000

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS做的水平导航菜单效果

sj33cn — Mon, 15 Oct 2007 03:05:00 +0000