轉自http://www.joomlagate.com

“彈出菜單”這個說法本來不規范，盡管你我都明白這是什么意思，而實際上我們所理解的那個菜單樣式英文說法是“Slide Menu”（滑動菜單），如果要用“彈出菜單”就成了“Popup Menu”。當然，“走的人多了也便成了路”，我考慮再三，還是尊重中國風俗，在文章標題中使用了錯誤的說法，希望不要誤導了各位。

在Joomla世界，建造一個滑動菜單可以有N多選擇。JA Transmenu 模塊是其中一個，下圖中所演示的菜單就是用這個模塊做成的。我之所以首先來演示這個模塊，是因為以下兩點原因：

1、它是免費的。

2、簡單易用。

?

在繼續閱讀之前，請用鼠標指向上面的菜單，看看其彈出效果，你甚至可以點擊其中某些鏈接。然后我們再來回答“怎么做”這個問題。

1、創建一個點不動的菜單鏈接

在上面演示中，一級菜單中的“酷站巡展”這個鏈接是點不動的。這個效果適合于強制訪客點擊二級菜單的需要。有人認為，在新建菜單項時，選擇“占位符/分隔符”（Separator / Placeholder）就能造成一個點不動的鏈接，因為它不指向任何目標。不過，我發現這種辦法所生成的菜單鏈接其樣式很糟糕，無法與其他同級鏈接保持一致，因為它的CSS類不是mainlevel。

在本文的第一版我曾經認為將某個一級菜單項目的類型選擇為“Link-URL”，然后將此URL定義為“#”符號即可建成無法點擊的菜單項。經過測試這個方法無法做到。我們還得用“占位符”來建立這種菜單項。

當然，我們需要通過CSS使占位符的外觀與可以點擊的鏈接相同。具體辦法后面詳述。這個小技巧雖然與滑動菜單沒有直接聯系，但是與上面演示的卻有聯系，因此我在此也捎帶說一下。

2、建立多級菜單

Joomla自身允許創建多級菜單，問題是它無法展示出滑動效果。因此，我們先解決第一步：創建多級菜單。

使用（超級）管理員身份登錄到Joomla網站后臺，點擊菜單上的“Menu”，然后選擇一個你想實現多級滑動的菜單，比如說topmenu，點擊其名稱。這時會展示出所有已屬于topmenu的菜單鏈接，我猜想你那里很可能還是單級的。

點擊右上角工具欄上的“New”按鈕，新建一個菜單項目。根據你的目標選擇菜單類型，例如要指向FireBoard論壇，就選擇“component”類型。然后點擊“Next”按鈕。實現多級的關鍵就在下面這個頁面上—— 仔細看看，“Parent Item”這個設置，中文版本應該是“上級項目”，默認是選擇了“Top”，即“頂級”（如下圖所示），所以你新建的菜單鏈接都屬于第一級。假如現在我們要將Fireboard論壇的菜單放到第二級，那么就必須在此為它選擇上級菜單項目。選中之后，點擊工具欄上的“Save”按鈕保存新菜單項。

保存之后，又回到了剛才的topmenu內容列表。這時可以看到，新建立的菜單位于某個一級菜單之下，并且在版面上向右增加了縮進，很容易就能看出來父級菜單和子級菜單的關系。

如果要將現有的某個一級菜單變為二級菜單，只需要在topmenu內容列表上點擊其名稱，進入其設置頁面，然后將“Parent Item”這里選擇為Top之外的其他一級菜單項即可。

同理，你可以建立三級、四級、…… N 級菜單。

3、完成多級滑動菜單

從本站下載JA Transmenu 2.0 簡體中文版，這是一個標準模塊。從Joomla后臺安裝它。這個模塊本身沒有任何內容，它的任務是在前臺展示管理員指定的某個菜單，如上面提到的topmenu。

既然我們要通過JA Transmenu來展示topmenu的內容，那么原來的topmenu就必須取消發布。否則前臺就會出現兩個重復的topmenu內容。

將原來的topmenu取消發布之后，我們點擊后臺模塊列表中的JA Transmenu名稱進入其設置頁面。可以看出，設置參數并不多。

?

前兩個參數都是關于CSS的，為了便于用戶自定義菜單的樣式。我們先從淺處入手，不必理會這里。

“菜單名稱”這里需要管理員指定用JA Transmenu來展示哪個菜單模塊，因為它無法包攬所有菜單。我們本例中就指定使用topmenu吧，因為剛才我們為topmenu建立了多級菜單鏈接。

“菜單類型”是要管理員決定，前臺的滑動菜單其一級菜單是水平放置，還是垂直放置？比如本例中的topmenu，我們一般都是習慣于水平放置，因此在這里選擇“水平”即可。

“菜單方向”則是指二級菜單的彈出方向，不要管三級、四級，因為那些默認都是水平的。二級菜單需要指定方向，是因為一級菜單的方向有兩種可能。既然我們將一級菜單設計成了“水平”，那么二級菜單應該是在垂直方向上。這里有兩種選項：向上或者向下。很顯然，一般來說，我們希望二級菜單向下彈出，就如同本文第一頁展示的那個菜單。不過，也難免某些用戶希望出現Windows的開始菜單那樣的效果，那么你選擇“向上”即可。

“菜單相對位置”是指二級以下的菜單彈出方向。因為前面的參數已經把一級、二級菜單方向都定義了。所以，我們希望三級菜單從哪里彈出來就選擇哪個方向。在本例中，三級菜單是從二級菜單的右側彈出的；又由于我希望一、二、三級菜單顯示一個逐級下降的外觀，所以我選擇了“右下”方向。

“顯示菜單圖標”這個是指提示存在下級菜單的那個圖標。在本例中就是二級菜單上“Joomla之門”右側那兩個白色大于號（>>），這個圖標提示該項目存在下級菜單。如果你不想顯示，選擇“否”即可。

