{"_id":"@dcdavidev/jquery-sidenav-css","name":"@dcdavidev/jquery-sidenav-css","dist-tags":{"latest":"3.2.0"},"versions":{"3.2.0":{"name":"@dcdavidev/jquery-sidenav-css","version":"3.2.0","description":"A simple side nav written in jQuery with css3 animations","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","jquery":"^4.0.0","tsdown":"latest"},"peerDependencies":{"jquery":">=3.0.0"},"scripts":{"prebuild":"rm -rf dist","build":"tsdown","dev":"tsdown --watch"},"_id":"@dcdavidev/jquery-sidenav-css@3.2.0","_integrity":"sha512-jD5OeSxqrJizabYyNDtJ5HCrmeMMloVqQw95pwyniK8VLhsm98gnXtm/DzpQcDoA9El3XhhnjlNkFSYjhVnk7A==","_resolved":"/tmp/e72b12f50e17883c918ff6aca27c779d/dcdavidev-jquery-sidenav-css-3.2.0.tgz","_from":"file:dcdavidev-jquery-sidenav-css-3.2.0.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-jD5OeSxqrJizabYyNDtJ5HCrmeMMloVqQw95pwyniK8VLhsm98gnXtm/DzpQcDoA9El3XhhnjlNkFSYjhVnk7A==","shasum":"c5b49c4e7830d08d0002575288ee2edd8fa4ae52","tarball":"https://registry.npmjs.org/@dcdavidev/jquery-sidenav-css/-/jquery-sidenav-css-3.2.0.tgz","fileCount":7,"unpackedSize":17987,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICwscxzctOHSWNOGLtiB9B8SGg6lPRugqTU3+AkCVshIAiEAmUXLTYOnzgTANEnzxfcAJ3wdEjEiq9BaWMr1fJKe29c="}]},"_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-css_3.2.0_1771869235105_0.4673320917700925"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-23T17:53:55.012Z","3.2.0":"2026-02-23T17:53:55.263Z","modified":"2026-02-23T17:53:55.769Z"},"maintainers":[{"name":"dcdavidev","email":"dcdavidev@outlook.com"}],"description":"A simple side nav written in jQuery with css3 animations","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-css\n\nA lightweight and performant side navigation plugin for jQuery that leverages **CSS3 transitions** for ultra-smooth animations. This version is optimized for modern browsers and offers better performance on low-power devices compared to traditional JavaScript-based animations.\n\n## Features\n\n- ⚡ **CSS3 Hardware Accelerated**: Uses native browser transitions for maximum smoothness.\n- 📱 **Mobile-First**: Designed to feel like a native mobile app sidebar.\n- 🛠️ **Lightweight**: No dependency on jQuery UI.\n- 🧊 **Page Freezing**: Prevents background scrolling when the menu is active.\n- 🎭 **Clickable Mask**: Automatically creates a customizable background overlay.\n- ⌨️ **TypeScript Ready**: Full type definitions included.\n\n## Installation\n\n```shell\n# pnpm\npnpm add @dcdavidev/jquery-sidenav-css\n\n# npm\nnpm install @dcdavidev/jquery-sidenav-css\n\n# yarn\nyarn add @dcdavidev/jquery-sidenav-css\n```\n\n### Dependencies\n\nThis plugin only requires **jQuery** (v4.0+ recommended).\n\n```html\n<script src=\"https://code.jquery.com/jquery-4.0.0.min.js\"></script>\n```\n\n## Quick Start\n\n### 1. HTML Structure\n\nSetup your trigger button and the navigation container.\n\n```html\n<!-- Trigger -->\n<header>\n  <button id=\"toggle-sidenav\">Open Menu</button>\n</header>\n\n<!-- Sidenav -->\n<nav id=\"sidenav\">\n  <div class=\"sidenav-wrapper\">\n    <button class=\"quit-sidenav\">Close</button>\n    <ul>\n      <li><a href=\"#\">Dashboard</a></li>\n      <li><a href=\"#\">Settings</a></li>\n      <li><a href=\"#\">Logout</a></li>\n    </ul>\n  </div>\n</nav>\n```\n\n### 2. Basic Initialization\n\nTarget your sidenav element and initialize the plugin:\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\nTo ensure long menus are scrollable, add the following CSS to your wrapper:\n\n```css\n#sidenav .sidenav-wrapper {\n  height: 100%;\n  overflow-y: auto;\n}\n```\n\n### Event Lifecycle\n\nHook into sidenav events to add custom interactions:\n\n```javascript\n$('#sidenav').sidenav({\n  toggler: '#toggle-sidenav',\n  events: {\n    onOpen: function () {\n      console.log('Animation started...');\n    },\n    afterOpen: function () {\n      $('#toggle-sidenav').addClass('active');\n    },\n    afterClose: function () {\n      $('#toggle-sidenav').removeClass('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| `attr`               | `string`            | `'sidenav-main'` | Data attribute prefix.                                                 |\n| `align`              | `'left' \\| 'right'` | `'left'`         | Sidebar alignment side.                                                |\n| `width`              | `number`            | `300`            | Width of the menu in pixels.                                           |\n| `gap`                | `number`            | `64`             | Minimum gap from the screen edge on small devices.                     |\n| `open`               | `boolean`           | `false`          | Initial state on page load.                                            |\n| `zIndex`             | `number`            | `3000`           | The z-index of the sidenav.                                            |\n| `freezePage`         | `boolean`           | `true`           | Disables `body` scrolling when menu is open.                           |\n| `animation.duration` | `number`            | `300`            | CSS transition duration in milliseconds.                               |\n| `animation.easing`   | `string`            | `'ease-out'`     | Any valid CSS `transition-timing-function`.                            |\n| `mask.display`       | `boolean`           | `true`           | Enable/disable the background overlay.                                 |\n| `mask.opacity`       | `number`            | `0.5`            | Opacity of the background mask.                                        |\n| `mask.css`           | `object`            | `{...}`          | Custom CSS for the mask (e.g., `backgroundColor`).                     |\n\n## Key Differences from `@dcdavidev/jquery-sidenav`\n\n- **Performance**: Uses CSS3 `transition` instead of jQuery `.animate()`, leading to smoother 60fps animations.\n- **Dependencies**: No dependency on jQuery UI easing.\n- **Easing**: Supports any CSS easing value (e.g., `cubic-bezier`).\n- **Options**: `mask.opacity` is a top-level option for easier customization.\n\n## License\n\nMIT © [Davide Di Criscito](https://github.com/dcdavidev)\n","readmeFilename":"README.md","_rev":"1-00be79a0fc01bcfbba3c8abd3fe8e954"}