The module is for menus of variable length, where there may too many menu options to fit the screen. The module will add an arrow that users can click on to reveal the rest of the menu options. This is used to handle long tag meta menus in lieu of a more dropdown. It is only intended for tablet-landscape breakpoints and above.
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
selectors |
object | Set of CSS selectors to grab various components of the overflow menu |
states |
object | Set of CSS flags to toggle various overflow menu states |
arrowWidth |
int | The width of an overflow menu arrow (part of the scroll calculation) |
Methods
(inner) calculateScrollAmount() → {int}
- Source:
Calculate the amount in px that the overflow menu needs to scroll to reveal all elements.
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
Returns:
- Total amount in px to scroll menu
- Type
- int
(inner) enableOverflow()
- Source:
Activates overflow menu arrows and scroll functionality.
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
(inner) getMenuWidth() → {int}
- Source:
Get the total overflow menu width in px, including the obscured portion.
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
Returns:
- Total menu width
- Type
- int
(inner) getTargetPosition() → {int}
- Source:
Get the x position of the $index-th element in $menu list
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
| int | index of target item in the menu list |
Returns:
- Total menu width
- Type
- int
(inner) handleResize()
- Source:
Binds resize events to re-check (and enable / hide) overflow menus as screen size changes.
(inner) handleScroll()
- Source:
Scrolls the overflow menu to the other size to reveal obscured menu items.
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
| int | direction. 1 when srcrolling to the right, -1 to the left |
(inner) hasOverflow() → {bool}
- Source:
Checks to see if specified menu is overflowing its container.
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
| int | Width of overflow menu container |
Returns:
- True / False depending on whether menu is overflowing container
- Type
- bool
(inner) hideOverflow()
- Source:
Deactivates overflow menu arrows and scroll functionality.
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
(inner) init()
- Source:
Locates and initializes all overflow menus on the page. Binds click and resize handlers. Enables if appropriate.
(inner) isValidScroll()
- Source:
Return whether or not a scroll is valid
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
| int | scroll direction, 1 represents scroll to the right, -1 scroll to the left |
(inner) reset()
- Source:
Retuns the overflow menu to initial state
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
(inner) setPageSize()
- Source:
Set the number of items to scroll per page
Parameters:
| Type | Description |
|---|---|
| element | Overflow menu element |
(inner) toggleOverflow()
- Source:
Toggles any overflow menus that are currently overflowing their container.