Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

Time to Identify: ID Attributes for Menu Buttons

Each menu button requires a unique id attribute that will be used in the JavaScript that toggles the submenus. This is the easiest way to add an id to the hyperlinks you've already created:

  1. If the Tag inspector isn't visible, choose Window > Tag Inspector or press the F9 keyboard shortcut.

  2. If it is not already visible, select the Attributes tab of the Tag inspector.


The Tag inspector's panel group name includes the tag you've selected, in this case <a>. I find this helpful because it lets me know that I have the right HTML element selected.

  1. Click on the first Menu Button hyperlink in Design view.

  2. If it isn't already shown, change the Tag inspector to the Show List view by clicking the Show List View icon.


If you prefer the Show Category view, you'll find id listed there too, under the CSS/Accessibility section. I find the Show List view quick and easy, because I can see all attributes at a glance, sorted alphabetically.

  1. In the right column, across from the id attribute, type in a unique id for the selected hyperlink. Call the first one firstMenuButton.

    Remember, I told you near the beginning of the chapter that you'll be using MenuButton as a suffix for all references to menu buttons? Next, you'll need to add the id attribute to the remaining two menu button hyperlinks.

Figure 2.6Figure 2.6

  1. Click on the next menu button hyperlink in Design view.

  2. Assign the hyperlink a unique id as you did in step 5. Use an id of secondMenuButton. Click on the third menu button hyperlink and assign an id of thirdMenuButton.

  3. Save your document.

  • + Share This
  • 🔖 Save To Your Account