Go to the pullmenu.js file in your text editor. Insert a command to run the init() function when the page is loaded by the browser. 8. Create the init() function. The purpose of this function is to add a dynamic id attribute to each pull-menu heading, and to create an onclick event handler for each submenu heading. Add the following commands to the function: a. Create the submenuHeads variable containing the object collection for all elements in the document belonging to the submenuHead class. b. Loop through the submenuHeads object collection, and for each item in the collection do the following: i) add the id attribute isubmenu_heading to the element, where i is the index number of the item in the object collection; and ii) run the showMenu() function when the item is clicked. 9. Create the hideallmenulists() function. The purpose of this function is to hide all pull-down menus on the page. Add the following commands to the function: a. Create the allmenulists variable referencing all of the ul elements in the document that are nested within the li elements belonging to the submenu class. (Hint: Use the querySelectorAll() method.) b. Loop through the allMenuLists object collection. For each item in the collection, set the display style property value to none.
10. Create the showmenu() function. The purpose of this function is to display the pulldown menu corresponding to the menu heading that was clicked by the user. Add the following commands to the function: a. Create the subindex variable containing the index number found within the id property of the heading that was clicked by the user. (Hint: Use the parseInt() function to extract the index number.) b. Create the allmenus variable containing the object collection of all elements belonging to the submenu class. c. Create the currentmenu variable containing the element from the allMenus object collection with the index number indicated by the subIndex variable. d. Create the currentmenulist containing the first ul element nested within the currentMenu object. This will be the pull-down menu that you will either hide or display on the page. e. If the display property of currentMenuList is equal to block, change the display property to none to hide it; otherwise, because currentMenuList must be hidden, run the hideAllMenuLists() function to hide all other pull-down menus on the page and change the display style property of currentMenuList to block.
11. Document your code with informative comments throughout the JavaScript file.
12. Save your changes to the file, and then reload holmes.htm in your Web browser. Verify that when you click the pull-down menu headings located on the menu bar or on the vertical navigation list, the corresponding menu is displayed. Further verify that only one pull-down menu can be displayed at a time. Finally, verify that you can hide any pull-down menu by clicking the menu heading a second time.
13. Submit your completed files to your instructor, in either printed or electronic form, as requested.
Copyright 2012 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook
