???????? 以前在多個項目中，想實現無限級下拉的菜單，找了很多很多的Js代碼，結果卻不讓我很滿意，雖然是JS的代碼，看是看的懂，可是改起來卻很吃力，原先是兩級下拉的，現在想加一級就更吃力。

???????? 今天終于發現FireWork做下拉菜單簡直是超強，以下是相關文章，轉下，做個紀念。

　　與圖形設計制作軟件的龍頭老大-Adobe公司的Photoshop相比，Macromedia公司的Fireworks 4(以下簡稱FW4)可謂短小精悍，同時，她對于網頁圖形制作的強大支持，也使其輕松獲取了大批網頁設計師的信任和追隨。配合Macromedia網頁制作三劍客中的另一位大名鼎鼎的劍客Dreamweaver 4(以下簡稱DW4)，FW4可以輕而易舉地做出時下網頁中甚為流行的彈出菜單(亦稱下拉菜單)。如果你對DHTML網頁編程不甚熟悉，看到代碼就頭疼，不如跟隨筆者一起親身體驗FW4的魅力所在吧！

一、 在FW4中制作菜單

1．制作母菜單按鈕

　　打開FW4，選擇File菜單下的New，或者按Ctrl+N快捷鍵，如圖一新建一個文件，尺寸200X30像素，精度72像素/英寸，背景透明。



　　選擇Window菜單下的Tools打開工具面板，從工具面板上選擇矩形工具，



　　畫一個100X30像素大小的矩形，選擇Window菜單下的Info打開信息面板，直接輸入數值精確調整尺寸和位置；



選中這個矩形，Ctrl+C復制，Ctrl+V原地粘貼，這時候兩個矩形重疊，將上面這個矩形拖到旁邊，同樣使用信息面板定位；



　　然后分別選中這兩個矩形，調整它們的填充色和邊框色，方法有兩種，一是利用工具面板上的Color工具區里的Stroke和Fill按鈕，



　　二是選擇Window菜單下的Stroke和Fill分別打開線型面板和填充面板，在面板上選擇，注意的是線型要選"Pencilà1-Pixel Hard"或"BasicàHard Line"(如圖)，

　

　　這樣輸出后才能做出細邊框效果；從工具面板上選擇文字工具，輸入文字，注意選擇文字的平滑度為No Anti-Alias（關閉反鋸齒，如圖），



　　然后同時選中文字和其中一個矩形，從Modify菜單下的Align中分別選擇Center Vertical和Center Horizontal來對齊文字和矩形，效果如圖所示。



2．制作彈出菜單條目

　　同時選中對齊后的文字和矩形，選擇Insert菜單下的Convert to Symbol，或在矩形上點鼠標右鍵，在右鍵菜單里選Convert to Symbol，或者按F8快捷鍵，在彈出對話框里的Type中選Button(按鈕)，將這個矩形轉換成一個按鈕對象，



　　這時，將鼠標移到按鈕對象中間的圓形標志上鼠標會變成手形，單擊圓形標志，在彈出菜單中選擇Add Pop_up Menu…，



　　然后就可以在彈出的Set Pop-Up Menu設置窗中設置你的彈出菜單了。如下圖，筆者已經設置了一些菜單條目。



　　大家可以在Text中設置條目的文字名稱，在Link中設置條目的鏈接路徑，在Target中設置打開鏈接的目標窗口，設置完后點一下"+"按鈕就可以生成一個菜單條目了；如果想刪掉，點中條目，再點"-"按鈕就可以刪除條目；如果想修改條目設置，只需點中條目，修改各項設置后點Change按鈕即可。FW4的彈出菜單是可以做多級子菜單的，只要在根菜單條目下方建立子菜單條目，然后點中子菜單條目，再點窗口上方那兩個藍色圖標按鈕中的右邊一個Indent Menu（菜單縮進，即設為子菜單）就可以了，反之，點左邊那個Outdent Menu（菜單伸出，即設為根菜單）就可以將當前的子菜單設置成上一級根菜單。大家可能發現改變菜單條目的順序好象不方便，其實很簡單，只要點住條目并拖拉到你想要的位置就可以了。設置完菜單條目后，點Next進入菜單樣式設置窗。