“菜單圖標位置”說的是上一條中那個圖標顯示在什么位置。一般來說，當然是顯示在下級菜單彈出的位置。本例中下級菜單從右側彈出，因此我選擇讓這個小圖標顯示在右側。當然了，如果你在上一條中選擇了“否”，這一條的設置就沒有意義。

“上端位置”和“左側位置”這兩條是專門限定二級菜單的相對位置的。由于JA Transmenu使用了Javascript來實現滑動效果，因此在某些網站的模板中可能出現奇怪現象：就是二級菜單彈出的位置距離其父級菜單項目有一定距離。那么我們就可以通過這兩個參數來調整。這里只能填寫整數數字，不需要填寫單位，默認為“像素”（pixel）。如果你想要將二級菜單向右移動，“左側位置”就填寫正整數；如果需要向下移動，“上端位置”就填寫正整數。如果需要向左、向上移動呢？分別填寫負整數即可，如“左側位置”填 -200 ，就表示二級菜單向左移動200像素。在實際應用中，是否需要移動，移動多少，需要用戶在前臺觀看效果，刷新頁面，進行調整。

“下級菜單水平留白”和“下級菜單垂直留白”分別指三級以后的菜單在彈出時其頂端距離父級菜單右上角的水平和垂直距離。例如，在本例中，我需要三級菜單緊貼二級菜單右側，因此我將“下級菜單水平留白”設為“1”（單位：像素）；我希望三級菜單彈出時略低于其父級菜單，因此我將“下級菜單垂直留白”設為5。

設置完成后，將此模塊發布到原來展示topmenu的模塊位置，然后刷新前臺頁面，就應該看到滑動菜單的效果了。

4、自定義JA Transmenu滑動菜單的樣式

細心的讀者可能已經發現，上述參數中沒有針對滑動菜單的字體、顏色、背景等等作出定義。難道所有JA Transmenu的用戶都使用同一個效果嗎？當然不是。

按理來說，這些設置也應該出現在后臺參數中，這樣更符合Joomla的操作習慣，也方便用戶自定義菜單外觀。可是，該模塊的作者，JoomlArt團隊正在忙著制作、銷售專業模板，根本沒有計劃改進這個模塊。所以，我們就自己動手吧。

我們要用到三個文件：transmenu.js、transmenuh.css或transmenuv.css。在安裝之后，它們位于 /modules/ja_transmenu/ 目錄中。我之所以用“或”，是因為后面兩個文件只用一個。具體哪一個取決于你所定義的一級菜單的方向，即后臺參數中“菜單類型”，如果是“水平”，就用前者；“垂直”則用后者。這兩個文件名末尾的h和v已經說明了這一點。

在transmenu.js這個文件的第45行，我們只設定一個內容：TransMenu.backgroundColor，它表示次級菜單的背景顏色。其余樣式均在CSS文件中。

在本例中，我們設定了前臺菜單為“水平”，因此我們打開transmenuh.css這個文件，逐個設置菜單的字體、顏色、背景、透明度、鼠標指向時的顏色變化、點擊之后的鏈接顏色等等。我在transmenuh.css這個文件中用中文解釋了部分代碼的含義，transmenuv.css這個文件沒有注釋，不過我相信大同小異。請各位會員自己按照需要調整吧。

如果你建立了一個類型為“占位符”的一級菜單項，以強制訪客點擊二級菜單，那么你會發現該占位符的外觀與其他同級菜單鏈接迥然不同，非常難看。既然是外觀，那么就可以通過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 {

這樣就等于給“占位符”定義了與其他同級可點擊鏈接相同的外觀。

這時，在前臺可以看到“占位符”類型的菜單項目也有了相同的字號、字體、顏色和背景色。但是，當我們把鼠標指向這個“占位符”類型的菜單項目時，就露出了馬腳：鼠標沒有變成一只手的樣子，而是普通的“I”光標符號。由于大多數人已經習慣了鼠標指向菜單時必然是手形符號，那么現在這種情況就容易讓訪客感到沮喪。

Ok，好在CSS也能偽裝這一點。在上面修改的代碼下面一行，插入一句：

?

cursor: hand;

這句代碼意思是只要鼠標進入菜單區域，就一直顯示手形外觀。你可以在我正在建設的一個新網站 http://www.spinechina.org 上面看看這個效果。

還有一處需要修改，因為如果將一級菜單設置為“占位符”類型，則點擊其二級菜單之后，一級菜單成了“當前菜單”（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。

如果還發現其他外觀問題，我相信都可以在CSS文件中得到改善。這里不能一一列舉，有關CSS知識可以參考《CSS權威指南》PDF中文版 。

如果你使用了其他滑動菜單模塊，一樣可以通過CSS來使得“占位符”型菜單鏈接看起來與正常鏈接沒什么區別。或許CSS語句不通，但是道理相同，所謂“觸類旁通”，各位看官自己摸索吧。

5、JA Transmenu的缺點

這個滑動菜單模塊也不是完美的。最重要一點就是：在每個網站只能為一個菜單模塊實現滑動效果。如果我們既要在topmenu實現多級滑動，又要在mainmenu實現多級滑動，那么這個模塊做不到。即使我們通過模塊列表上的“Copy”按鈕可以復制一份，但是我們無法復制 /modules/ja_transmenu/ 這個目錄。當然了，如果高手從代碼修改起，或許可以制作出一個復制件，但這已經遠遠超出了我這個菜鳥的能力范圍，留待高人講解吧。

轉載于:https://www.cnblogs.com/JuneZhang/archive/2010/11/02/1867020.html

總結

以上是生活随笔為你收集整理的用 JA Transmenu 模块做多级弹出菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。