HTML and CSS Reference
In-Depth Information
Explore how to
use JavaScript
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
.
Figure 13-41
221b blog web page
ul
li class="submenu"
h1="submenuHead"
ul
li
li
…
li class="submenu"
h1="submenuHead"
ul
li
…
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.
