5a920362 |
1 | |
2 | /* - dropdown.js - */ |
3 | /* |
4 | * This is the code for the dropdown menus. It uses the following markup: |
5 | * |
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> |
10 | * </dt> |
11 | * <dd class="actionMenuContent"> |
12 | * <!-- Here can be any content you want --> |
13 | * </dd> |
14 | * </dl> |
15 | * |
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: |
19 | * |
20 | * .actionMenu.activated { |
21 | * display: block; |
22 | * } |
23 | * |
24 | * .actionMenu.deactivated { |
25 | * display: none; |
26 | * } |
27 | * |
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 |
32 | * the link followed. |
33 | * |
34 | */ |
35 | |
36 | /* |
37 | * Provides globals: |
38 | * actionMenuDocumentMouseDown, actionMenuMouseOver, document, hideAllMenus, |
39 | * initializeMenus, jQuery, toggleMenuHandler |
40 | */ |
41 | |
42 | function hideAllMenus() { |
43 | jQuery('dl.actionMenu').removeClass('activated').addClass('deactivated'); |
44 | } |
45 | |
46 | function toggleMenuHandler(event) { |
47 | // swap between activated and deactivated |
48 | jQuery(this).parents('.actionMenu:first') |
49 | .toggleClass('deactivated') |
50 | .toggleClass('activated'); |
51 | return false; |
52 | } |
53 | |
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 |
57 | return true; |
58 | } |
59 | |
60 | hideAllMenus(); |
61 | } |
62 | |
63 | function actionMenuMouseOver(event) { |
64 | var menu_id = jQuery(this).parents('.actionMenu:first').attr('id'), |
65 | switch_menu; |
66 | if (!menu_id) {return true;} |
67 | |
68 | switch_menu = jQuery('dl.actionMenu.activated').length > 0; |
69 | jQuery('dl.actionMenu').removeClass('activated').addClass('deactivated'); |
70 | if (switch_menu) { |
71 | jQuery('#' + menu_id).removeClass('deactivated').addClass('activated'); |
72 | } |
73 | } |
74 | |
75 | function initializeMenus() { |
76 | jQuery(document).mousedown(actionMenuDocumentMouseDown); |
77 | |
78 | hideAllMenus(); |
79 | |
80 | // add toggle function to header links |
81 | jQuery('dl.actionMenu dt.actionMenuHeader a') |
82 | .click(toggleMenuHandler) |
83 | .mouseover(actionMenuMouseOver); |
84 | |
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); |
88 | } |
89 | |
90 | jQuery(initializeMenus); |
91 | |