摘要：下拉菜單是wordpress程序主題里面最常用的菜單體驗(yàn)方式，但是大多新手的對(duì)于菜單的使用和調(diào)整方式并不理解，尤其是不懂...
下拉菜單是wordpress程序主題里面最常用的菜單體驗(yàn)方式，但是大多新手的對(duì)于菜單的使用和調(diào)整方式并不理解，尤其是不懂樣式表的同學(xué)操作起來很加的困難，所以這里大挖給大家提供了現(xiàn)成的樣式表代碼樣式，可以直接復(fù)制過去就可以呈現(xiàn)下拉的形態(tài)，并且可以直接用于wordpress主題的調(diào)整中，在對(duì)應(yīng)的代碼里添加一下菜單 函數(shù)就可以成功應(yīng)用在現(xiàn)有的主題上，是不是十分的方便。
|
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 |
<style> /* 下拉按鈕樣式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* 容器 <div> - 需要定位下拉內(nèi)容 */ .dropdown { position: relative; display: inline-block; } /* 下拉內(nèi)容 (默認(rèn)隱藏) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* 下拉菜單的鏈接 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 鼠標(biāo)移上去后修改下拉菜單鏈接顏色 */ .dropdown-content a:hover {background-color: #f1f1f1} /* 在鼠標(biāo)移上去后顯示下拉菜單 */ .dropdown:hover .dropdown-content { display: block; } /* 當(dāng)下拉內(nèi)容顯示后修改下拉按鈕的背景顏色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <div class="dropdown"> <button class="dropbtn">下拉菜單</button> <div class="dropdown-content"> <a href="#">菜鳥教程 1</a> <a href="#">菜鳥教程 2</a> <a href="#">菜鳥教程 3</a> </div> </div> |
