{"_id":"@dcdavidev/jquery-sidenav","name":"@dcdavidev/jquery-sidenav","dist-tags":{"latest":"3.2.0"},"versions":{"3.2.0":{"name":"@dcdavidev/jquery-sidenav","version":"3.2.0","description":"A simple side nav written in jquery","keywords":["jquery","jquery-plugin","sidenav","simple-sidenav","simpler-sidenav"],"homepage":"https://github.com/dcdavidev/sidenav","bugs":{"url":"https://github.com/dcdavidev/sidenav/issues"},"repository":{"type":"git","url":"git+https://github.com/dcdavidev/sidenav.git"},"license":"MIT","author":{"name":"Davide Di Criscito"},"type":"module","exports":{".":{"types":"./dist/index.d.cts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.cts","devDependencies":{"@dcdavidev/tsconfig":"latest","@types/jquery":"latest","@types/jqueryui":"latest","jquery":"^4.0.0","jquery-ui":"^1.14.2","tsdown":"latest"},"peerDependencies":{"jquery":"^4.0.0","jquery-ui":"^1.14.0"},"scripts":{"prebuild":"rm -rf dist","build":"tsdown","dev":"tsdown --watch"},"_id":"@dcdavidev/jquery-sidenav@3.2.0","_integrity":"sha512-BUiZTZiHM8mwnlcM4THIfR1Wug3ecOOtrdErP3CXGcOFWAbK/cMYPvxcJTtnZuTfSsgOrxj2exEy6IXsM9HGow==","_resolved":"/tmp/9329f2c56c05a5a23c27f0167b3c6973/dcdavidev-jquery-sidenav-3.2.0.tgz","_from":"file:dcdavidev-jquery-sidenav-3.2.0.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-BUiZTZiHM8mwnlcM4THIfR1Wug3ecOOtrdErP3CXGcOFWAbK/cMYPvxcJTtnZuTfSsgOrxj2exEy6IXsM9HGow==","shasum":"f9865dcdfe58a408565ff8ee5a1f1bca4303625c","tarball":"https://registry.npmjs.org/@dcdavidev/jquery-sidenav/-/jquery-sidenav-3.2.0.tgz","fileCount":7,"unpackedSize":16906,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE5PigoiMXMFsGy2idvTHacml3xP6NptiFSOYQXWheFRAiAdeJWqN/WLd/5G15TlEOsY7+JfG0S3KH6s01VBCUisHg=="}]},"_npmUser":{"name":"dcdavidev","email":"dcdavidev@outlook.com"},"directories":{},"maintainers":[{"name":"dcdavidev","email":"dcdavidev@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/jquery-sidenav_3.2.0_1771869232983_0.2155986136137502"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-23T17:53:52.862Z","3.2.0":"2026-02-23T17:53:53.128Z","modified":"2026-02-23T17:53:53.353Z"},"maintainers":[{"name":"dcdavidev","email":"dcdavidev@outlook.com"}],"description":"A simple side nav written in jquery","homepage":"https://github.com/dcdavidev/sidenav","keywords":["jquery","jquery-plugin","sidenav","simple-sidenav","simpler-sidenav"],"repository":{"type":"git","url":"git+https://github.com/dcdavidev/sidenav.git"},"author":{"name":"Davide Di Criscito"},"bugs":{"url":"https://github.com/dcdavidev/sidenav/issues"},"license":"MIT","readme":"# @dcdavidev/jquery-sidenav\n\nA robust, flexible, and simple-to-use side navigation plugin for jQuery. Designed to mimic modern mobile application sidebars, it handles everything from basic animations to page freezing and background masks.\n\n## Features\n\n- 📱 **Mobile-Ready**: Smooth animations optimized for a native-like feel.\n- ⚙️ **Highly Configurable**: Control width, alignment, animation easing, and more.\n- 🧊 **Page Freezing**: Optionally prevent background scrolling when the menu is open.\n- 🎭 **Auto-Masking**: Automatically generates a clickable background mask to close the menu.\n- ⌨️ **TypeScript Powered**: Fully typed for a better developer experience.\n\n## Installation\n\nInstall the package via your preferred package manager:\n\n```shell\n# pnpm\npnpm add @dcdavidev/jquery-sidenav\n\n# npm\nnpm install @dcdavidev/jquery-sidenav\n\n# yarn\nyarn add @dcdavidev/jquery-sidenav\n```\n\n### Dependencies\n\nThis plugin requires **jQuery** (v4.0+) and **jQuery UI** (for animation easing).\n\n```html\n<script src=\"https://code.jquery.com/jquery-4.0.0.min.js\"></script>\n<script src=\"https://code.jquery.com/ui/1.14.0/jquery-ui.min.js\"></script>\n```\n\n## Quick Start\n\n### 1. HTML Structure\n\nYour sidebar needs a trigger (toggler) and the navigation container itself.\n\n```html\n<!-- The App Bar / Header -->\n<header>\n  <button id=\"toggle-sidenav\">Menu</button>\n</header>\n\n<!-- The Sidenav -->\n<nav id=\"sidenav\">\n  <div class=\"sidenav-wrapper\">\n    <button class=\"quit-sidenav\">Close Menu</button>\n    <ul>\n      <li><a href=\"#\">Home</a></li>\n      <li><a href=\"#\">About</a></li>\n      <li><a href=\"#\">Contact</a></li>\n    </ul>\n  </div>\n</nav>\n```\n\n### 2. Basic Initialization\n\nInitialize the plugin by targeting your sidenav element:\n\n```javascript\n$(document).ready(function () {\n  $('#sidenav').sidenav({\n    toggler: '#toggle-sidenav',\n    quitter: '.quit-sidenav',\n  });\n});\n```\n\n## Advanced Usage\n\n### Handling Content Overflow\n\nBy default, the sidenav has a fixed height. If your menu is long, you should wrap your content in a container with scrolling enabled:\n\n```css\n#sidenav .sidenav-wrapper {\n  height: 100%;\n  overflow-y: auto;\n}\n```\n\n### Using Event Callbacks\n\nYou can hook into the lifecycle of the sidenav to trigger custom logic:\n\n```javascript\n$('#sidenav').sidenav({\n  toggler: '#toggle-sidenav',\n  events: {\n    onOpen: function () {\n      console.log('Sidenav is starting to open!');\n    },\n    afterClose: function () {\n      console.log('Sidenav is now fully closed.');\n    },\n    always: function () {\n      // Triggered on every state change\n      $('#toggle-sidenav').toggleClass('is-active');\n    },\n  },\n});\n```\n\n## Options\n\n| Option               | Type                | Default   | Description                                                                 |\n| :------------------- | :------------------ | :-------- | :-------------------------------------------------------------------------- |\n| `toggler`            | `string`            | `''`      | **Required**. Selector for the element that toggles the menu.               |\n| `quitter`            | `string`            | `'a'`     | Selector for elements inside the menu that will close it when clicked.      |\n| `align`              | `'left' \\| 'right'` | `'left'`  | Which side the menu appears on.                                             |\n| `width`              | `number`            | `300`     | Width of the menu in pixels.                                                |\n| `gap`                | `number`            | `64`      | The minimum gap left between the menu and the screen edge on small devices. |\n| `open`               | `boolean`           | `false`   | Whether the menu should be open on initialization.                          |\n| `zIndex`             | `number`            | `3000`    | The z-index of the sidenav element.                                         |\n| `freezePage`         | `boolean`           | `true`    | Set `body` overflow to `hidden` when the menu is open.                      |\n| `animation.duration` | `number`            | `500`     | Animation speed in milliseconds.                                            |\n| `animation.easing`   | `string`            | `'swing'` | jQuery UI easing function name.                                             |\n| `mask.display`       | `boolean`           | `true`    | Whether to show the background overlay.                                     |\n| `mask.css`           | `object`            | See below | Custom CSS for the mask element.                                            |\n\n### Default Mask CSS\n\n```javascript\n{\n  backgroundColor: 'black',\n  opacity: 0.5,\n  filter: 'Alpha(opacity=50)'\n}\n```\n\n## License\n\nMIT © [Davide Di Criscito](https://github.com/dcdavidev)\n","readmeFilename":"README.md","_rev":"1-59da11bfbffab07ae4bfbb5c59d8fa52"}