HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Dropdown
A dropdown component, for showing additional content when the user hovers over or clicks on an element.
Examples

HTML

<button class="hx-btn hx-positive" id="dropdown-example-1">Button</button>

JavaScript

dropdownExampleContent = "<div style='padding:10px;'>Example content!</div>"
dropdownExample1 = new hx.Dropdown("#dropdown-example-1", dropdownExampleContent)
Api
Change Log
Prototypes
hx.DropdownextendsEventEmitter
An api for creating a dropdown that shows when the user either clicks or hovers over an element.
Constructors
hx.DropdownselectorString / HTMLElementdropdownContentString / FunctionoptionsObject
Arguments
selectorString / HTMLElement
The element the user has to click or hover over to show the dropdown
dropdownContentString / Function
The content to fill the dropdown with. It can be either a html string or a function that is passed the dropdown node. An example string content could be: 
ddContent = '<div>Some content</div>';
options
The options to use for the dropdown.
Properties
alignString
The alignment value for the dropdown. The complete list of all alignment properties that should be used can be seen below:
  • 'up'
  • 'down'
  • 'left'
  • 'right'
  • 'lblt'
  • 'lbrt'
  • 'lbrb'
  • 'ltlb'
  • 'ltrt'
  • 'ltrb'
  • 'rblt'
  • 'rblb'
  • 'rbrt'
  • 'rtlt'
  • 'rtlb'
  • 'rtrb'
Aside from 'up', 'down', 'left' and 'right', the other values use the first two characters to select a corner from the selection and the second two characters to select a corner from the dropdown and then align those corners so they are closest to each other.
Default: 'lblt'
ddClassString
An additional class to add to the dropdown when creating it.
matchWidthBoolean
If set to true, the dropdown width will always be the same as or greater than the width of the selector
Default: true
modeString
The type of action that will show the dropdown, can be 'click' or 'hover' (the hover value will act as click for mobile devices without the hover event)
Default: 'click'
Properties
options
Properties
ddClassString
An additional class to add to the dropdown when creating it.
dropdownContentString / Function
The content to fill the dropdown with. It can be either a html string or a function that is passed the dropdown node.  An example string content could be 
ddContent = '<div>Some content</div>';
matchWidthBoolean
If set to true, the dropdown width will always be the same as or greater than the width of the selector
Events
changeBoolean
Emitted when the dropdown is shown or hidden. The data with the event is a boolean indicating whether or not the dropdown is visible. True means that the dropdown has just been shown, false means that it has just been hidden.
hideend
Emitted when the dropdown animation ends. No data is sent with this event.
hidestart
Emitted when the dropdown animation starts. No data is sent with this event.
render
showend
Emitted when the dropdown animation finishes. No data is sent with this event.
showstart
Emitted when the dropdown animation starts. No data is sent with this event.
Methods
addExceptionelementElementDropdown
Adds an exception to the click detector for this dropdown.
Arguments
elementElement
The element to add as an exception
Returns
Dropdown
This Dropdown
cleanUpDropdown
Called when the dropdown is removed from the page. It is unlikely that this will be needed, however if you are using dropdowns in dynamic content it may be required.
Returns
Dropdown
This Dropdown
dropdownContentString / Function
A method for getting the current dropdown content
Returns
String / Function
The currently set dropdown content
dropdownContentcontentString / FunctionDropdown
A method for setting the current dropdown content. Calling this whilst the dropdown is open will cause the dropdown to re-render with the content provided.
Arguments
contentString / Function
The dropdown content to set
Returns
Dropdown
This dropdown
hidecallbackFunctionDropdown
Hides the dropdown
Arguments
callback
Called when the animation finishes.
Returns
Dropdown
This Dropdown
isOpenBoolean
Returns whether the dropdown is visible or not.
Returns
Boolean
removeExceptionelementElementDropdown
Removes an exception from the click detector for this dropdown.
Arguments
elementElement
The element to remove as an exception
Returns
Dropdown
This Dropdown
renderDropdown
A method for re-rendering the dropdown whilst it is already open to allow the content to be updated without hiding/showing the dropdown.
Returns
Dropdown
This dropdown
showcallbackFunctionDropdown
Shows the dropdown
Arguments
callback
Called when the animation finishes.
Returns
Dropdown
This Dropdown
togglecallbackFunctionDropdown
Toggles the visibility of the dropdown.
Arguments
callback
Called when the animation finishes.
Returns
Dropdown
This Dropdown