web集结号 » 导航菜单 http://www.songlecn.com 专注于web表现层技术 Wed, 04 Nov 2009 02:46:32 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 jQuery插件-竖形动感菜单 http://www.songlecn.com/2009/03/632/ http://www.songlecn.com/2009/03/632/#comments Sat, 28 Mar 2009 17:20:22 +0000 船长 http://www.songlecn.com/?p=632 http://www.songlecn.com/2009/03/632/feed/ 0 纯CSS网站后台管理菜单 http://www.songlecn.com/2009/03/571/ http://www.songlecn.com/2009/03/571/#comments Sun, 22 Mar 2009 06:43:17 +0000 船长 http://www.songlecn.com/?p=571 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 纯CSS网站后台管理菜单，运行代码查看效果 <!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" /> <title>纯css管理菜单</title> <style type="text/css"> body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#cc0} #top h2{width:150px;height:40px;background-color:#9c0;float:left;font-size:14px;text-align:center;line-height:40px;} #topTags{width:750px;height:40px;margin:0 auto;background-color:#cc0;float:left} #topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;} #main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;} #leftMenu{width:150px;height:500px;background-color:#009900;float:left} #leftMenu ul{margin:10px;} #leftMenu ul li{width:130px;height:30px;display:block;background:#9c0;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;} #leftMenu ul li a{color:#000000;text-decoration:none;} #content{width:750px;height:500px;float:left} .content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;} #footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;} .content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;} </style> <script type="text/javascript"> window.onload=function(){ function [...]]]> http://www.songlecn.com/2009/03/571/feed/ 0 仿瑞星网站导航菜单 http://www.songlecn.com/2009/03/569/ http://www.songlecn.com/2009/03/569/#comments Sun, 22 Mar 2009 06:39:37 +0000 船长 http://www.songlecn.com/?p=569 http://www.songlecn.com/2009/03/569/feed/ 0 jQuery插件 – 菜单（导航条）背景动画 http://www.songlecn.com/2009/03/466/ http://www.songlecn.com/2009/03/466/#comments Wed, 11 Mar 2009 02:56:26 +0000 船长 http://www.songlecn.com/?p=466 http://www.songlecn.com/2009/03/466/feed/ 1 中英文双语导航菜单 http://www.songlecn.com/2009/02/319/ http://www.songlecn.com/2009/02/319/#comments Fri, 20 Feb 2009 02:44:38 +0000 船长 http://www.songlecn.com/?p=319 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 中英文双语导航菜单，点击运行查看效果，纯css技巧实现的效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="导航,菜单" /> <meta http-equiv="Description" content="中英文双语导航菜单的演示" /> <meta content="all" name="robots" /> <title>中英文双语导航菜单</title> <style type="text/css" media="all"> #nav { padding: 10px 10px 0; font-size: 12px; font-weight: bold; font-family:Arial, Helvetica, sans-serif,宋体; margin: 1em 0 0; list-style:none; } #nav li { [...]]]> http://www.songlecn.com/2009/02/319/feed/ 0 超酷仿GOOGLE首页导航菜单效果 http://www.songlecn.com/2009/02/266/ http://www.songlecn.com/2009/02/266/#comments Sat, 14 Feb 2009 03:20:28 +0000 船长 http://www.songlecn.com/?p=266 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 超酷仿GOOGLE首页导航菜单效果，google的首页菜单导航相信大家已经非常熟悉了，想不想自己也拥有一个呢?下面是代码，运行就可以看到效果，这里除了javascript以外，还用到了css sprites <html> <head> <title>超酷仿GOOGLE首页导航菜单效果</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> </head> <body> <!--把下面代码加到<body>与</body>之间--> <script> window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,18065",kHL:"zh-CN"}; function sf(){document.f.q.focus()} window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=HBnlR8bgAorksALn3dTbBw"+g}return true}; window.gbar={};(function(){var b=window.gbar,c,g,h;function n(d,f,e){d.visibility=h?"hidden":"visible";d.left=f+"px";d.top=e+"px"}b.tg=function(d){var f=0,e=0,a,i=0,o,l=window.navExtra,m,j=document,k=0;g=g||j.getElementById("gbar").getElementsByTagName("span");(d||window.event).cancelBubble=!i;if(!c){c=j.createElement(Array.every||window.createPopup?"iframe":"DIV");c.frameBorder="0";c.scrolling="no";c.src="#";g[7].parentNode.appendChild(c).id="gbi";if(l&&g[7])for(o in l){m=j.createElement("span");m.appendChild(l[o]);g[7].parentNode.insertBefore(m,g[7]).className="gb2"}j.onclick=b.close}while(a=g[++i]){if(e){n(a.style,e+1,f+25);k=Math.max(k,a.firstChild.tagName=="A"&&a.offsetWidth);f+=a.firstChild.tagName=="DIV"?9:20}if(a.className=="gb3"){do e+=a.offsetLeft;while(a=a.offsetParent)}}{i=0;while(a=g[++i])if(a.className=="gb2")a.style.width=k+"px";c.style.width=k+"px"}c.style.height=f+"px";n(c.style,e,24);h=!h};b.close=function(d){h&&b.tg(d)}})(); (function(){ function g(a,b,c){var d="on"+b;if(a.addEventListener){a.addEventListener(b,c,false)}else if(a.attachEvent){a.attachEvent(d,c)}else{var e=a[d];a[d]=function(){var f=e.apply(this,arguments),h=c.apply(this,arguments);return f==undefined?h:(h==undefined?f:h&&f)}}};var aa,i,j,l,n="",o,p=null,q=null,r=null,s=-1,t,u,v,w,x=null,y=null,z,A,ba={},B=null,C,F=0,G=0,H=0,I=null,J,K=false,L=false,M,N;{var ca=navigator.userAgent.toLowerCase();M=ca.indexOf("opera")!=-1;N=ca.indexOf("msie")!=-1&&!M}var O=null,da=new RegExp("^[\\s\\u1100-\\u11FF\\u3040-\\u30FF\\u3130-\\u318F\\u31F0-\\u31FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uAC00-\\uD7A3\\uF900-\\uFAFF\\uFF65-\\uFFDC]+$"),P="google-ac-",ea=true;function fa(a,b,c,d,e,f,h,m){t=a;u=b;aa=d;O=e;ea=f;if(ga()==null){return}var k=window.google.kHL; J=/^(zh-(CN|TW)|ja|ko)$/.test(k);if(c=="search")c="";C="/complete/search?hl="+k+(c?"&ds="+c:"")+(m?"&pq="+ha(m):"")+(h?"&expid="+h:"")+"&client=suggest";t.onsubmit=ia;u.setAttribute("autocomplete","off");g(u,"blur",ja);g(u,"beforedeactivate",ka);if(u.addEventListener){u.onkeypress=la;u.onkeyup=na}else{g(u,N?"keydown":"keypress",la);g(u,"keyup",na)}j=(l=(i=u.value));o=oa(u);v=document.createElement("table");v.id="completeTable";v.cellSpacing=(v.cellPadding="0");w=v.style;v.className=P+"m";Q();document.body.appendChild(v); if(N){x=document.createElement("iframe");y=x.style;x.id="completeIFrame";y.zIndex="1";y.position="absolute";y.display="block";y.borderWidth=0;document.body.appendChild(x)}R();pa("",[],[]);qa();g(window,"resize",R);g(window,"pageshow",ra);if(J)window.setInterval(sa,10);z=ta("aq","f",false);A=ta("oq","",true);S()}function ra(a){if(a.persisted)z.value="f";A.value=""}function qa(){var a=document.body.dir=="rtl",b=a?"right":"left",c=a?"left":"right",d=document.getElementsByTagName("head")[0],e=document.createElement("style"), f=null,h=null,m=false;if(document.styleSheets){d.appendChild(e);m=true;f=e.sheet?e.sheet:e.styleSheet}if(!f){h=document.createTextNode("");e.appendChild(h)}var k=function(D,E){var ma=D+" { "+E+" }";if(f){if(f.insertRule){f.insertRule(ma,f.cssRules.length)}else if(f.addRule){f.addRule(D,E)}}else{h.data+=ma+"\n"}};k("."+P+"m","font-size:13px;font-family:arial,sans-serif;cursor:default;line-height:17px;border:1px solid black;z-index:99;position:absolute;background-color:white;margin:0;");k("."+P+"a", "background-color:white;");k("."+P+"b","background-color:#36c;color:white;");k("."+P+"c","white-space:nowrap;overflow:hidden;text-align:"+b+";padding-"+b+":3px;"+(N||M?"padding-bottom:1px;":""));k("."+P+"d","white-space:nowrap;overflow:hidden;font-size:10px;text-align:"+c+";color:green;padding-"+b+":3px;padding-"+c+":3px;");k("."+P+"b [...]]]> http://www.songlecn.com/2009/02/266/feed/ 1 jQuery SuperMenu http://www.songlecn.com/2009/02/157/ http://www.songlecn.com/2009/02/157/#comments Wed, 04 Feb 2009 03:39:32 +0000 船长 http://www.songlecn.com/2009/02/157/ function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 代码如下: <!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=utf-8" /> <title>无标题文档</title> <script src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".menubt").click(function(){ $(this).blur(); if($(this).siblings("div").css("display") == "none") { $(".menucount:visible").slideUp(200,function(){ $(this).parent().css("zIndex","100");}); $(this).siblings("div").slideDown(200,function(){ $(this).parent().css("zIndex","10");}); $(this).siblings("div").attr("id","#boxOpen"); } else { $(this).siblings("div").slideUp(200,function(){ $(this).parent().css("zIndex","100");}); } }) }) </script> <style type="text/css"> body{ margin:0; padding:0; } .menubox{ position:absolute; width:100%; z-index:100; } [...]]]> http://www.songlecn.com/2009/02/157/feed/ 0 可折叠展开的导航菜单(酷) http://www.songlecn.com/2009/02/146/ http://www.songlecn.com/2009/02/146/#comments Tue, 03 Feb 2009 09:26:12 +0000 船长 http://www.songlecn.com/2009/02/146/ function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } Slashdot Menu 是从Slashdot 上发现的一个别具特色的可折叠式效果的导航菜单，可使用不同的方式配置，如哪些子菜单默认情况下是展开的，是否使用Cookies ，以及菜单展开、折叠的速度等。非常酷！简单翻译了一下注释。 代码如下： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="http://www.songlecn.com/wp-content/supload/2009/02/03/sdmenu/sdmenu.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://www.songlecn.com/wp-content/supload/2009/02/03/sdmenu/sdmenu.js"> /*********************************************** * Slashdot Menu script- By DimX * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script><script type="text/javascript"> // <![CDATA[ var myMenu; window.onload = function() { myMenu [...]]]> http://www.songlecn.com/2009/02/146/feed/ 1 仿Chinaz首页菜单导航 http://www.songlecn.com/2009/02/144/ http://www.songlecn.com/2009/02/144/#comments Tue, 03 Feb 2009 08:34:52 +0000 船长 http://www.songlecn.com/2009/02/144/ function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 仿Chinaz首页菜单导航代码如下: <!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" /> <title>Chinaz菜单导航</title> <style type="text/css"> <!-- div, ul, p{ margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; } body { color: #333; background: #deebf3; text-align: center; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; } a:link, a:visited { [...]]]> http://www.songlecn.com/2009/02/144/feed/ 0