a advanced dropdown/up/left/right menu.
Features:
- plain JS - no dependencies
- themeable
- use in your markup - easy to reason about
- aware of the viewport - automatically changes opening direction to be visible
npm install --save-dev ceri-dropdown
- general ceri component usage instructions
- in your project
window.customElements.define("ceri-dropdown", require("ceri-dropdown"))
<!-- as sibling (preferred) -->
<button>Click to open dropdown</button>
<ceri-dropdown>
<li><span>Line 1</span></li>
</ceri-dropdown>
<!-- as child -->
<button>Click to open dropdown
<ceri-dropdown>
<li><span>Line 1</span></li>
</ceri-dropdown>
</button>
For examples see dev/
.
Name | type | default | description |
---|---|---|---|
gutter | Number | 0 | horizontal offset |
anchor | String | overlay ? "nw" : "sw" | point of the parent where it will be attached |
keep-open | Boolean | false | will be not close on click outside of dropdown |
constrain-width | Boolean | false | fix width to parent width |
overlay | Boolean | false | will overlay parent |
hover | Boolean | false | open on hover instead click |
open | Boolean | false | set to open / close |
on-body | Boolean | false | will be positioned on body instead of sibling/parent element. Detailed description |
Name | description |
---|---|
toggled(open:Boolean) | emitted before open and after close |
There are two ways of positioning. The default is in-place, the other possibility is on body
.
- The in-place positioning can be problematic when you have an
overflow:hidden
combined with aposition:absolute|relative|fixed
element in the parent chain and the dropdown is overflowing. - the
body
positioning can be problematic when the parent is moving relative tobody
or when you depend on inheritance of styles.
<button class=btn>Click me!</button>
<ceri-dropdown class=materialize constrain-width overlay>
<li><span>Content</span></li>
<li><span>Content2</span></li>
</ceri-dropdown>
- read the documentation of the animate mixin.
- read and understand the default enter and leave animation in src/dropdown.coffee
- you can provide a custom animation like this:
# application wide
CEDD = require("ceri-dropdown")
CEDD.prototype.enter = (o) -> # your new enter animation
CEDD.prototype.leave = (o) -> # your new leave animation
window.customElements.define("ceri-dropdown", CEDD)
# single instance
# get a ref to your instance of ceri-dropdown somehow
# then overwrite the animations directly
ceDD.enter = (o) -> # your new enter animation
ceDD.leave = (o) -> # your new leave animation
Clone repository.
npm install
npm run dev
Browse to http://localhost:8080/
.
- use ceri-materialize@2
Copyright (c) 2017 Paul Pflugradt Licensed under the MIT license.