Website resource guide, web development,Nested Menus using HTML 4.0

We will briefly examine pull-down menu features in HTML 4.0.

While pull-down menus are exceptionally useful in a form, they quickly become overwhelming if the number of choices becomes too large. This is especially troublesome in Web pages whose menus are created automatically based upon changing data or a database query. While eight or ten choices are easy for a user to handle, popping up a menu with dozens or even hundreds of choices is a disaster.

HTML 4.0 offers some relief for this in the form of option groups. Option groups allow you to group <option> tags within a single <select> tag. Each group creates a submenu within the main menu, which the user navigates by first selecting the option group, and then the desired option within the group.

Option groups are created with the <optgroup> tag. This tag can only appear within a <select> tag, and may only contain <option> tags. In general, the options within each group are related, making it easy for the user to find the desired option within a specific group.

Here is a pull-down menu with a number of option groups:

<select size=1>

  <optgroup label="Northeast">

    <option>Maine

    <option>Vermont

    <option>New Hampshire

    ...

  </optgroup>



  <optgroup label="South">

    <option>Georgia

    <option>Florida

    <option>Alabama

    ...

  </optgroup>



  <option>Alaska

  <option>Hawaii

</select>

Option group limitations

The restriction that the <optgroup> tag only contain <option> tags is more troublesome than you may think, going far beyond the annoyance of using a label attribute to label your submenus. In fact, this restriction creates a problem: no nested menus. You cannot place an <optgroup> tag within another <optgroup> tag, creating multiple levels of menus. It is a shame that HTML 4.0 allowed nested menus for the first time but did not endorse it. Hopefully, this restriction will be lifted in a future version of HTML.

<< BACK