3．設置彈出菜單條目樣式

　　值得一提的是，菜單樣式的設置可以分成兩種類型，




　　一種是如前圖所示的HTML模式，一種是如后圖所示的Image（貼圖）模式。它們的區別是，HTML模式下，菜單樣式完全由代碼控制，即時計算生成，顯示速度當然極快，非常流暢；Image模式下，菜單條目的背景可以顯示圖片，每次菜單彈出時，就會即時下載背景貼圖，這樣對高速網絡用戶來說幾乎感覺不到，但是對慢速網絡用戶，就會明顯覺察到貼圖下載顯示的時間滯后，造成不流暢的感覺。但是由于Image模式生成的菜單可以使用漂亮的貼圖，雖然FW4種提供選擇的貼圖樣式并不多，共21種，但只要在輸出后，找到這些圖片，用自定義的尺寸一致圖片替換掉，就可以做出完全屬于自己的個性菜單，比如在貼圖上打上你自己的網站Logo等等。這里筆者選擇HTML模式。樣式設置窗中，Up State是用來設置菜單條目處于普通狀態時的樣式，Over State是用來設置鼠標移到菜單條目上時的樣式。另外，Font是用來選擇顯示的字體，為了在網頁上能清晰顯示字體，建議大家在字體大小Size中選擇12，"B"按鈕是使用粗體字，"I"按鈕是使用斜體字。樣式設置將即時在下方的Preview區域中顯示，完成設置后點Finish按鈕生成彈出菜單。

4． 調整彈出菜單位置

　　如圖所示，生成的彈出菜單將以藍色線框表示，它的位置就是鼠標移到母菜單按鈕上它彈出的位置，大家可以點住彈出菜單的藍色線框，拖拉到你想要它彈出的位置，比如筆者想讓它在母菜單按鈕下方彈出。



5．調整母菜單按鈕與彈出菜單樣式一致

　　 有的朋友說，既然彈出菜單已經有樣式了，那么母菜單怎么辦？其實筆者早已想到，所以剛開始把母菜單做成了按鈕對象，雙擊母菜單按鈕對象，打開按鈕對象編輯窗，自己動手改按鈕的各個狀態吧，這屬于FW4的基本操作，筆者這里就不羅嗦了。



6．輸出彈出菜單

　　 剛才一直跟著做一定很累，所以另外還有一個矩形就留給大家自己練習一下。完成后可以選擇File菜單下的Export Preview，或者按Ctrl+Shift+X快捷鍵打開輸出設置窗口。如圖十七所示，在Option標簽頁下方的透底選項中選擇Alpha Transparency，Matte（基底色）中選擇你實際網頁使用的背景色，這樣菜單就可以和你的網頁天衣無縫地融為一體。



　　點Export按鈕，如圖十八，自己設置輸出路徑和文件名，并選擇保存類型為HTML and Images，HTML選項中選Export HTML File，Slices選項中選Export Slices，最后點保存按鈕，彈出菜單就輸出完成了。



現在你可以打開你輸出的HTML文件看看你的工作成果了。關掉FW4吧，下面沒它的事兒了。


二、 在DW4中設置彈出菜單

1． 將彈出菜單導入DW4

　　 打開DW4，新建或打開一個站點（Site），在站點中新建一個HTML文件，存盤，然后選擇Insert菜單下的Interactive Images中的Fireworks HTML，或者選擇Window菜單下的Objects或按Ctrl+F2快捷鍵打開Objects（對象）面板，從面板上的Common類中選擇那個Fireworks的圖標（如圖十九），



在彈出的對話窗中點Browser按鈕，選擇你剛才FW4中輸出的HTML文件，點OK按鈕，剛才做好的彈出菜單就導進來了。如果你的FW4彈出菜單輸出文件沒有在當前的站點中，那么DW4還會問你是否要將這些文件復制到站點中來，一定要選OK，并且最好單獨為這些文件在站點中建一個文件夾。現在可以按F12預覽一下效果了，是不是不像想象中的那么cool？彈出菜單好象邊框很粗！因為當前使用的是默認的樣式。沒關系，接下來就來動點小手術！

