摘要：很多wordpress主題開發(fā)者或是使用者，對(duì)html前端的代碼不是很熟悉，尤其是對(duì)于js腳本的撰寫上不太懂。沒有辦法有...
很多wordpress主題開發(fā)者或是使用者，對(duì)html前端的代碼不是很熟悉，尤其是對(duì)于js腳本的撰寫上不太懂。沒有辦法有效的控制使用菜單中的下拉樣式，今天大挖給大家推薦一個(gè)可以直接復(fù)用的wordpress二級(jí)下拉菜單樣式，供大家粘貼使用。
代碼一共分為三段，第一端是css樣式，一個(gè)默認(rèn)的演示樣式，可以給到wordpress菜單樣式一個(gè)基礎(chǔ)的外觀，如果需要符合設(shè)置者當(dāng)下的審美，那需要做進(jìn)一步的調(diào)整。
|
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下拉菜單實(shí)例 */ *{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文件內(nèi)的，建議放在/haed的代碼下方，優(yōu)先執(zhí)行。 <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網(wǎng)站首頁</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="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</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基礎(chǔ)</a> <ul> <li><a href="#">基礎(chǔ)三</a></li> <li><a href="#">基礎(chǔ)</a></li> <li><a href="#">基礎(chǔ)三案例三</a></li> <li><a href="#">基礎(chǔ)三案例三案例三</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手冊(cè)</a> <ul> <li><a href="http://www.divcss5.com/shouce/">DIV+CSS手冊(cè)</a></li> <li><a href="#">手冊(cè)</a></li> <li><a href="#">手冊(cè)</a></li> <li><a href="#">手冊(cè)</a></li> <li><a href="#">手冊(cè)</a></li> <li><a href="#">手冊(cè)手冊(cè)</a></li> <li><a href="#">手冊(cè)手冊(cè)手冊(cè)</a></li> </ul> </li> </ul> |
