Implementing Slideout.js into your project is easy. Slideout is available on cdnjs. Also you can use one of many package managers. First of all, you'll need to create your markup. You should have a menu (#menu) and a main content (#panel) into your body. Add the Slideout.js styles (index.css) in your web application. Then you just include Slideout.js, create a new instance with some options and call the toggle method. Supports Chrome (IOS, Android, desktop), Firefox (Android, desktop), Safari (IOS, Android, desktop), Opera (desktop), and IE 10+ (desktop and mobile). You can use the special HTML attribute data-slideout-ignore to disable dragging on some elements. For example, if you have to prevent slideout will open when touch on carousels, maps, iframes, etc. The slideout emits translatestart, translate and translateend events only when it is opening/closing via touch events.

Features

  • Dependency-free
  • Simple markup
  • Native scrolling
  • Easy customization
  • CSS transforms & transitions
  • Just 2 Kb! (min & gzip)

Project Samples

Project Activity

See All Activity >

License

MIT License

Follow Slideout.js

Slideout.js Web Site

Other Useful Business Software
Ship Agents Faster Icon
Ship Agents Faster

Transform your applications and workflows into powerful agentic systems at global scale.

Gemini Enterprise Agent Platform lets you rapidly build, scale, govern and optimize production-ready agents grounded in your organization's data. The platform enables developers to build custom or pre-built agents for virtually any use case. New customers get $300 in free credits.
Get Started Free
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of Slideout.js!

Additional Project Details

Operating Systems

Android, Apple iPhone

Programming Language

JavaScript

Related Categories

JavaScript User Interface (UI) Software

Registered

2021-07-15