4 * This is the code for the dropdown menus. It uses the following markup:
6 * <dl class="actionMenu" id="uniqueIdForThisMenu">
7 * <dt class="actionMenuHeader">
8 * <!-- The following a-tag needs to be clicked to dropdown the menu -->
9 * <a href="some_destination">A Title</a>
11 * <dd class="actionMenuContent">
12 * <!-- Here can be any content you want -->
16 * When the menu is toggled, then the dl with the class actionMenu will get an
17 * additional class which switches between 'activated' and 'deactivated'.
18 * You can use this to style it accordingly, for example:
20 * .actionMenu.activated {
24 * .actionMenu.deactivated {
28 * When you click somewhere else than the menu, then all open menus will be
29 * deactivated. When you move your mouse over the a-tag of another menu, then
30 * that one will be activated and all others deactivated. When you click on a
31 * link inside the actionMenuContent element, then the menu will be closed and
38 * actionMenuDocumentMouseDown, actionMenuMouseOver, document, hideAllMenus,
39 * initializeMenus, jQuery, toggleMenuHandler
42 function hideAllMenus() {
43 jQuery('dl.actionMenu').removeClass('activated').addClass('deactivated');
46 function toggleMenuHandler(event
) {
47 // swap between activated and deactivated
48 jQuery(this).parents('.actionMenu:first')
49 .toggleClass('deactivated')
50 .toggleClass('activated');
54 function actionMenuDocumentMouseDown(event
) {
55 if (jQuery(event
.target
).parents('.actionMenu:first').length
) {
56 // target is part of the menu, so just return and do the default
63 function actionMenuMouseOver(event
) {
64 var menu_id
= jQuery(this).parents('.actionMenu:first').attr('id'),
66 if (!menu_id
) {return true;}
68 switch_menu
= jQuery('dl.actionMenu.activated').length
> 0;
69 jQuery('dl.actionMenu').removeClass('activated').addClass('deactivated');
71 jQuery('#' + menu_id
).removeClass('deactivated').addClass('activated');
75 function initializeMenus() {
76 jQuery(document
).mousedown(actionMenuDocumentMouseDown
);
80 // add toggle function to header links
81 jQuery('dl.actionMenu dt.actionMenuHeader a')
82 .click(toggleMenuHandler
)
83 .mouseover(actionMenuMouseOver
);
85 // add hide function to all links in the dropdown, so the dropdown closes
86 // when any link is clicked
87 jQuery('dl.actionMenu > dd.actionMenuContent').click(hideAllMenus
);
90 jQuery(initializeMenus
);