2． 在DW4中重新設置菜單樣式

　　 如圖可以看到剛才復制到站點中來的FW4彈出菜單文件中有這樣一個文件--fw_menu.js，



用DW4將它打開，在文件的開頭部分可以看到這樣一段代碼：

this.menuWidth = mw;
this.menuItemHeight = mh;
this.fontSize = fs||12;
this.fontWeight = "plain";
this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif";
this.fontColor = fclr||"#000000";
this.fontColorHilite = fhclr||"#ffffff";
this.bgColor = "#555555";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";

　 注意this.后面的變量名，下面是直接影響菜單效果的變量名對應的菜單屬性：

menuWidth: 菜單寬度
menuItemHeight : 菜單條目高度
fontWeight: 菜單條目文字粗細
fontFamily: 菜單條目文字字體
fontSize: 菜單條目文字大小
fontColor: 菜單條目文字顏色
fontColorHilite: 菜單條目文字高亮色（即鼠標移到菜單上時文字的顏色）
bgColor: 菜單暗邊背景色
menuBorder: 菜單邊框寬度
menuItemBorder: 菜單條目邊框寬度（其實是菜單內各條目之間分隔線的寬度）
menuItemBgColor: 菜單條目背景色
menuLiteBgColor: 菜單亮邊背景色
menuBorderBgColor: 菜單邊框背景色
menuHiliteBgColor: 菜單條目背景高亮色（即鼠標移到菜單上時背景的顏色）
childMenuIcon: 子菜單擴展標記（默認是個小黑箭頭）

　　 彈出菜單的樣式是遵循下圖中的規則的，大家可以細細研究一下，對照起來修改參數。



　　由于篇幅限制，筆者在這里就不贅述了，先給出一個修改其中一些參數的樣例，余下的大家可以自行測試：

this.bgColor = "#000000";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#000000";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";

　　 存盤，回到菜單的HTML文件，F12預覽，菜單樣式已經發生了變化，菜單邊框變細致了，是不是很cool啊！



3． 彈出菜單縮回停留時間的修改

　　大家會發現彈出菜單要收回似乎要等待一兩秒的時間，沒關系，在fw_menu.js中找到這句代碼：

fwHideMenuTimer = setTimeout("fwDoHide()", 1000);

　　將其中的1000改成300，再找到這句代碼：

if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}

　　將其中的1000改成300，1100改成330，存盤，再回到HTML文件按F12預覽一下，是不是快多了。這些數值是以毫秒為單位的，也就是說1000代表1秒，建議這些數值不要設得太小，否則菜單收回太快會導致你點不中彈出菜單。

4． 特殊效果的彈出菜單

　　運用Javascript來調用和控制CSS濾鏡還可以為菜單帶來意想不到的效果。在fw_menu.js中使用這樣的參數設置：

this.bgColor = "";
this.menuBorder = 3;
this.menuItemBorder = 3;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";

　　并在下面加上一句：

this.alpha = "Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)";

　　然后找到這句：

l.style.backgroundColor = menu.menuItemBgColor;

　　在它下面加上一句：

l.style.filter = menu.alpha;

　　存盤，回到HTML文件按F12預覽，效果如下圖所示，是不是很有趣啊！這樣的CSS濾鏡還有很多，大家可以自己找一些相關資料實踐一下。
順便提一下，大家在查找代碼時可以充分利用DW4的查找替換功能，在頁面中按Ctrl+F快捷鍵調出查找替換窗，輸入要查找的代碼，按Find Next就可以了。



　　好了，寫到這里寫意正濃，但不得不罷筆，免得小編罵我騙稿費，有什么不清楚的大家可以給電腦報的欄目編輯去e-mail詢問，筆者在網上也放了幾個示例頁面，網址是：http://andrepan.topcool.net/popup3/pop_up_menu.html，有興趣的朋友可以去看看。

轉載于:https://www.cnblogs.com/Apollo/archive/2006/06/01/414758.html

總結

以上是生活随笔為你收集整理的[整理]充分发挥FireWork功能，实现超酷多级下拉菜单，爆强！的全部內容，希望文章能夠幫你解決所遇到的問題。

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