Search this site

HTML: Adding a Menu

This tutorial steps you through the process of adding a drop-down menu to a web page. You'll download some HTML,CSS, and javascript code and customize it for your specific purposes. The task is indicative of the kind of work a web designer does-- finding existing code and modifying it.

1. Go to http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

2. Scroll down about 1/2 page and download the code dropdowntabs.zip.

3. Unzip the downloaded code into a sub-folder off your web directory

   if you're on Windows, right-click the zip file in the download window and select 'Open'. Then open 'My Computer', navigate to your W: directory, and copy the dropdowntabfiles folder and dropdowntabsdemo HTML file into your W: directory.

   If you're on Linux, drop it in your public_html directory. If you're developing an AppEngine application, drop it in the directory for your application.

4. Double-click the dropdowntabsdemo.HTML within the download to open it in a browser. It should show five examples of a tabbed menu. Play around with the menus to get a feel for how they work.

5. Copy the dropdowntabsdemo.html file into a file mymenu.html. This will be the file you change to customize a menu for your self.

6. Open mymenu.html in an editor. Remove all code pertaining specifically to examples 2-5 (we'll create a menu of the type in example 1). Be careful not to delete the last two lines in the file (the body and html end tags). Remove the Example 1 header and the 'Note that the CSS..." text.

7. Customize the menu so it has two top-level menu items, instead of five, with drop-down choices of your choosing. Do the following:
  • Find the top-level menu under the Example 1 header. It has a "Home", a "New", etc. Remove the entire list item (li) tag for the Home, New, and Tools items.
  • Modify the other items-- the ones with submenus-- in the top-level menu so that the text is something of your choosing, e.g., "Obama" and "Biden". Be sure and also change the Title and the href of each of these items.
  • Modify the items in the sub_menus to something of your own choosing, say the "Homepage" and "Facebook Page" of the two politicians. Be sure and change the href attributes to that they link to appropriate pages.
8. You now have a menu template that you can use with any web page you create. Create a new page in your Google Sites portfolio called "Menu Example" and paste your sample code onto the page. Add a link to the droptabmenu web page so you can download the necessary folders at a later date.

Recent site activity