摘要：很多wordpress主题开发者或是使用者，对html前端的代码不是很熟悉，尤其是对于js脚本的撰写上不太懂。没有办法有...
很多wordpress主题开发者或是使用者，对html前端的代码不是很熟悉，尤其是对于js脚本的撰写上不太懂。没有办法有效的控制使用菜单中的下拉样式，今天大挖给大家推荐一个可以直接复用的wordpress二级下拉菜单样式，供大家粘贴使用。
代码一共分为三段，第一端是css样式，一个默认的演示样式，可以给到wordpress菜单样式一个基础的外观，如果需要符合设置者当下的审美，那需要做进一步的调整。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<style type="text/css"> <!-- /* www.divcss5.com 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:#EFEFEF;} #nav li ul a{display: block; width: 156px;text-align:left;padding-left:24px; overflow:hidden;} #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> //以下是需要粘贴到wordpress主题的header.php文件内的，建议放在/haed的代码下方，优先执行。 <script type=text/javascript> 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> <p><a href="http://www.divcss5.com/">DIV+CSS网站首页</a> </p> <ul id="nav"> <li><a href="http://www.divcss5.com/">div+css</a> <ul> <li><a href="http://www.divcss5.com/">CSS</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="http://www.divcss5.com/rumen/">css入门</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="http://www.divcss5.com/html/">HTML基础</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="http://www.divcss5.com/jiqiao/">DIV+CSS技巧</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="http://www.divcss5.com/template/">DIV+CSS模板</a> <ul> <li><a href="http://www.divcss5.com/template/">CSS模板</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="http://www.divcss5.com/shouce/">CSS手册</a> <ul> <li><a href="http://www.divcss5.com/shouce/">DIV+CSS手册</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> |
