New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 13 Case 3 The 221B Blog
The 221B Blog Kyle Harris is a fan of mystery stories. His favorites are the Sherlock Holmes stories by Sir Arthur Conan Doyle. Kyle decided to create a Web site for other fans of the fictional detective; the site is called The 221B Blog, named after the street number of Holmes’ fictional Baker Street address.
On his Web site, Kyle has added a discussion forum, links to other mystery Web sites, and a place for members to post artwork, essays, and fan fiction. Kyle also has created links to online text versions of all of the 56 short stories and four novels in the Sherlock Holmes canon. Kyle is concerned that having so many links on the home page will make it difficult for users to navigate the site. He’s seen sites in which lists of links are stored in popup or pull-down menus, remaining out of sight until needed by a user. Kyle wants to add a similar feature to his Web site and has asked you to help him write the code.
Each pull-down menu will have a heading that identifies the contents of the menu. Kyle envisions the HTML structure shown in Figure 13-41 in which the pull-down menus are nested within another list that acts as a menu bar. Each pull-down menu is identified with the class name submenu, and the h1 element containing each heading is identified with the class name submenuHead.
Complete the following:
1. Using your text editor, open the holmestxt.htm, pulltxt.css, and pulltxt.js files from the tutorial.13\case3 folder, enter your name and the date in the comment section of each file, and then save the files as holmes.htm, pullmenu.css, and pullmenu.js, respectively.
2. Take some time to view the contents of the holmes.htm file in your text editor, noting the structure of the two navigation lists and the submenus within each of those lists.
3. Open the holmes.htm file in your Web browser, and then study the placement of the six pull-down menus for the stories and novels of Sherlock Holmes. The page also contains four pull-down menus in the vertical navigation bar containing links to Web sites for User Submissions, Holmes on the Web, Arthur Conan Doyle, and Other Fictional Detectives, but these are obscured by the horizontal pull-down menus at the moment.
4. Go to the pullmenu.css file in your text editor. At the bottom of the file, insert the following two style rules: i) hide the ul elements nested within the li elements belonging to the submenu class by setting their display property to none; and ii) display a pointer cursor for h1 elements belonging to the submenuHead class.
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() 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.
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.