Directory

← Back

fly-out

A fly out menu

Author

Rating

Popularity

<100

<fly-out>

A fly-out (aka drop-down) menu with the following features:

  • Written in light-weight plain JavaScript; no framework dependencies.
  • Accessibility is a primary goal.

Usage / Install

Use directly from unpkg:

<fly-out label="Menu">
  <ul>
    <li><a href="/home">Homepage</a></li>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shoes">Shoes</a></li>
  </ul>
</fly-out>

<script type="module" src="https://unpkg.com/@matthewp/fly-out/fly-out.js"></script>

Customize

Content

The content for the fly-out button can be provided 2 ways. The first is to use the button slot. The following shows this usage:

<fly-out class="user-menu" caret align="right">
  <img slot="button" alt="@person" src="https://example.com/some-image.png" height="20" width="20">
  <ul slot="menu" class="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</fly-out>

As shown above, when you want to customize the button contents you need to add 2 named slots:

  • slot=button: Used to set the contents of the button.
  • slot=menu: Used to set the contents of the (initially) hidden menu.

If all you need is text you can use the label attribute, in which case no named slots are necessary:

<fly-out label="Menu">
  <ul>
    <li><a href="/home">Homepage</a></li>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shoes">Shoes</a></li>
  </ul>
</fly-out>

Alignment

By default the dropdown will be aligned to the left of the button. If you would like it to be aligned to the right, such as if your button is all the way to the right end of the screen, use the align attribute:

<fly-out label="Menu" align="right">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</fly-out>

Styling

The <button> that the fly-out menu displays can be styled by providing the following CSS variables:

fly-out {
  --button-background-color: #f4511e;
  --button-font-size: 1em;
  --button-padding: 12px 16px;
  --button-color: white;
}

When the menu is open a boolean open attribute is added to the element. This can be used to customize any of the above values while the menu is open. For example:

fly-out[open] {
  --button-background-color: grey;
}

License

BSD 2 Clause

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2018-09-20
Maturity
IMPORTED
License
BSD 2-clause "Simplified" License

Compatibility

Framework
Browser
Browser Independent

fly-out - Vaadin Add-on Directory

A fly out menu fly-out - Vaadin Add-on Directory
# <fly-out> A fly-out (aka drop-down) menu with the following features: * Written in light-weight plain JavaScript; no framework dependencies. * Accessibility is a primary goal. ## Usage / Install Use directly from unpkg: ```html ``` ## Customize ### Content The content for the fly-out button can be provided 2 ways. The first is to use the `button` slot. The following shows this usage: ```html @person ``` As shown above, when you want to customize the button contents you need to add 2 named slots: * `slot=button`: Used to set the contents of the button. * `slot=menu`: Used to set the contents of the (initially) hidden menu. If all you need is text you can use the __label__ attribute, in which case no named slots are necessary: ```html ``` ### Alignment By default the dropdown will be aligned to the *left* of the button. If you would like it to be aligned to the right, such as if your button is all the way to the right end of the screen, use the `align` attribute: ```html
  • Item 1
  • Item 2
``` ### Styling The `
Online