Introduction

TP_DropDownMenu is a javascript drop-down menu solution that can easily be implemented on any website. It is very customizable, which developers will enjoy, and it is easy to use and non-suprising, which is good for the end-users. It was developed with jQuery 1.3.2.

Menus are defined in JavaScript object literal notation. Anyone familiar with JSON will immediately recognize the syntax. I assume you have a basic knowledge of JavaScript objects, but if you don't, don't worry, its not very hard to pick up. Try looking around for some tutorials on JavasScript object notation.

Download

First, you will need jQuery. TP_DropDownMenu was developed using jQuery 1.3.2. I have not tested it for backwards compatability with older versions, but I expect it to be forward compatable with future versions. You can find the most recent version of jQuery at their download site. If you are not familiar with the jQuery framework, no worries, you don't have to be to use the menu. Just include the "minified" version in a script tag at the top of your page, before the script tag for TP_DropDownMenu.js.

I am releasing TP_DropDownMenu as freeware. All I ask is that you send me an e-mail to let me know your thoughts on the menu, as well as a link to your implementation, if possible. With feedback I may find motivation to add additional features / functionality. I offer no guarantee of support, but if you have a problem let me know, or just tinker around with the code yourself. Please do no redistribute without first contacting me for permission.

Basic Menu

The following example creates two menus and attaches them to the following divs

demo_div1
demo_div2

  1. var menu1 = {
  2. "settings" : {
  3. "attachId" : "demo_div1"
  4. },
  5. "items" : [
  6. {"text" : "Item 1"},
  7. {"text" : "Item 2"},
  8. {"text" : "Item 3"}
  9. ]
  10. };
  11.  
  12. var menu2 = {
  13. "settings" : {
  14. "attachId" : "demo_div2"
  15. },
  16. "items" : [
  17. {"text" : "Item 4"},
  18. {"text" : "Item 5"},
  19. {"text" : "Item 6"}
  20. ]
  21. };
  22.  
  23. var TP_MenuArr = [menu1, menu2];

As you can see in the example above, two menus are defined and stored in menu1 and menu2. Those objects are then added to TP_MenuArr, which is an array containing all the top-level menus on the page. You can name your menu variables whatever you want, but there must always be a TP_MenuArr variable that ultimately contains those variables, as that array notifies TP_DropDownMenu.js to start building menus.

Lets take a closer look at menu1

menu1 is a JavaScript object that has two properties; settings and items.

Properties

settings attachId Required for top-level menu only (not for submenus). The ID of the HTML element you want to attach this menu to.
position Optional. Default value is bottom. Where the menu is positioned by the parent.
  • top
  • bottom
  • left
  • right
direction Optional. Default value is down. The direction that the menu opens.
  • up
  • down
animation Optional. Default value is slide. The animation used to show and hide the menu.
  • appear (ignores easing and animateSpeed)
  • slide
  • fade
  • flyDown
  • flyUp
easing Optional. Default value is swing. The jQuery framework also provides linear. Using George McGinley Smith's jQuery Easing Plugin many more options are available. If you include any other easing plugin, just set this property with the name of the function you want to use. See the Easing Demo for a complete demonstration.
animateSpeed Optional. Default value is 250. Duration of show / hide animation in milliseconds.
This is an integer value, do not place in quotes
hideMenuDelay Optional. Default value is 500. How long to wait in milliseconds before hiding the menu.
If this is set too low menus will hide if the cursor strays outside briefly. The purpose of this property is to allow the cursor to temporarily leave the menu (perhaps in persuit of a submenu, or just accidently) without it snapping shut immediately.
This is an integer value, do not place in quotes
offsetX Optional. Default value is 0. Positive or Negative integer representing the number of pixels to shift either left (-) or right (+).
This is an integer value, do not place in quotes
offsetY Optional. Default value is 0. Positive or Negative integer representing the number of pixels to shift either up (-) or down (+).
This is an integer value, do not place in quotes
id Optional. Specify the id of the menu. This provides a hook for CSS styling.
cssClass Optional. Default value is TPddMenu. Specify the css class of the menu. This provides a hook for CSS styling.
items text Optional. The text shown for the menu item. If left blank, make sure that item is styled appropriately (via CSS), otherwise element might have little to no visible height. A reason you might leave out text would be if you are using CSS to add a background image to this item instead.
url Optional. The URL that will open when this link is clicked on. If this property is not set, nothing will happen when the menu item is clicked.
submenu Optional. The javascript object representing the submenu. Submenus should be defined before parent menus. You won't see an error if you define your submenu after your parent menu, but since the variable referencing the submenu didn't exist at the time it was added to the parent, the parent gets an "undefined" item, which won't do anything.
id Optional. Specify the id of the menu. This provides a hook for CSS styling.
cssClass Optional. Default value is TPddMenuItem. Specify the css class of the menu item. This provides a hook for CSS styling.

Styling

All styling of the menus is done via CSS. The structure of a menu looks like the following.

class="TPddMenu"
class="TPddMenuItem"
class="TPddMenuItem"
class="TPddMenuItem"
class="TPddMenuItem"
class="TPddMenuItem"

The menu is a div, which contains a div for each item. The outer div has the class TPddMenu and the inner divs have the class TPddMenuItem. You can get further control on the styling by adding an id to the menus and items.

Avoid using the following CSS properties, as they could interfere with the menu's handling in the JavaScript.

Please view the styling demo page to see examples of styling applied to menus.

Submenus

Submenus are defined by setting the value of the submenu property of an item to a variable of a previously defined menu. Consider the following example which will attach a menu with submenus to the following div

demo_div3

  1. var subMenuLevel2 = {
  2. "settings" : {
  3. "position" : "right"
  4. },
  5. "items" : [
  6. {"text" : "Item 7"},
  7. {"text" : "Item 8"},
  8. {"text" : "Item 9"}
  9. ]
  10. };
  11.  
  12. var subMenuLevel1 = {
  13. "settings" : {
  14. "position" : "right"
  15. },
  16. "items" : [
  17. {"text" : "Item 4"},
  18. {"text" : "Item 5"},
  19. {"text" : "Item 6 >", "submenu" : subMenuLevel2}
  20. ]
  21. };
  22.  
  23. var menu3 = {
  24. "settings" : {
  25. "attachId" : "demo_div3"
  26. },
  27. "items" : [
  28. {"text" : "Item 1"},
  29. {"text" : "Item 2"},
  30. {"text" : "Item 3 >", "submenu" : subMenuLevel1}
  31. ]
  32. };
  33.  
  34. var TP_MenuArr = [menu1, menu2, menu3];

As you can see in the example above, submenus are defined exactly like top-level menus. The only difference is that they don't specify an attachId.

To place a submenu in a menu, just set the value of the submenu property to the variable that is holding the submenu.

Please note the order that the menus are defined in. In order to reference a submenu, it must have already been declared. You should define your deepest items first, then work your way up the hierarchy.