想給自己的博客加上動(dòng)態(tài)顯示菜單,或者叫高亮當(dāng)前菜單的樣式,其實(shí)這實(shí)現(xiàn)起來(lái)并不難,因?yàn)?WordPress 3.0之后的版本開(kāi)始支持自定義動(dòng)態(tài)菜單,只要你會(huì)基本的HTML和CSS知識(shí).

首先你要為你的站點(diǎn)建立一個(gè)菜單,可以通過(guò)WordPress的管理后臺(tái) – 外觀 – 菜單欄目實(shí)現(xiàn),為了讓你建立的菜單在頁(yè)面上顯示,還需要做以下幾步.

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

register_nav_menus();

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

通過(guò)register_nav_menus()這個(gè)函數(shù)注冊(cè)一個(gè)菜單,它還支持多個(gè)菜單的注冊(cè),之后你就可以在頁(yè)面中有菜單的顯示,類(lèi)似于這樣的HTML

WORDPRESS它為菜單中的LI分配了相應(yīng)的class,不難發(fā)現(xiàn) 為當(dāng)前頁(yè)面分配的是 .current-menu-item,當(dāng)前文章所在分類(lèi)為.current-post-ancestor ..

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

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

到這里就OK啦,效果見(jiàn)本網(wǎng)站菜單,好像是廢話(huà)...

二級(jí)下拉菜單

原來(lái)css顯示二級(jí)菜單部分,代碼如下:

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

偶的博客因?yàn)橐呀?jīng)添加了jQuery庫(kù),所以很容易實(shí)現(xiàn)動(dòng)態(tài)下拉菜單效果,添加如下代碼:

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后二級(jí)菜單在ie6、ie7、ie8、firefox下均能動(dòng)態(tài)顯示.