web集结号 » 菜单 http://www.songlecn.com 专注于web表现层技术 Wed, 04 Nov 2009 02:46:32 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 能挡住下拉表单的CSS+JS下拉菜单 http://www.songlecn.com/2009/04/669/ http://www.songlecn.com/2009/04/669/#comments Tue, 31 Mar 2009 17:30:28 +0000 船长 http://www.songlecn.com/?p=669 http://www.songlecn.com/2009/04/669/feed/ 0 jQuery插件-伸缩型菜单 http://www.songlecn.com/2009/03/634/ http://www.songlecn.com/2009/03/634/#comments Sun, 29 Mar 2009 17:20:37 +0000 船长 http://www.songlecn.com/?p=634 http://www.songlecn.com/2009/03/634/feed/ 5 简单css水平菜单 http://www.songlecn.com/2009/03/497/ http://www.songlecn.com/2009/03/497/#comments Sun, 15 Mar 2009 04:37:42 +0000 船长 http://www.songlecn.com/?p=497 http://www.songlecn.com/2009/03/497/feed/ 0 Dhtml应用程序菜单 http://www.songlecn.com/2009/03/449/ http://www.songlecn.com/2009/03/449/#comments Mon, 09 Mar 2009 02:11:32 +0000 船长 http://www.songlecn.com/?p=449 http://www.songlecn.com/2009/03/449/feed/ 0 又一款jQuery菜单伸缩效果 http://www.songlecn.com/2009/02/312/ http://www.songlecn.com/2009/02/312/#comments Thu, 19 Feb 2009 02:29:17 +0000 船长 http://www.songlecn.com/?p=312 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; } 又一款jQuery菜单伸缩效果，运行代码即可 <!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" xml:lang="en-us"> <head> <title>DL Demo</title> <script src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js"></script> <script> $(document).ready(function(){ $("dd:not(:first)").hide(); $("dt a").click(function(){ [...]]]> http://www.songlecn.com/2009/02/312/feed/ 0 仿蓝色理想TAB横向下拉菜单效果 http://www.songlecn.com/2009/02/228/ http://www.songlecn.com/2009/02/228/#comments Tue, 10 Feb 2009 04:21:35 +0000 船长 http://www.songlecn.com/?p=228 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; } 仿蓝色理想TAB横向下拉菜单效果，直接运行代码可以查看效果^_^ <!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>仿经典导航菜单</title> <style type="text/css"> td{font-size:12px;} .unsel{background-color:#8c8ba1; background-position:top; background-repeat:repeat-x; color:#FFFFFF; font-weight:normal;} .sel {background-color:#666688; color:#FFFFFF; font-weight:bold;} .content{background-color:#666688; height:25px; padding-left:20px; padding-right:20px; color:#ffffff;} .lineunsel{background-color:#FFFFFF;} .linesel{background:#666688;} a:link {color:#ffffff;text-decoration:none;} a:visited {color:#ffffff;text-decoration:none;} a:active {color:#ffffff;text-decoration:none;} a:hover {color:#ffffff;text-decoration:underline;} </style> <script language="javascript"> function showdh(n){ for(var i=1;i<=10;i++){ eval("dh"+i).className="unsel" eval("line"+i).className="lineunsel"; eval("menu"+i).style.display="none"; } eval("dh"+n).className="sel" eval("line"+n).className="linesel"; eval("menu"+n).style.display=""; } </script> </head> <body onload="javascript:showdh(1);"> <table width="915" height="30" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="86" class="unsel" id="dh1"><div align="center"><a href="javascript:showdh(1);">业界动态</a></div></td> <td width="6"><div [...]]]> http://www.songlecn.com/2009/02/228/feed/ 0 JS打字效果的动态菜单 http://www.songlecn.com/2009/02/172/ http://www.songlecn.com/2009/02/172/#comments Thu, 05 Feb 2009 03:25:48 +0000 船长 http://www.songlecn.com/?p=172 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; } JS打字效果的动态菜单代码如下： <html> <head> <title>www.lanrentuku.com</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> body { background: #222; overflow: hidden; line-height: 18px; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .node { margin-left: 30px; height: expression(0); /* IE only */ } .title { position: relative; background: #fff; color: #000; cursor: pointer; } .selected { background: #f00; color: #fff; } .hover { background: #666; color: #fff; } .content { position: relative; background: #000; color: #fff; } .cursor { background: #f00; width: 10; height: 8; font-size: 12px; } #menu { visibility: hidden; position: absolute; left: 1%; top: 1%; width: 98%; height: 98%; background: #000; font-family: 'courier new', typewriter, matrix, monospace; font-size: 12px; overflow: [...]]]> http://www.songlecn.com/2009/02/172/feed/ 0 超酷JS圆形浮动菜单 http://www.songlecn.com/2009/02/171/ http://www.songlecn.com/2009/02/171/#comments Thu, 05 Feb 2009 03:23:24 +0000 船长 http://www.songlecn.com/?p=171 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; } 超酷JS圆形浮动菜单代码如下： <html> <head> <title>www.songlecn.com</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;} .obj {position:absolute;font-size:1px;left:-1000;cursor:pointer;} .chi {position:absolute;cursor:pointer;font-family:verdana;} </style> <script type="text/javascript"><!-- //////////////////////////////////////////////////////////////////// // ================ MENU CONTENT =================================== HDM = [ ['SAURISCHIANS', 'THEROPODS<br>Bipedal<br>predators', 'Herrerasauria', 'Saltopodidae', 'Saltopus'], ['', [...]]]> http://www.songlecn.com/2009/02/171/feed/ 0