Doc Section: Getting started
Markup
Any element that contains a nested list. A link (or button) followed by a <ul> becomes a submenu trigger: LayerMenu adds: destroy() removes all of it and restores the original markup.
Quick start
Without JavaScript: Or from code:
Script tag
The browser build exposes window.LayerMenu and automatically initialises every element with a data-layer-menu attribute. ES module / bundlers File Format dist/layer-menu.min.js Browser, minified, auto-init dist/layer-menu.js Browser, readable, auto-init dist/layer-menu.esm.js ES module dist/layer-menu.cjs CommonJS dist/layer-menu.css / .min.css Required structural styles dist/_layer-menu.scss SCSS source with !default variables dist/layer-menu.d.ts TypeScript definitions
Quick start
<section class="hero">…</section> <script src="smooth-background.min.js"></script> <script> new SmoothBackground('.hero', { colors: ['#F9BFBF', '#F9F4BF', '#BFC9F9', '#BFF9DB'], duration: '1.5s', // transition between two colors hold: '1s', // pause on each color }); </script> The first argument is an element or a CSS selector; for a selector, only the first match is used. To initialise many elements at once, use...
Script tag
Copy dist/smooth-background.min.js to your project: <script src="smooth-background.min.js"></script> <script> new SmoothBackground('.hero', { colors: ['#D4E66A', '#B6CEDD', '#2A3240'] }); </script> The browser build exposes window.SmoothBackground and automatically initialises every element that has a data-sbg attribute (see Data attributes). ES module import SmoothBackground from './smooth-background.esm.js'; Bundlers (CommonJS / ESM) Put the package folder into your project (or publish it...
