@codesoup/floating-menu NPM

Floating Menu

Automatically add a floating menu to your app.

Dependencies

@iconify/svelte

Installation

#in your app directory
npm install svelte-demo-floating-menu @iconify/svelte

How to use

Import the component and supply it with an options object containing, at a minimum, a menuName and make sure targeted links are given both {menuName} and {handle} as classes. eg: options = { github: {}}
Each menu can be given any of the following properties: 'desktop' (boolean), 'handheld' (boolean), 'icon' (string), 'handle' (string).
Default visibility is 'true' for both desktop and handheld devices.
Default handle is 'menu-item'.

<script>
  import { svelte-demo-floating-menu } from 'svelte-demo-floating-menu';

  # supply an options object to the component containing as as minimum a 'menuName' with default properties
  const options = { menuName: { }, otherMenuName: {}, ... };

  # or overwrite default menu properties
  const options = { menuName: { desktop: true/false, handheld: true/false, icon: "iconify string", handle: 'link class string'}};
  ...
</script>

<body>
  <FloatingMenu options={options} />
  ...
  # add {menuName} and {handle} as classes to targeted links, add title attribute if child content is a graphics element only (or is empty!)
  <a class="{menuName} {handle}" href="linktosomewhere.url" title="link description">Link description</a>

sveltekit

abbrev agent-base acorn-jsx ansi-regex ajv are-we-there-yet anymatch argparse array-union acorn balanced-match binary-extensions async-sema ansi-styles braces bindings busboy brace-expansion chokidar chalk aproba buffer-crc32 callsites chownr color-convert color-name cookie color-support debug concat-map dedent-js console-control-strings deepmerge delegates detect-indent devalue cross-spawn deep-is detect-libc dir-glob esbuild esbuild-darwin-64 doctrine emoji-regex es6-promise escape-string-regexp eslint-scope eslint-utils eslint-visitor-keys espree esquery esrecurse esutils estree-walker fast-deep-equal fast-glob estraverse fast-levenshtein fast-json-stable-stringify fill-range file-entry-cache file-uri-to-path fastq flat-cache find-up fsevents function-bind fs-minipass flatted glob-parent fs.realpath gauge globals glob globalyzer globby globrex has has-flag has-unicode graceful-fs https-proxy-agent grapheme-splitter ignore import-fresh is-core-module is-binary-path is-extglob is-fullwidth-code-point is-glob is-number imurmurhash inherits inflight isexe json-schema-traverse kleur js-sdsl json-stable-stringify-without-jsonify js-yaml lower-case levn magic-string locate-path make-dir lodash.merge mime merge2 min-indent lru-cache micromatch minimatch minimist mri mrmime ms nanoid minipass no-case mkdirp natural-compare minizlib node-fetch normalize-path node-gyp-build npmlog nopt object-assign p-limit pascal-case once optionator p-locate parent-module path-exists path-key picocolors picomatch path-is-absolute postcss path-parse path-type playwright-core prelude-ls readdirp punycode resolve queue-microtask readable-stream regexparam rollup regexpp resolve-from reusify sade rimraf run-parallel safe-buffer rollup-pluginutils set-cookie-parser sander semver set-blocking sirv shebang-command shebang-regex source-map-js streamsearch sourcemap-codec slash signal-exit sorcery strip-indent string-width supports-color string_decoder svelte-hmr strip-json-comments svelte2tsx strip-ansi tar to-regex-range totalist supports-preserve-symlinks-flag text-table tr46 tsutils tiny-glob type-check undici type-fest webidl-conversions uri-js util-deprecate whatwg-url which wide-align word-wrap wrappy worktop yocto-queue yallist

1 year ago

1 year ago

1 year ago

1 year ago