Fireworks/dreamweaver Double Sword Wall-made pop-up menu (2)

dreamweaver| Menu

second, set up pop-up menu in DW4 　　 1. Import pop-up menus into DW4 Open DW4, create or open a site, create a new HTML file in the site, save it, and then select the fireworks HTML in interactive images under the Insert menu. Alternatively, select the Objects under the Window menu or press CTRL+F2 shortcut to open the Objects (object) Panel and select the fireworks icon from the common class on the panel. In the Pop-up dialog window midpoint Browser button, select you just FW4 the output of the HTML file, click OK button, just a good pop-up menu on the guide came in. If your FW4 pop-up menu output file is not in the current site, then DW4 will also ask you whether you want to copy these files to the site, be sure to select OK, and it is best to create a separate folder for these files in the site. Now you can press F12 to preview the effect, is it not as cool as you think? Pop-up menu looks like the border is very thick! Because the default style is currently in use. It doesn't matter, next move a little operation! 　　 2. To reset the menu style in DW4 As shown in the FW4 pop-up menu file that you just copied to the site, you can see a file--fw_menu.js Open it with DW4, and you can see this piece of code at the beginning of the file: 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"; Note this. The variable name that follows is the menu attribute that corresponds to the variable name that directly affects the menu effect: Menuwidth: Menu Width Menuitemheight: Menu Entry Height FontWeight: Menu Entry Text weight FontFamily: Menu Entry Text font FontSize: Menu Entry Text size FontColor: Menu item text color Fontcolorhilite: Menu entry text is bright (that is, the color of text when you move the mouse over the menu) BgColor: Menu Dark edge background color Menuborder: Menu Border Width Menuitemborder: Menu Entry Border Width (in fact, the width of the separator line between entries in the menu) Menuitembgcolor: Menu Entry Background color Menulitebgcolor: Menu Light edge background color Menuborderbgcolor: Menu Border Background color Menuhilitebgcolor: Menu entry background color is high (that is, the background when the mouse is moved over the menu) Childmenuicon: Submenu extension mark (default is a small black arrow) The pop-up menu style is following the rules in the following figure, we can study it carefully, contrast to modify parameters. Due to space limitations, the author here will not repeat, first of all, to modify some of the parameters of the sample, the rest of us can test themselves: 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"; Save, return to the menu of HTML file, F12 Preview, menu style has changed, menu border change meticulous, is not very cool Ah! 　　 3. The modification of the pop-up menu retracting the stay time You'll notice that the pop-up menu has to be retracted. It seems to be waiting for two seconds, it doesn't matter, find this code in Fw_menu.js:Fwhidemenutimer = settimeout ("Fwdohide ()", 1000); Change the 1000 to 300, and then find the code: if (elapsed < 1000) { Fwhidemenutimer = settimeout ("Fwdohide ()", 1100-elapsed); Return } Change one of the 1000 to 300,1100 to 330, save, and then back to the HTML file Press F12 Preview, is not much faster. These values are in milliseconds, that is, 1000 represents 1 seconds, it is recommended that these values should not be set too small, otherwise the menu is too fast will cause you to click Not to pop the menu. 　　 4. pop-up menu with special effects Using JavaScript to invoke and control CSS filters can also bring unexpected effects to menus. Use this parameter setting in 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"; and add the following sentence:This.alpha = "alpha (opacity=100, finishopacity=0, style=2, startx=0, starty=0, finishx=200, finishy=0)"; And find this sentence:l.style.backgroundcolor = Menu.menuitembgcolor; Add a sentence below it:l.style.filter = Menu.alpha; Save, back to the HTML file Press F12 Preview, the effect shown in the following picture, is not very interesting ah! There are a lot of such CSS filters, we can find some relevant information to practice. Incidentally, you can find the code to take full advantage of the DW4 search and replace function, in the page press the Ctrl+f shortcut to find the replacement window, enter the code to find, and click found next on it.