WIKI使用導(dǎo)航
站長百科導(dǎo)航
站長專題
- 網(wǎng)站推廣
- 網(wǎng)站程序
- 網(wǎng)站賺錢
- 虛擬主機(jī)
- cPanel
- 網(wǎng)址導(dǎo)航專題
- 云計算
- 微博營銷
- 虛擬主機(jī)管理系統(tǒng)
- 開放平臺
- WIKI程序與應(yīng)用
- 美國十大主機(jī)
Joomla/用JA Transmenu模塊做多級彈出菜單
在Joomla世界，建造一個滑動菜單可以有N多選擇。JA Transmenu 模塊是其中一個，下圖中所演示的菜單就是用這個模塊做成的。之所以首先來演示這個模塊，是因為以下兩點(diǎn)原因：
1、它是免費(fèi)的。
2、簡單易用。
創(chuàng)建一個點(diǎn)不動的菜單鏈接[ ]
在上面演示中，一級菜單中的“酷站巡展”這個鏈接是點(diǎn)不動的。這個效果適合于強(qiáng)制訪客點(diǎn)擊二級菜單的需要。有人認(rèn)為，在新建菜單項時，選擇“占位符/分隔符”（Separator / Placeholder）就能造成一個點(diǎn)不動的鏈接，因為它不指向任何目標(biāo)。不過，這種辦法所生成的菜單鏈接其樣式很糟糕，無法與其他同級鏈接保持一致，因為它的CSS類不是mainlevel。
建立多級菜單[ ]
Joomla自身允許創(chuàng)建多級菜單，問題是它無法展示出滑動效果。因此，我們先解決第一步：創(chuàng)建多級菜單。
使用（超級）管理員身份登錄到Joomla網(wǎng)站后臺，點(diǎn)擊菜單上的“Menu”，然后選擇一個你想實現(xiàn)多級滑動的菜單，比如說topmenu，點(diǎn)擊其名稱。這時會展示出所有已屬于topmenu的菜單鏈接，我猜想你那里很可能還是單級的。
點(diǎn)擊右上角工具欄上的“New”按鈕，新建一個菜單項目。根據(jù)你的目標(biāo)選擇菜單類型，例如要指向FireBoard論壇，就選擇“component”類型。然后點(diǎn)擊“Next”按鈕。實現(xiàn)多級的關(guān)鍵就在下面這個頁面上—— 仔細(xì)看看，“Parent Item”這個設(shè)置，中文版本應(yīng)該是“上級項目”，默認(rèn)是選擇了“Top”，即“頂級”（如下圖所示），所以你新建的菜單鏈接都屬于第一級。假如現(xiàn)在我們要將Fireboard論壇的菜單放到第二級，那么就必須在此為它選擇上級菜單項目。選中之后，點(diǎn)擊工具欄上的“Save”按鈕保存新菜單項。
保存之后，又回到了剛才的topmenu內(nèi)容列表。這時可以看到，新建立的菜單位于某個一級菜單之下，并且在版面上向右增加了縮進(jìn)，很容易就能看出來父級菜單和子級菜單的關(guān)系。
如果要將現(xiàn)有的某個一級菜單變?yōu)槎壊藛?，只需要在topmenu內(nèi)容列表上點(diǎn)擊其名稱，進(jìn)入其設(shè)置頁面，然后將“Parent Item”這里選擇為Top之外的其他一級菜單項即可。
完成多級滑動菜單[ ]
從Joomla后臺安裝JA Transmenu。這個模塊本身沒有任何內(nèi)容，它的任務(wù)是在前臺展示管理員指定的某個菜單，如上面提到的topmenu。
既然我們要通過JA Transmenu來展示topmenu的內(nèi)容，那么原來的topmenu就必須取消發(fā)布。否則前臺就會出現(xiàn)兩個重復(fù)的topmenu內(nèi)容。
將原來的topmenu取消發(fā)布之后，我們點(diǎn)擊后臺模塊列表中的JA Transmenu名稱進(jìn)入其設(shè)置頁面。可以看出，設(shè)置參數(shù)并不多。
前兩個參數(shù)都是關(guān)于CSS的，為了便于用戶自定義菜單的樣式。我們先從淺處入手，不必理會這里。
“菜單名稱”這里需要管理員指定用JA Transmenu來展示哪個菜單模塊，因為它無法包攬所有菜單。我們本例中就指定使用topmenu吧，因為剛才我們?yōu)閠opmenu建立了多級菜單鏈接。
“菜單類型”是要管理員決定，前臺的滑動菜單其一級菜單是水平放置，還是垂直放置？比如本例中的topmenu，我們一般都是習(xí)慣于水平放置，因此在這里選擇“水平”即可。
“菜單方向”則是指二級菜單的彈出方向，不要管三級、四級，因為那些默認(rèn)都是水平的。二級菜單需要指定方向，是因為一級菜單的方向有兩種可能。既然我們將一級菜單設(shè)計成了“水平”，那么二級菜單應(yīng)該是在垂直方向上。這里有兩種選項：向上或者向下。很顯然，一般來說，我們希望二級菜單向下彈出，就如同本文第一頁展示的那個菜單。不過，也難免某些用戶希望出現(xiàn)Windows的開始菜單那樣的效果，那么你選擇“向上”即可。
“菜單相對位置”是指二級以下的菜單彈出方向。因為前面的參數(shù)已經(jīng)把一級、二級菜單方向都定義了。所以，我們希望三級菜單從哪里彈出來就選擇哪個方向。在本例中，三級菜單是從二級菜單的右側(cè)彈出的；又由于我希望一、二、三級菜單顯示一個逐級下降的外觀，所以選擇了“右下”方向。
“顯示菜單圖標(biāo)”這個是指提示存在下級菜單的那個圖標(biāo)。在本例中就是二級菜單上“Joomla之門”右側(cè)那兩個白色大于號（>>），這個圖標(biāo)提示該項目存在下級菜單。如果你不想顯示，選擇“否”即可。
“菜單圖標(biāo)位置”說的是上一條中那個圖標(biāo)顯示在什么位置。一般來說，當(dāng)然是顯示在下級菜單彈出的位置。本例中下級菜單從右側(cè)彈出，因此選擇讓這個小圖標(biāo)顯示在右側(cè)。當(dāng)然了，如果你在上一條中選擇了“否”，這一條的設(shè)置就沒有意義。
“上端位置”和“左側(cè)位置”這兩條是專門限定二級菜單的相對位置的。由于JA Transmenu使用了Javascript來實現(xiàn)滑動效果，因此在某些網(wǎng)站的模板中可能出現(xiàn)奇怪現(xiàn)象：就是二級菜單彈出的位置距離其父級菜單項目有一定距離。那么我們就可以通過這兩個參數(shù)來調(diào)整。這里只能填寫整數(shù)數(shù)字，不需要填寫單位，默認(rèn)為“像素”（pixel）。如果你想要將二級菜單向右移動，“左側(cè)位置”就填寫正整數(shù)；如果需要向下移動，“上端位置”就填寫正整數(shù)。如果需要向左、向上移動呢？分別填寫負(fù)整數(shù)即可，如“左側(cè)位置”填 -200 ，就表示二級菜單向左移動200像素。在實際應(yīng)用中，是否需要移動，移動多少，需要用戶在前臺觀看效果，刷新頁面，進(jìn)行調(diào)整。
“下級菜單水平留白”和“下級菜單垂直留白”分別指三級以后的菜單在彈出時其頂端距離父級菜單右上角的水平和垂直距離。例如，在本例中，需要三級菜單緊貼二級菜單右側(cè)，因此將“下級菜單水平留白”設(shè)為“1”（單位：像素）；希望三級菜單彈出時略低于其父級菜單，因此將“下級菜單垂直留白”設(shè)為5。
設(shè)置完成后，將此模塊發(fā)布到原來展示topmenu的模塊位置，然后刷新前臺頁面，就應(yīng)該看到滑動菜單的效果了。
自定義JA Transmenu滑動菜單的樣式[ ]
細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)，上述參數(shù)中沒有針對滑動菜單的字體、顏色、背景等等作出定義。難道所有JA Transmenu的用戶都使用同一個效果嗎？當(dāng)然不是。
按理來說，這些設(shè)置也應(yīng)該出現(xiàn)在后臺參數(shù)中，這樣更符合Joomla的操作習(xí)慣，也方便用戶自定義菜單外觀。可是，該模塊的作者，JoomlArt團(tuán)隊正在忙著制作、銷售專業(yè)模板，根本沒有計劃改進(jìn)這個模塊。所以，我們就自己動手吧。
我們要用到三個文件：transmenu.js、transmenuh.css或transmenuv.css。在安裝之后，它們位于 /modules/ja_transmenu/ 目錄中。我之所以用“或”，是因為后面兩個文件只用一個。具體哪一個取決于你所定義的一級菜單的方向，即后臺參數(shù)中“菜單類型”，如果是“水平”，就用前者；“垂直”則用后者。這兩個文件名末尾的h和v已經(jīng)說明了這一點(diǎn)。
在transmenu.js這個文件的第45行，我們只設(shè)定一個內(nèi)容：TransMenu.backgroundColor，它表示次級菜單的背景顏色。其余樣式均在CSS文件中。
在本例中，我們設(shè)定了前臺菜單為“水平”，因此我們打開transmenuh.css這個文件，逐個設(shè)置菜單的字體、顏色、背景、透明度、鼠標(biāo)指向時的顏色變化、點(diǎn)擊之后的鏈接顏色等等。我在transmenuh.css這個文件中用中文解釋了部分代碼的含義，transmenuv.css這個文件沒有注釋，不過我相信大同小異。請各位會員自己按照需要調(diào)整吧。
如果你建立了一個類型為“占位符”的一級菜單項，以強(qiáng)制訪客點(diǎn)擊二級菜單，那么你會發(fā)現(xiàn)該占位符的外觀與其他同級菜單鏈接迥然不同，非常難看。既然是外觀，那么就可以通過CSS來修改：打開 /modules/ja_transmenu/ 文件夾里面的transmenuh.css（如果是垂直菜單則為transmenuv.css），大約在116行，找到：
a.mainlevel-trans:link, a.mainlevel-trans:visited {
將其修改為：
a.mainlevel-trans:link, a.mainlevel-trans:visited, .mainlevel-trans {
這樣就等于給“占位符”定義了與其他同級可點(diǎn)擊鏈接相同的外觀。
這時，在前臺可以看到“占位符”類型的菜單項目也有了相同的字號、字體、顏色和背景色。但是，當(dāng)我們把鼠標(biāo)指向這個“占位符”類型的菜單項目時，就露出了馬腳：鼠標(biāo)沒有變成一只手的樣子，而是普通的“I”光標(biāo)符號。由于大多數(shù)人已經(jīng)習(xí)慣了鼠標(biāo)指向菜單時必然是手形符號，那么現(xiàn)在這種情況就容易讓訪客感到沮喪。
Ok，好在CSS也能偽裝這一點(diǎn)。在上面修改的代碼下面一行，插入一句：
cursor: hand;
這句代碼意思是只要鼠標(biāo)進(jìn)入菜單區(qū)域，就一直顯示手形外觀。
還有一處需要修改，因為如果將一級菜單設(shè)置為“占位符”類型，則點(diǎn)擊其二級菜單之后，一級菜單成了“當(dāng)前菜單”（active menu），這時該一級菜單的外觀又不那么美觀了。
修改方法是在CSS文件中140行左右，找到：
a.mainlevel_active-trans, a.mainlevel_active-trans:visited {
修改為：
a.mainlevel_active-trans, a.mainlevel_active-trans:visited, span.mainlevel_active-trans{
這是因為“占位符”型的一級菜單項目不是鏈接（a），而是span。
JA Transmenu的缺點(diǎn)[ ]
這個滑動菜單模塊也不是完美的。最重要一點(diǎn)就是：在每個網(wǎng)站只能為一個菜單模塊實現(xiàn)滑動效果。如果我們既要在topmenu實現(xiàn)多級滑動，又要在mainmenu實現(xiàn)多級滑動，那么這個模塊做不到。即使我們通過模塊列表上的“Copy”按鈕可以復(fù)制一份，但是我們無法復(fù)制 /modules/ja_transmenu/ 這個目錄。