想給自己的博客加上動態顯示菜單,或者叫高亮當前菜單的樣式,其實這實現起來并不難,因為 WordPress 3.0之后的版本開始支持自定義動態菜單,只要你會基本的HTML和CSS知識.

首先你要為你的站點建立一個菜單,可以通過WordPress的管理后臺 – 外觀 – 菜單欄目實現,為了讓你建立的菜單在頁面上顯示,還需要做以下幾步.

打開你主題的FUNCTION.PHP文件在其中加入以下代碼:

register_nav_menus();

wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );

通過register_nav_menus()這個函數注冊一個菜單,它還支持多個菜單的注冊,之后你就可以在頁面中有菜單的顯示,類似于這樣的HTML

WORDPRESS它為菜單中的LI分配了相應的class,不難發現 為當前頁面分配的是 .current-menu-item,當前文章所在分類為.current-post-ancestor ..

所以我們就可以直接給這些Class加上你想要的CSS樣式就行了,很簡單吧,呵呵,代碼如下:

1. .current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a { 
2.      color: green; 
3. } 

到這里就OK啦,效果見本網站菜單,好像是廢話...

二級下拉菜單

原來css顯示二級菜單部分,代碼如下:

#access ul li:hover > ul {display: block;}

偶的博客因為已經添加了jQuery庫,所以很容易實現動態下拉菜單效果,添加如下代碼:

1. jQuery(document).ready(function($) { 
2. $(‘#access ul li’).hover(function() { 
3. $(‘ul’, this).slideDown(300) 
4. }, 
5. function() { 
6. $(‘ul’, this).slideUp(300) 
7. }) 
8. }); 

使用Jquery后二級菜單在ie6、ie7、ie8、firefox下均能動態顯示.