WordPress-簡單的Menu制作

其实只是很简单的增加一列li,然后用css来控制这部分li的表现,如果要应用到其他模版,请自行修改css部分的相关代码

在header.php合适位置添加如下代码:

  1. <div id="menu">
  2. <ul>
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. </ul>
  7. </div>
  8. <div id="wrapper">

style.css部分添加以下代码:

  1. #menu {
  2.  position: relative;
  3.  height:1.7em;
  4.  line-height:1.7em;
  5.  width:450px;
  6.  padding: 0 0 0 20px;
  7.  margin: -30px 0 0 0;
  8.  z-index:2;
  9. }
  10. #menu ul {
  11.  margin:0;
  12.  padding:0;
  13. }
  14. #menu li {
  15.  float:left;
  16.  margin:0;
  17.  padding:0;
  18.  list-style-type:none;
  19.  border-right:0px solid;
  20.  white-space:nowrap;
  21. }
  22. #menu li a {
  23.  display:block;>
  24.  padding:0 5px;
  25.  text-transform: uppercase;
  26.  font-size:12px;
  27.  letter-spacing:1px;
  28.  color: #000;
  29. }
  30. #menu li a:hover {
  31.  text-decoration: underline;
  32. }

相似日志:

发表评论