// JavaScript Document //*************************************************************************************************** //--------------------------------------------------------------------------------------------------- /*Readme: How to add this pop-up menu onto a site Step I Paste the following codes into each ".html" file that you want the pop-up menus: 1. On top in the
section: 2. Right after the opening tag to start loading the menu tables, which will be hidden at first: 3. For each menu button, in the tag onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(menu_1,137,1,null,'problem');" where menu_1 = the specific menu table you want to display (as defined by you in the LoadMenus(), where 137 = x position of pop-up menu table where 1 = y position of pop-up menu table where null = child where 'problem' = name of the image to which the origin of the x-axis is referenced to ------------------- ------------ Hint: For the first Menu: A. top horizontal menu design x = 0 y = 30 (depending on height of image) B. left vertical menu design x = 137 (depending on width of image) y = 0 For each Menu after that, you must increment the corresponding axis to move the menu ------------ ------------------- For instance, Problem ** Notice that the is given the name 'problem', which is the target for MM_showMenu(). Step II 1. Move the required javascript files to the specified location above in Step I.1 2. Modify the LoadMenus(), following the same format given */ //*************************************************************************************************** //--------------------------------------------------------------------------------------------------- function LoadMenus(){ // generic design shared by all menus. To modify specif menu item, modify in the respective section var label = "root"; var menu_width = 110; // if too small for certain menu table, then modify in that respective section var menu_height = 17; var font = "Century Gothic"; var font_size = 12; var font_color = "#3A4C51"; var font_color_mouseover = "#ffffff"; var menu_bkg_color ="#B3DCE6"; var menu_bkg_mouseover = "#408393"; var hori_align = "left"; var vert_align = "middle"; var left_padding = 3; // padding before the menu text title var cellspacing = 1; var hide_timer = 200; // milliseconds before hide menu on mouseout // other settings var cell_border_color = "#80A8B2"; var font_weight = "500"; var table_border_width = 1.5; // border around the menu table var tab_border_clr_top = "#ffffff"; var tab_border_clr_bot = "#ffffff"; if (window.mm_menu_0) return; //-------------------------------------------------------------- // Modify the following menu items to fit your menu table requirements //------------------------------------------------- //new Menu(label, menu width, menu height, font, fs, fclr, fhclr, bg color, bg hover, halgn, valgn, pad, space, hide timer, sx, sy, srel, opq, vert, idt, aw, ah) window.menu_0 = new Menu(label,menu_width,menu_height,font,font_size,font_color,font_color_mouseover,menu_bkg_color,menu_bkg_mouseover,hori_align,vert_align,left_padding,cellspacing,hide_timer,0,7,true,true,true,0,true,true); menu_0.addMenuItem("Description","location='problem.html'"); menu_0.addMenuItem("Background","location='background.html'"); menu_0.addMenuItem("Goals","location='goals.html'"); menu_0.hideOnMouseOut=true; menu_0.fontWeight=font_weight; menu_0.bgColor= cell_border_color; menu_0.menuBorder= table_border_width; menu_0.menuLiteBgColor= tab_border_clr_top; menu_0.menuBorderBgColor= tab_border_clr_bot; window.menu_1 = new Menu(label,menu_width,menu_height,font,font_size,font_color,font_color_mouseover,menu_bkg_color,menu_bkg_mouseover,hori_align,vert_align,left_padding,cellspacing,hide_timer,0,7,true,true,true,0,true,true); menu_1.addMenuItem("Description","location='solution.html'"); menu_1.addMenuItem("Deliverables","location='deliverables.html'"); menu_1.addMenuItem("Methodology","location='methodology.html'"); menu_1.addMenuItem("Future Plans","location='plans.html'"); menu_1.addMenuItem("Resources","location='resources.html'"); menu_1.hideOnMouseOut=true; menu_1.fontWeight=font_weight; menu_1.bgColor= cell_border_color; menu_1.menuBorder= table_border_width; menu_1.menuLiteBgColor= tab_border_clr_top; menu_1.menuBorderBgColor= tab_border_clr_bot; window.menu_2 = new Menu(label,menu_width,menu_height,font,font_size,font_color,font_color_mouseover,menu_bkg_color,menu_bkg_mouseover,hori_align,vert_align,left_padding,cellspacing,hide_timer,0,7,true,true,true,0,true,true); menu_2.addMenuItem("Team Blogs","location='http://omega.cs.iit.edu/~ipro329/blog/'"); menu_2.addMenuItem("Weekly Journal","location='progress.html'"); menu_2.addMenuItem("Event Calendar","location='events.html'"); menu_2.hideOnMouseOut=true; menu_2.fontWeight=font_weight; menu_2.bgColor= cell_border_color; menu_2.menuBorder= table_border_width; menu_2.menuLiteBgColor= tab_border_clr_top; menu_2.menuBorderBgColor= tab_border_clr_bot; window.menu_3 = new Menu(label,menu_width,menu_height,font,font_size,font_color,font_color_mouseover,menu_bkg_color,menu_bkg_mouseover,hori_align,vert_align,left_padding,cellspacing,hide_timer,0,7,true,true,true,0,true,true); menu_3.addMenuItem("Teammates","location='team.html'"); menu_3.addMenuItem("Media Gallery","location='gallery.html'"); menu_3.hideOnMouseOut=true; menu_3.fontWeight=font_weight; menu_3.bgColor= cell_border_color; menu_3.menuBorder= table_border_width; menu_3.menuLiteBgColor= tab_border_clr_top; menu_3.menuBorderBgColor= tab_border_clr_bot; // ** For each additional menu button, increment the menu_# (e.g. menu_2, menu_3) //---------------------------------------------------------------- // End of user modification //---------------------------------------------------------------------------------------- // Display menus, will auto hide after declaring variables above // Don't need to modify this line. window.menu_0.writeMenus(); } // end of LoadMenus()