HTML and CSS Reference
Explore how to
to create a pull-
down menu app.
Case Problem 3
Data Files needed for this case Problem: holmestxt.htm, logo.jpg, modernizr-1.5.js,
pulltxt.css, pulltxt.js, rightarrow.png, sh.jpg, shback.png, shblog.css
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 .
221b blog web page
Kyle wants the pull-down menus to be hidden when the page opens. Each menu
will open only when a user clicks its associated h1 heading, and the menu will then be
closed again when the user clicks another pull-down menu or clicks the heading again.
Figure 13-42 shows a preview of the page you'll design for Kyle.