multi-level Navigation是計算機外掛程式。
基本介紹
- 中文名:外掛程式使用方法與教程
- 外文名:multi-level Navigation
- 外掛程式:wordpress
- 作用:件就可以幫你實現一切下拉選單
wordpress外掛程式
Multi-levelNavigationplugin外掛程式使用方法與教程
很多人希望讓自己的wordpress導航欄能夠實現單多級顯示、下拉顯示、彈出式顯示,因為如果你的內容和分類足夠多的話,這些下拉選單都是必須的。今天免費資源部落介紹的Multi-levelNavigationPlugin外掛程式就可以幫你實現一切下拉選單。
Multi-levelNavigationPlugin外掛程式作用就是可以將導航菜實現任意級的下拉選單顯示,你可以將你存檔、分類、頁面、友情連結、評論等作為導航選單。另外,一個很好的設計就是你可以在直接後台設定導航的css從而讓導航欄與你的主題相適應。
Multi-levelNavigationPlugin外掛程式使用方法與
教程
:
一、首先下載:Multi-levelNavigationPlugin外掛程式,你可以在wordpress後台添加外掛程式中搜尋下載,也可以點擊下載:Multi-levelNavigationPlugin
二、下載完成後將外掛程式上傳上wordpress部落格的plugin目錄下,然後進入“外掛程式”選項中將Multi-levelNavigationPlugin激活就可以使用了。
三、激活後,進入“設定”選項後你就可以你就可以看到“Multi-levelNavigation”的設定項了。點擊進入吧。
這裡的Introduction、Appearance、menucontents、Setting四個選項,分別表示外掛程式介紹、外觀設定(這裡可以直接設定css)、下拉選單內容和參數設定。
四、首先找到你的主題的header.php檔案,在你的想要的實現導航欄的地方插入語句:
這段語句就是用來調用Multi-levelNavigation外掛程式在你的網頁頭部插入一個導航欄層,然後實現下拉選單樣式,由於層與層之間的關係,因些你可以將該語句放到任意一個你實現導航功能的地方,比如側邊欄或者底部也行。
五、
menucontents設定
。現在進入menucontents設定導航顯示的內容了。這裡有Mainmenucontents、Secondmenucontents、Modifications、Categoriessettings、Numberofrecentpostsandcomments、CustomHTMLcode等設定項目。
1、Mainmenucontents是用來設定你的主導航欄的內容的,你可以設定10個MenuItem,然後在Item中你可以選擇任何內容作為你的下拉選單的內容,包括了分類、pages、連結、評論、存檔等。另外你還可以自定義,用來生成在wordpress沒有頁面導航。
2、Secondmenu設定和Mainmenucontents一樣的,如果你的網站有兩個導航欄的話,就可以在這裡設定了。
3、Modifications中:
a、Title可以設定顯示的標題,如果將“home”你可以改成“免費資源部落主頁”等。TitleURL's你可以設定你的導航欄欄目的連結,一般不用修改,保持為空就行了。
b、Pages/categoriestoexclude用來包含或者去除某些下拉選單選項。例如不想把免費php空間顯示在免費空間的下拉選單中,就可以在Categoriestoincludeorexclude中選擇免費PHP空間,然後選擇exclude就可以了。
c、Pages/categoriesdepth用來顯示你的下拉層級的。toplevelonly只顯示一層,沒有下拉選單。1levelofchildren顯示你的一級子分類,例如免費wordpress教程是免費教程中的一級子分類,選擇1levelofchildren就會顯示出來。
2levelofchildren顯示二級子分類。如果在免費wordpress教程中再設一個子分類話,如外掛程式教程,那么當你的滑鼠移動到免費wordpress教程時將會出現外掛程式教程分類。
infinite表示顯示層級不受限制。
4、Categoriessettings中Categoryorder顯示子分類排列的順序,你可以以設定為按name、id的升序或者降序來排列。Showemptycategories表示顯示沒有文章或者子分類的分類欄目。
5、CustomHTMLcode用來自定義你導航欄代碼的。如果你Multi-levelNavigationPlugin與你的主題不兼容話,你可以在這裡自己編寫代碼直接在你的主題實現導航欄,這個可能需要懂得html知識。
下面是免費資源部落使用Multi-levelNavigationPlugin外掛程式製作的wordpress導航欄下拉選單樣式:
六、
Setting參數設定。
1、Speedoffade-ineffect下拉選單顯示的速度,如果你是一個懶洋洋的人,你可以設定為slow,這樣你的下拉選單會很慢地打開,如果你是一個爽快的人,你可以設定為instant,下拉選單會迅速打開。
2、Sensitivity敏感度設定。high表示滑鼠移動到導航欄時就會彈出下拉選單,依據個人喜好來設定吧。
3、Enablekeyboardaccessiblemenu這個可以實現瀏覽者使用鍵盤的快捷鍵來實現下拉選單。
4、Addasecondmenu?這個是可以用來設定兩個導航欄的。例如你可以看到有的網站上面一個導航欄的肉容是page類的,下面一個導航欄是Categories類的,一個比較有代表的就是:WordPress非官方中文站。
七、
appearance是用來設定導航的css的
。如果你知道如何設定css可以點擊進入PixoPointMulti-levelCSSGenerator來自己製作css,將製作好的css代碼放在appearance就可以了。
如果你不懂不方面的知識話,免費資源部落將為你詳細解釋一下appearance默認的css樣式,你只要稍微做一個修改,就可以改變導航欄的樣式。下面是默認的css代碼:
#suckerfishnav{background:#99CCFFurl("../multi-level-navigation-plugin/images/suckerfish_green.png")repeat-x;font-size:14px;font-family:verdana,sans-serif;font-weight:bold;width:100%;}#suckerfishnav,#suckerfishnavul{float:center;list-style:none;line-height:23px;padding:0;border:1pxsolid#aaa;margin:0;width:100%;}#suckerfishnava{display:block;color:#0080C0;text-decoration:none;padding:0px10px;}#suckerfishnavli{float:left;padding:0;}#suckerfishnavul{position:absolute;left:-999em;height:auto;width:151px;font-weight:normal;margin:0;line-height:1;border:0;border-top:1pxsolid#99CCFF;}#suckerfishnavlili{width:149px;border-bottom:1pxsolid#99CCFF;border-left:1pxsolid#99CCFF;border-right:1pxsolid#99CCFF;font-weight:bold;font-family:verdana,sans-serif;}#suckerfishnavlilia{padding:4px10px;width:130px;font-size:12px;color:#99CCFF;}#suckerfishnavliulul{margin:-21px00150px;}#suckerfishnavlili:hover{background:#99CCFF;}#suckerfishnavliulli:hovera,#suckerfishnavliullili:hovera,#suckerfishnavliullilili:hovera,#suckerfishnavliullilili:hovera{color:#FFFFFF;}#suckerfishnavli:hovera,#suckerfishnavli.sfhovera{color:#FFFFFF;}#suckerfishnavli:hoverlia,#suckerfishnavlili:hoverlia,#suckerfishnavlilili:hoverlia,#suckerfishnavlililili:hoverlia{color:#FFFFFF;}#suckerfishnavli:hoverulul,#suckerfishnavli:hoverululul,#suckerfishnavli:hoverulululul,#suckerfishnavli.sfhoverulul,#suckerfishnavli.sfhoverululul,#suckerfishnavli.sfhoverulululul{left:-999em;}#suckerfishnavli:hoverul,#suckerfishnavlili:hoverul,#suckerfishnavlilili:hoverul,#suckerfishnavlililili:hoverul,#suckerfishnavli.sfhoverul,#suckerfishnavlili.sfhoverul,#suckerfishnavlilili.sfhoverul,#suckerfishnavlililili.sfhoverul{left:auto;background:#00CC66;}#suckerfishnavli:hover,#suckerfishnavli.sfhover{background:#5E7AD3;}
1、"../multi-level-navigation-plugin/images/suckerfish_green.png"這一句表示導航欄的背景圖像,在Multi-levelNavigationPlugin的image資料夾中作者提供了很多的圖片,你可以自由地選擇。
2、{color:#FFFFFF}是用來設定導航欄下拉選單的字型顏色的,免費資源部落將它設定為白色的。
3、5E7AD3這些是用來設定下拉選單選項的背景顏色的。大家可以依據個人喜好,自己修改吧。