HTML and CSS Reference
In-Depth Information
5. Save your changes to the file and then return to the holmes.htm file in your
text editor.
6. Add a script element linking the file to the pullmenu.js file and then close the file,
saving your changes.
7. Go to the pullmenu.js file in your text editor. Insert a command to run the init() func-
tion when the page is loaded by the browser.
8. Create the init() function. The purpose of this function is to add a dynamic id attri-
bute 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 ele-
ments in the document belonging to the submenuHead class.
b. Loop through the submenuHeads object collection, and for each item in the col-
lection do the following: i) add the id attribute i isubmenu_heading to the ele-
ment, 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 docu-
ment 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 pull-
down 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.
Search WWH ::




Custom Search