Sets up main menu navigation dropdowns
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
$navBar |
Element | DOM reference to the navigation bar |
$longformHeader |
Element |
|
$toggles |
Element | DOM reference to all dropdown menu toggles |
$close |
Element | DOM reference to the dropdown menu close button |
$moreMenu |
Element | DOM reference to the more menu |
currentMenuId |
String | DOM selector for active menu dropdown |
$currentMenu |
Element | DOM reference to the current menu |
navClass |
String | DOM selector to capture the navigation bar |
longformHeaderContrastClass |
String |
|
longformHeaderPositionClass |
String |
|
navMenuOpenClass |
String | Modifier class to apply when a menu is open |
navMenuStuckClass |
String | Modifier class to apply when menu is stuck |
submenusCss |
String | css class of element wrapping all submenus |
panelAboveNav |
String | css class added to the panel when it's scrolls above the nav |
sidebarSelector |
String | DOM selector for sidebar |
menuIds |
Array | List of menu dropdown selectors |
focusableSelector |
String | DOM selector to capture focusable elements |
disabledAttribute |
String |
|
disabledFlagAlways |
String |
|
disabledFlagSelf |
String | DOM selector to capture focusable elements - DOM selector to identify elements that should be disabled when its own menu is open |
Methods
(inner) closeCurrentMenu()
- Source:
Fades out active dropdown menu, resets toggle states, and unbinds event listeners.
(inner) closeOpenMenus($toggle) → {bool}
- Source:
Closes any open menus. Checks to see if user is attempting to open another menu.
Parameters:
| Name | Type | Description |
|---|---|---|
$toggle |
Element | DOM reference to the clicked toggle element |
Returns:
- True if the user is attempting to open another menu
- Type
- bool
(inner) focusOnMenu($toggle)
- Source:
Grays out non-active menu items.
Parameters:
| Name | Type | Description |
|---|---|---|
$toggle |
Element | DOM reference to the clicked toggle element |
(inner) getFocusBounds()
- Source:
Gets the first and last focusable elements of the menu.
(inner) handleClickOutsideMenu(event)
- Source:
Closes menu if user clicks outside the menu dropdown.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
object | Native JS event object |
(inner) handleEscKey()
- Source:
Closes menu if user presses the esc key. Also redirect focus back to $toggle.
(inner) handleKeydownEvent(event)
- Source:
Handles keydown event and redirects to the appropriate handler.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
object | Native JS event object |
(inner) handleMenuToggle($toggle, $eventType)
- Source:
Handles click events on main menu toggles.
Parameters:
| Name | Type | Description |
|---|---|---|
$toggle |
Element | DOM reference to the clicked toggle element |
$eventType |
string | Specifies whether menu is opened via click or mouseenter |
(inner) handleMouseLeaveMenu(event, $alt)
- Source:
Closes menu if user's mouse moves outside the menu and not into the toggle or vice versa
Parameters:
| Name | Type | Description |
|---|---|---|
event |
object | Native JS event object |
$alt |
element | Toggle or menu div which the mouse may move into |
(inner) handleTabKey(event)
- Source:
Handles tabbing through dropdown menu.
If user tabs on menu trigger after opening menu, it brings them to the first element.
If user shift + tabs before the start of the menu.
If user tabs past the end of the dropdown, close menu and redirect focus back to $toggle.
close menu and redirect focus back to $toggle.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
object | Native JS event object |
(inner) init()
- Source:
Binds event listeners to main menu toggles.
(inner) isOrphan() → {Boolean}
- Source:
Checks if menu is separate from the main nav
Returns:
- True / False whether or not it is a child of the main nav
- Type
- Boolean
(inner) menuClosing()
- Source:
Binds close events so that the menu dropdown will close if the user clicks outside the menu.
(inner) menuSizing($toggle)
- Source:
Sets up handlers so that menu size is adjusted to fit screen height. This allows for vertical scroll on overflow, as well as proper margins for offset menus.
Parameters:
| Name | Type | Description |
|---|---|---|
$toggle |
Element | DOM reference to the clicked toggle element |
(inner) newLastFocusable()
- Source:
Checks to see if the last focusable element has changed (for example after an ajax request)
(inner) setMenuHeight($menu, opening)
- Source:
Sets menu height to maximum available space in the viewport. Vertical scroll if it overflows.
Parameters:
| Name | Type | Description |
|---|---|---|
$menu |
Element | DOM reference to the current active dropdown menu |
opening |
Boolean | Indicates whether to account for the y-translation when the menu is initially opened. |
(inner) setMenuMargin($menu, $toggle, marginSide, padding)
- Source:
Offsets the menu's margin so it aligns with its $toggle trigger.
Parameters:
| Name | Type | Description |
|---|---|---|
$menu |
Element | DOM reference to the current active dropdown menu |
$toggle |
Element | DOM reference to the clicked toggle element |
marginSide |
string | The side of the menu to apply the offset |
padding |
number | Additional horizontal offset between the menu and its toggle |
(inner) setMenuWidth($menu)
- Source:
Sets menu minimum width Calculate width of the comments menu so it always covers the sidebar
Parameters:
| Name | Type | Description |
|---|---|---|
$menu |
Element | DOM reference to the current active dropdown menu |
(inner) updateTabFocus()
- Source:
Redirects tab focus to current active dropdown menu and binds keyboard event listeners.