Longed-For Multi-Level Drop-Down Menu Script ~ Easy HTML Tricks for Blogging

The main feature of this menu is the clear separation between the HTML code, software code and visual appearance. No more onmouseover or onmouseout or, worse, multidimensional array of elements in a .js file. The HTML code of the menu is a simple treelike unordered list:

<ul class="mlddm">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2.1</a></li>
      <li><a href="#">Item 2.2</a></li>
      <li><a href="#">Item 2.3</a>
        <ul>
          <li><a href="#">Item 2.3.1</a></li>
          <li><a href="#">Item 2.3.2</a></li>
          <li><a href="#">Item 2.3.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

After the script is attached, this multi-level unordered list becomes Multi-Level Drop-Down Menu (MLDDM). The visual appearance is specified using CSS.

Example

This is a very important point for a developer. In most similar scripts, menu items and the corresponding HTML-code are generated by the often obscure code of the script. This places severe limitations on the developer. Two most significant of them are difficulty of integrating this menu into the web-server code and difficulty to specify custom appearance (there is often only a possibility to choose one of them from a limited number of hard-coded themes)

It is worth to mention so called Drop-Down Menu builders. These are end-user software, which allow composing menu items in visual mode. After this, such program will generate code that can be inserted into the page. For a home page creator such software is probably the best choice. But for a web developer this is clearly not, for the reasons outlined above - difficulties of integrating this pregenerated code into the web-server code, and difficulty of editing this code to fine-tune it.

Thus, this script is targeted at web developers who want to have complete and clear control over the code.

You can learn more about this menu at the developer website. There you can also view samples of variously themed menus.

Source :

http://javascript-array.com/scripts/multi_level_drop_down_menu/