[整理]充分发挥FireWork功能，实现超酷多级下拉菜单，爆强！
???????? 以前在多個項目中，想實現(xiàn)無限級下拉的菜單，找了很多很多的Js代碼，結(jié)果卻不讓我很滿意，雖然是JS的代碼，看是看的懂，可是改起來卻很吃力，原先是兩級下拉的，現(xiàn)在想加一級就更吃力。
???????? 今天終于發(fā)現(xiàn)FireWork做下拉菜單簡直是超強，以下是相關(guān)文章，轉(zhuǎn)下，做個紀念。
與圖形設(shè)計制作軟件的龍頭老大-Adobe公司的Photoshop相比，Macromedia公司的Fireworks 4(以下簡稱FW4)可謂短小精悍，同時，她對于網(wǎng)頁圖形制作的強大支持，也使其輕松獲取了大批網(wǎng)頁設(shè)計師的信任和追隨。配合Macromedia網(wǎng)頁制作三劍客中的另一位大名鼎鼎的劍客Dreamweaver 4(以下簡稱DW4)，FW4可以輕而易舉地做出時下網(wǎng)頁中甚為流行的彈出菜單(亦稱下拉菜單)。如果你對DHTML網(wǎng)頁編程不甚熟悉，看到代碼就頭疼，不如跟隨筆者一起親身體驗FW4的魅力所在吧！
一、 在FW4中制作菜單
1．制作母菜單按鈕
打開FW4，選擇File菜單下的New，或者按Ctrl+N快捷鍵，如圖一新建一個文件，尺寸200X30像素，精度72像素/英寸，背景透明。
選擇Window菜單下的Tools打開工具面板，從工具面板上選擇矩形工具，
畫一個100X30像素大小的矩形，選擇Window菜單下的Info打開信息面板，直接輸入數(shù)值精確調(diào)整尺寸和位置；
選中這個矩形，Ctrl+C復(fù)制，Ctrl+V原地粘貼，這時候兩個矩形重疊，將上面這個矩形拖到旁邊，同樣使用信息面板定位；
然后分別選中這兩個矩形，調(diào)整它們的填充色和邊框色，方法有兩種，一是利用工具面板上的Color工具區(qū)里的Stroke和Fill按鈕，
二是選擇Window菜單下的Stroke和Fill分別打開線型面板和填充面板，在面板上選擇，注意的是線型要選"Pencilà1-Pixel Hard"或"BasicàHard Line"(如圖)，
這樣輸出后才能做出細邊框效果；從工具面板上選擇文字工具，輸入文字，注意選擇文字的平滑度為No Anti-Alias（關(guān)閉反鋸齒，如圖），
然后同時選中文字和其中一個矩形，從Modify菜單下的Align中分別選擇Center Vertical和Center Horizontal來對齊文字和矩形，效果如圖所示。
2．制作彈出菜單條目
同時選中對齊后的文字和矩形，選擇Insert菜單下的Convert to Symbol，或在矩形上點鼠標(biāo)右鍵，在右鍵菜單里選Convert to Symbol，或者按F8快捷鍵，在彈出對話框里的Type中選Button(按鈕)，將這個矩形轉(zhuǎn)換成一個按鈕對象，
這時，將鼠標(biāo)移到按鈕對象中間的圓形標(biāo)志上鼠標(biāo)會變成手形，單擊圓形標(biāo)志，在彈出菜單中選擇Add Pop_up Menu…，
然后就可以在彈出的Set Pop-Up Menu設(shè)置窗中設(shè)置你的彈出菜單了。如下圖，筆者已經(jīng)設(shè)置了一些菜單條目。
大家可以在Text中設(shè)置條目的文字名稱，在Link中設(shè)置條目的鏈接路徑，在Target中設(shè)置打開鏈接的目標(biāo)窗口，設(shè)置完后點一下"+"按鈕就可以生成一個菜單條目了；如果想刪掉，點中條目，再點"-"按鈕就可以刪除條目；如果想修改條目設(shè)置，只需點中條目，修改各項設(shè)置后點Change按鈕即可。FW4的彈出菜單是可以做多級子菜單的，只要在根菜單條目下方建立子菜單條目，然后點中子菜單條目，再點窗口上方那兩個藍色圖標(biāo)按鈕中的右邊一個Indent Menu（菜單縮進，即設(shè)為子菜單）就可以了，反之，點左邊那個Outdent Menu（菜單伸出，即設(shè)為根菜單）就可以將當(dāng)前的子菜單設(shè)置成上一級根菜單。大家可能發(fā)現(xiàn)改變菜單條目的順序好象不方便，其實很簡單，只要點住條目并拖拉到你想要的位置就可以了。設(shè)置完菜單條目后，點Next進入菜單樣式設(shè)置窗。
3．設(shè)置彈出菜單條目樣式
值得一提的是，菜單樣式的設(shè)置可以分成兩種類型，
一種是如前圖所示的HTML模式，一種是如后圖所示的Image（貼圖）模式。它們的區(qū)別是，HTML模式下，菜單樣式完全由代碼控制，即時計算生成，顯示速度當(dāng)然極快，非常流暢；Image模式下，菜單條目的背景可以顯示圖片，每次菜單彈出時，就會即時下載背景貼圖，這樣對高速網(wǎng)絡(luò)用戶來說幾乎感覺不到，但是對慢速網(wǎng)絡(luò)用戶，就會明顯覺察到貼圖下載顯示的時間滯后，造成不流暢的感覺。但是由于Image模式生成的菜單可以使用漂亮的貼圖，雖然FW4種提供選擇的貼圖樣式并不多，共21種，但只要在輸出后，找到這些圖片，用自定義的尺寸一致圖片替換掉，就可以做出完全屬于自己的個性菜單，比如在貼圖上打上你自己的網(wǎng)站Logo等等。這里筆者選擇HTML模式。樣式設(shè)置窗中，Up State是用來設(shè)置菜單條目處于普通狀態(tài)時的樣式，Over State是用來設(shè)置鼠標(biāo)移到菜單條目上時的樣式。另外，Font是用來選擇顯示的字體，為了在網(wǎng)頁上能清晰顯示字體，建議大家在字體大小Size中選擇12，"B"按鈕是使用粗體字，"I"按鈕是使用斜體字。樣式設(shè)置將即時在下方的Preview區(qū)域中顯示，完成設(shè)置后點Finish按鈕生成彈出菜單。
4． 調(diào)整彈出菜單位置
如圖所示，生成的彈出菜單將以藍色線框表示，它的位置就是鼠標(biāo)移到母菜單按鈕上它彈出的位置，大家可以點住彈出菜單的藍色線框，拖拉到你想要它彈出的位置，比如筆者想讓它在母菜單按鈕下方彈出。
5．調(diào)整母菜單按鈕與彈出菜單樣式一致
有的朋友說，既然彈出菜單已經(jīng)有樣式了，那么母菜單怎么辦？其實筆者早已想到，所以剛開始把母菜單做成了按鈕對象，雙擊母菜單按鈕對象，打開按鈕對象編輯窗，自己動手改按鈕的各個狀態(tài)吧，這屬于FW4的基本操作，筆者這里就不羅嗦了。
6．輸出彈出菜單
剛才一直跟著做一定很累，所以另外還有一個矩形就留給大家自己練習(xí)一下。完成后可以選擇File菜單下的Export Preview，或者按Ctrl+Shift+X快捷鍵打開輸出設(shè)置窗口。如圖十七所示，在Option標(biāo)簽頁下方的透底選項中選擇Alpha Transparency，Matte（基底色）中選擇你實際網(wǎng)頁使用的背景色，這樣菜單就可以和你的網(wǎng)頁天衣無縫地融為一體。
點Export按鈕，如圖十八，自己設(shè)置輸出路徑和文件名，并選擇保存類型為HTML and Images，HTML選項中選Export HTML File，Slices選項中選Export Slices，最后點保存按鈕，彈出菜單就輸出完成了。
現(xiàn)在你可以打開你輸出的HTML文件看看你的工作成果了。關(guān)掉FW4吧，下面沒它的事兒了。
二、 在DW4中設(shè)置彈出菜單
1． 將彈出菜單導(dǎo)入DW4
打開DW4，新建或打開一個站點（Site），在站點中新建一個HTML文件，存盤，然后選擇Insert菜單下的Interactive Images中的Fireworks HTML，或者選擇Window菜單下的Objects或按Ctrl+F2快捷鍵打開Objects（對象）面板，從面板上的Common類中選擇那個Fireworks的圖標(biāo)（如圖十九），
在彈出的對話窗中點Browser按鈕，選擇你剛才FW4中輸出的HTML文件，點OK按鈕，剛才做好的彈出菜單就導(dǎo)進來了。如果你的FW4彈出菜單輸出文件沒有在當(dāng)前的站點中，那么DW4還會問你是否要將這些文件復(fù)制到站點中來，一定要選OK，并且最好單獨為這些文件在站點中建一個文件夾?，F(xiàn)在可以按F12預(yù)覽一下效果了，是不是不像想象中的那么cool？彈出菜單好象邊框很粗！因為當(dāng)前使用的是默認的樣式。沒關(guān)系，接下來就來動點小手術(shù)！
2． 在DW4中重新設(shè)置菜單樣式
如圖可以看到剛才復(fù)制到站點中來的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.后面的變量名，下面是直接影響菜單效果的變量名對應(yīng)的菜單屬性：
menuWidth: 菜單寬度
menuItemHeight : 菜單條目高度
fontWeight: 菜單條目文字粗細
fontFamily: 菜單條目文字字體
fontSize: 菜單條目文字大小
fontColor: 菜單條目文字顏色
fontColorHilite: 菜單條目文字高亮色（即鼠標(biāo)移到菜單上時文字的顏色）
bgColor: 菜單暗邊背景色
menuBorder: 菜單邊框?qū)挾?
menuItemBorder: 菜單條目邊框?qū)挾?#xff08;其實是菜單內(nèi)各條目之間分隔線的寬度）
menuItemBgColor: 菜單條目背景色
menuLiteBgColor: 菜單亮邊背景色
menuBorderBgColor: 菜單邊框背景色
menuHiliteBgColor: 菜單條目背景高亮色（即鼠標(biāo)移到菜單上時背景的顏色）
childMenuIcon: 子菜單擴展標(biāo)記（默認是個小黑箭頭）
彈出菜單的樣式是遵循下圖中的規(guī)則的，大家可以細細研究一下，對照起來修改參數(shù)。
由于篇幅限制，筆者在這里就不贅述了，先給出一個修改其中一些參數(shù)的樣例，余下的大家可以自行測試：
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預(yù)覽，菜單樣式已經(jīng)發(fā)生了變化，菜單邊框變細致了，是不是很cool啊！
3． 彈出菜單縮回停留時間的修改
大家會發(fā)現(xiàn)彈出菜單要收回似乎要等待一兩秒的時間，沒關(guān)系，在fw_menu.js中找到這句代碼：
fwHideMenuTimer = setTimeout("fwDoHide()", 1000);
將其中的1000改成300，再找到這句代碼：
if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}
將其中的1000改成300，1100改成330，存盤，再回到HTML文件按F12預(yù)覽一下，是不是快多了。這些數(shù)值是以毫秒為單位的，也就是說1000代表1秒，建議這些數(shù)值不要設(shè)得太小，否則菜單收回太快會導(dǎo)致你點不中彈出菜單。
4． 特殊效果的彈出菜單
運用Javascript來調(diào)用和控制CSS濾鏡還可以為菜單帶來意想不到的效果。在fw_menu.js中使用這樣的參數(shù)設(shè)置：
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預(yù)覽，效果如下圖所示，是不是很有趣啊！這樣的CSS濾鏡還有很多，大家可以自己找一些相關(guān)資料實踐一下。
順便提一下，大家在查找代碼時可以充分利用DW4的查找替換功能，在頁面中按Ctrl+F快捷鍵調(diào)出查找替換窗，輸入要查找的代碼，按Find Next就可以了。
好了，寫到這里寫意正濃，但不得不罷筆，免得小編罵我騙稿費，有什么不清楚的大家可以給電腦報的欄目編輯去e-mail詢問，筆者在網(wǎng)上也放了幾個示例頁面，網(wǎng)址是：http://andrepan.topcool.net/popup3/pop_up_menu.html，有興趣的朋友可以去看看。
轉(zhuǎn)載于:https://www.cnblogs.com/Apollo/archive/2006/06/01/414758.html
總結(jié)
以上是生活随笔為你收集整理的[整理]充分发挥FireWork功能，实现超酷多级下拉菜单，爆强！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： scikit-learn点滴
- 下一篇： MangoDB的下载和安装