2013.06.22

WordPress 內建階層選單製作

文章索引

WordPress 3.0 改版後，新增的內建選單功能，算是我最愛的功能之一，做佈景的時候也常常會用到。所以決定筆記一下階層選單的製作方法，不用每次製作都要 google 一次 XD。

步驟一

打開 header.php，把選單的語法加入：

<?php 
	wp_nav_menu(array('theme_location' => 'header-menu')); ?>

步驟二

打開 style.css，加入 css 語法。

這邊加了有子選單的時候，滑鼠滑過才會展開。主要是由 11~13 行控制，利用:hover後尋找自己下一個ul，再把 display 從 none 改為 block：

.menu {
  margin-top: 10px;
}

.menu ul li {
  float: left;
  padding: 0 10px;
  border-right: 1px solid #ddd;
}

.menu ul li:hover > ul {
  display: block;
}

.menu ul.sub-menu {
  position: absolute;
  display: none;
}

.menu .sub-menu li {
  border: 0;
  float: none;
}

步驟三

最後到 wordpress 後台「外觀」 → 「選單」開始添加選單即可。補充

當前選單有一個 .current 屬性可用，可以讓讀者知道現在這篇文章，在哪一個選單裡面，我直接抓自己的部落格語法補充在下面：

.menu .current-menu-item a, .menu .current-menu-parent a {
  color: #e94252;
}

歡迎給我點鼓勵，讓我知道你來過：）

0 則留言

Inline Feedbacks

View all comments

粉絲團

贊助廣告