wordpress中CSS來簡單實現下拉式功能表效果

最近，群裡很多朋友都安裝了ssmay主題，感覺還不錯，不過，有幾個朋友提出，為什麼ssmay主題沒有下拉式功能表呀。當時，也沒在意，因為這個主題是根據自己的需求來設計的。後來，又有幾個朋友提到這個事情，我覺得也是，為什麼不給ssmay主題弄一個下拉式功能表呢？那樣啟不是讓網站更加的人性——可展示的分類就更加多了。其實，實現下拉式功能表，有好幾種途徑可以實現，如JS實現、外掛程式實現、還有CSS實現。這裡，我只是介紹通過CSS來簡單實現 下拉式功能表效果。

首先，我們要對菜單做相應的設定。

進入後台——>外觀——>菜單，建立菜單並把分類目錄添加到這個菜單裡，這裡不多說，然後，把你需要顯示的二級菜單（或子分類）移到它的一級菜單下面（或父分類），如下圖，PHP開發是父分類，網站建設是子分類。

如果你使用的主題是Ssmay 1.1主題，那麼到這裡你的菜單就是下拉式菜單了，到這裡就可以結束了。如果你想研究一下，可以繼續向下看。

然後，修改頭部檔案導覽功能表的代碼，把原有的導覽功能表代碼換成下面的這句代碼。

代碼如下	複製代碼
<?php wp_nav_menu( array( ‘container’ => ”,’items_wrap’ => ‘<ul id=”nav” class=”menu”>%3$s</ul>’,'fallback_cb’ => ” ) ); ?>

最後，是設定相關的CSS代碼，把下面這段代碼放到style.css檔案裡。

 

代碼如下

複製代碼

/*下拉式功能表*/ #nav{ background:#222; font-size:1.1em; } #nav, #nav ul { list-style: none; line-height: 1; } #nav a, #nav a:hover { display: block; text-decoration: none; border:none; } #nav li { float: left; list-style:none; border-right:1px solid #a9a9a9; } #nav a, #nav a:visited { display:block; font-weight:bold; color: #f5f5f4; padding:0px 0px; } #nav a:hover, #nav a:active, .current_page_item a, #home .on { background:#000; text-decoration:none } #nav li ul { position: absolute; left: -999em; height: auto; width: 90px; border-bottom: 1px solid #a9a9a9; } #nav li li { width: 90px; border-top: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; border-left: 1px solid #a9a9a9; background: #777; } #nav li li a, #nav li li a:visited { font-weight:normal; font-size:0.9em; color:#FFF; } #nav li li a:hover, #nav li li a:active { background:#000; }www.111cn.net #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } a.main:hover { background:none; }

這樣，下拉式功能表就實現了。當然，我這裡只實現了二級下拉式功能表，沒有實現三級下拉式功能表，如果想實現三級下拉式功能表，還可以進一步去做。不過，我覺得wordpress網站沒有必要設定到三級下拉式功能表，因為網站一般都不會太大。呵呵，雖然這樣的下拉式功能表沒有JS設計出來的炫酷，但是在SEO方面卻要略勝一籌。