{"id":15041748,"url":"https://github.com/grubersjoe/slide-menu","last_synced_at":"2025-04-05T22:09:43.639Z","repository":{"id":57114407,"uuid":"64841331","full_name":"grubersjoe/slide-menu","owner":"grubersjoe","description":"A multilevel page menu with a smooth slide effect","archived":false,"fork":false,"pushed_at":"2024-05-28T08:53:32.000Z","size":1354,"stargazers_count":130,"open_issues_count":23,"forks_count":45,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T20:09:49.053Z","etag":null,"topics":["javascript","menu","scss","slide-menu","transitions"],"latest_commit_sha":null,"homepage":"https://grubersjoe.github.io/slide-menu","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grubersjoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-03T11:35:41.000Z","updated_at":"2025-03-07T10:21:31.000Z","dependencies_parsed_at":"2024-09-20T18:22:53.919Z","dependency_job_id":"f38d5389-4f2b-408a-929b-4941b01ba14a","html_url":"https://github.com/grubersjoe/slide-menu","commit_stats":{"total_commits":131,"total_committers":3,"mean_commits":"43.666666666666664","dds":0.5038167938931297,"last_synced_commit":"3314e14c6e32e5753910777fcc8acee28486163b"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Fslide-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Fslide-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Fslide-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Fslide-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grubersjoe","download_url":"https://codeload.github.com/grubersjoe/slide-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246842244,"owners_count":20842731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","menu","scss","slide-menu","transitions"],"created_at":"2024-09-24T20:46:26.412Z","updated_at":"2025-04-05T22:09:43.611Z","avatar_url":"https://github.com/grubersjoe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slide Menu\n\n\u003e ⚠️ This project is unmaintained. Feel free to fork it.\n\n*A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions and various options.*\n\nSupport: All current browsers and IE11+ (if using `dist/slide-menu.ie.js`).\n\n**[Demo](https://grubersjoe.github.io/slide-menu)**\n\n## Breaking changes\n\nVersion 1.0 has been released and includes breaking changes: SlideMenu no longer depends on jQuery and the library has been rewritten in TypeScript. See below instructions how to use the current version. \n\n## Install\n```sh\nnpm install @grubersjoe/slide-menu\n``` \n\nNow import `dist/slide-menu.js` and `dist/slide-menu.css` in your bundler or build system of choice or use a 1998 `\u003cscript\u003e` and `\u003clink\u003e` tag. Afterwards `SlideMenu` will be available in the global namespace (`window.SlideMenu`).\n\nTo keep the bundle size small (17 kB vs. 22 kB) Internet Explorer 11 is not supported out of the box. If you need to support Internet Explorer 11 use `dist/slide-menu.ie.js` instead. \n\n\n## Usage\nAll you need is the traditional CSS menu HTML markup and a wrapper with the class `slide-menu`. Menus can be nested endlessly to create the desired hierarchy. If you wish to programmatically control the menu, you should also set an ID to be able to use the API (see below).\n\n**Example**\n\n```html\n\u003cnav class=\"slide-menu\" id=\"example-menu\"\u003e\n  \u003cul\u003e\n    \u003cli\u003e\n      \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eSubmenu entry 1\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eSubmenu entry 2\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eSubmenu entry 3\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"/blog\"\u003eBlog\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"/about\"\u003eAbout\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\nCreate the menu then like this:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const menuElement = document.getElementById('example-menu');\n  const menu = new SlideMenu(menuElement);\n});\n```\n \n## Options\n\nThe `SlideMenu()` constructor takes an optional second parameter to pass in various options:\n  \nOption | Description | Valid values | Default\n--- | --- | --- | ---\n`backLinkAfter` | HTML to append to back link in submenus | HTML code |  `''`\n`backLinkBefore` | HTML to prepend to back link in submenus | HTML code |  `''`\n`keycodeClose` | Key used to close the menu | [Any valid KeyboardEvent key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) | `undefined`\n`keycodeOpen` | Key used to open the menu | [Any valid KeyboardEvent key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) | `undefined`\n`position` | Position of the menu | `'left'` or `'right'` | `'right'`\n`showBackLink` | Add a link to navigate back in submenus (first entry) | *boolean* | `true`\n`submenuLinkBefore` | HTML to prepend to links with a submenu | HTML code |  `''`\n`submenuLinkAfter` | HTML to append to links with a submenu | HTML code |  `''`\n \n Example:\n \n ```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const menu = new SlideMenu(document.getElementById('example-menu'),{\n      showBackLink: false,\n      submenuLinkAfter: ' \u003cstrong\u003e⇒\u003c/strong\u003e'\n  });\n});\n ```\n \n## API\n\nYou can call the API in two different ways:\n\n* Reuse the reference to the `SlideMenu` instance: \n    ```javascript\n    const menu = new SlideMenu(document.getElementById('example-menu'));\n  \n    // ... later\n    menu.close();\n    ```\n* The `SlideMenu` instance is also added as property of the menu DOM element (I'm still not sure if this might be a really bad idea). So if you need to control an existing menu without a reference to it, you can fetch it any time this way:\n\n    ```javascript\n    const menu = document.getElementById('example-menu')._slideMenu;\n    menu.open();\n    ```\n\n### Methods\n\n* `close(animate = true)` - Close the menu\n* `back()` - Navigate on level back if possible\n* `destroy()` - revert all DOM changes made by SlideMenu. This includes inline styles, but not the `slide-menu` class name for the container element.\n* `navigateTo(target)`\n    Open the menu level which contains specified menu element. `target` can either be a `document.querySelector` compatible string selector or the the DOM element (inside the menu). The first found element (if any) will be used.\n* `open(animate = true)` - Open the menu\n* `toggle(animate = true)` - Toggle the menu\n\n### Events\n\n`SlideMenu` emits events for all kind of actions, which trigger as soon as the action is method is called. Plus, all events have  also an `\u003cevent\u003e-after` equivalent, which is fired after the step is complete (completely animated).\n\n* `sm.back[-after]` fires immediately when navigating backwards in the menu hierarchy or after the animation is complete respectively. \n* `sm.close[-after]` fires immediately when the `close()` method is called or after the animation is complete respectively. \n* `sm.forward[-after]`fires immediately when navigating forward in the menu hierarchy or after the animation is complete respectively. \n* `sm.navigate[-after]`fires immediately when calling the `navigateTo()` method or after the animation is complete respectively. \n* `sm.open[-after]` fires immediately when the `open()` method is called or after the animation is complete respectively.\n\n\nMake sure to add the event listener to the HTML element, which contains the menu, since the events for this specific menu are dispatched there:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const menuElement = document.getElementById('example-menu');\n  const menu = new SlideMenu(menuElement);\n\n  // Attach the event listener to the *DOM element*, not the SlideMenu instance\n  menuElement.addEventListener('sm.open', function () {\n    console.log('The menu opens');\n  });\n\n  menuElement.addEventListener('sm.open-after', function () {\n    console.log('The menu has opened');\n  });\n});\n```\n\n### Control buttons\n \nButtons to control the menu can be created easily. Add the class `slide-menu__control` to anchors or buttons and set the `data` attributes `target` to the ID of the desired menu and `action` to the API method:\n\n```html\n\u003cbutton type=\"button\" class=\"slide-menu__control\" data-action=\"open\"\u003eOpen\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"slide-menu__control\" data-action=\"back\"\u003eBack\u003c/button\u003e\n```\n\n*Inside* the menu container the attribute `data-target` can be omitted or set to to the string `this` to control *this* menu.\n\n```html\n\u003ca class=\"slide-menu-control\" data-action=\"close\"\u003eClose this menu\u003c/a\u003e\n\u003ca class=\"slide-menu-control\" data-target=\"this\" data-action=\"close\"\u003eClose this menu\u003c/a\u003e\n```\n\n## Development\n\n```sh\nyarn install\nyarn start:dev\n```\n\nOpen http://localhost:9000/.\n\nTo create a production build:\n\n```sh\nyarn build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrubersjoe%2Fslide-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrubersjoe%2Fslide-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrubersjoe%2Fslide-menu/lists"}