For our help desk, customer service and call center software applications, we needed to develop a unique UI control that would allow users to select from a complex hierarchical tree of options. We wanted this control to be intuitive and it had to allow for both quick mouse and keyboard entry. After many rounds of discussion internally and with customers, we came up with the following list of requirements:

* Menus must resize and position themselves to stay in the viewport. Options should not show up off screen where users would need to scroll to select them.
* Quick keyboard entry. Many users prefer keyboard entry for speed of data entry, so efficient keyboard entry is a must.
* Must be able to handle very large complex (deep) data trees, but work equally as well with very small sets of data.
* Easy implementation.

Demo

While the list of requirements was not long, we knew there would be substantial technical obstacles to overcome. The biggest obstacle to solve would be how to ensure that the menu and all of its submenus remain on the screen at all times.

To overcome this obstacle, we spent a lot of time developing code that would automatically split long lists into multiple columns and then position itself so that it always fits within the viewport. The overall effect is somewhat similar to the Microsoft? Windows? “Start > All Programs” menu. However, the algorithm we use should keep the menus laid out in a more compact layout?which we believe offers quicker selection of the menu items. The screenshot below shows what the menu looks like when used with a very large menu.

How to use


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mcDropdown jQuery Plug-in</title>
<script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./lib/jquery.mcdropdown.js"></script>
<script type="text/javascript" src="./lib/jquery.bgiframe.js"></script>
<link type="text/css" href="./css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<script type="text/javascript">
<!--//
// on DOM ready
$(document).ready(function (){
//$("#current_rev").html("v"+$.mcDropdown.version);
  $("#category").mcDropdown("#categorymenu");
});
//-->
</script>
</head>

<body>
<form name="f1" method="get" action="">
	Please select a category:<br />
	<input type="text" name="category" id="category" value="">
<INPUT TYPE="submit" value="ok">
    <ul id="categorymenu" class="mcdropdown_menu">
        <li rel="1">
            Arts &amp;amp;amp;amp;amp; Humanities
            <ul>
                <li rel="2">
                    Photography
                    <ul>
                        <li rel="3">
                            3D
                            </li>
                        <li rel="4">
                            Digital
                            </li>
                    </ul>
                </li>
                <li rel="5">
                    History
                    </li>
                <li rel="6">
                    Literature
                    </li>
            </ul>
        </li>
        <li rel="7">
            Business &amp;amp;amp;amp;amp; Economy
          </li>
        <li rel="8">
            Computers &amp;amp;amp;amp;amp; Internet
            </li>
        <li rel="9">
            Education
            </li>
        <li rel="11">
            Entertainment
            <ul>
                <li rel="12">
                    Movies
                    </li>
                <li rel="13">
                    TV Shows
                    </li>
                <li rel="14">
                    Music
                    </li>
                <li rel="15">
                    Humor
                    </li>
            </ul>
        </li>
        <li rel="10">
            Health
            </li>
    </ul>
    </form>
</body>
</html>

More info
http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm