Slider Panel

Slider Panel

If you really like this project you can help Spread the Word. You can also star the project on Github :)
If you really like this project you can help Spread the Word. You can also star the project on Github :)

Slider Panel

A simple sliding panel plugin to display off-canvas contents.

Download


A simple sliding panel to display off-canvas contents. The panel pushes the exiting body content to the specified direction and smoothly transitions into the view area. This plugin uses css transforms (translate3d) and cubic bezier transitions to achieve the sliding effect.

Coffeescript Sass

Quick Start

  • Download the plugin
  • or git clone https://github.com/sudharti/slider-panel.git
  • Include js and css from dist/
  • Include JQuery depedency
  • Check out how to use it
  • Plug it in your code

Customizing

  1. Install Git
  2. Clone the Repository using git clone https://github.com/sudharti/slider-panel.git
  3. The plugin is written using coffeescript and scss
  4. Checkout the folder structure below

Folder Structure

  slider-panel/
  ├── dist/
  │   ├── css/
  │   │   ├── slider-panel.css
  │   │   └── slider-panel.min.css
  │   │
  │   └── js/
  │       ├── slider-panel.js
  │       └── slider-panel.min.js
  │   
  ├── assets/
  │   ├── css/
  │   └── js/
  ├── src/
  │   ├── coffee/
  │   │   └── slider-panel.coffee
  │   └── scss/
  │       ├── _dimension.scss
  │       ├── _panel.scss
  │       ├── _transform.scss
  │       ├── _translate.scss
  │       ├── _variables.scss
  │       └── slider-panel.scss
  ├── code-templates/
  ├── index.html
  ├── Gruntfile.js
  ├── package.json
  ├── README.md
  └── LICENSE

Install Dependencies

npm
To install nodejs & npm checkout the following link
Grunt
Grunt and it's plugins can be installed and managed using npm, the default Javascript package manager for nodejs. You can then install Grunt using the following command 
npm install -g grunt-cli

Grunt Tasks

  • grunt sass: Compiles the Sass files from src/ and generates css in dist/css
  • grunt coffee: Compiles coffee files from src/ and generates js in dist/js
  • grunt: The default grunt task
  • grunt server: Start the server, performs grunt connect and grunt watch

Start Customizing

  1. Modify the scss and coffee files under src/
  2. Compile source using grunt
  3. Start the server using grunt server
  4. Any changes you make to the scss files will trigger the watch task which will regenerate the dist/ files

Browser Compatability

  • Firefox 4.0 (2.0)+
  • Chrome 4.0+
  • Internet Explorer 10+ (Really? Even IE? :O)
  • Opera 10.5+
  • Safari 3.1+

Usage

Data Attributes

Slide panel is automatically invoked by setting data attributes

  1. Add data-slide to body <body data-slide='[push overlay]'>...</body>
  2. Add .slider-panel class to panel <div class='slider-panel'>...</div>
  3. Add .wrapper class <div class='wrapper'>...</div>
  4. Add data-panel='panel-id', data-dir='[left right]' & data-dim='[true false]' to calling element <a data-panel='panel-id' data-dir='[left right]' data-dim='[true false]' href>...</a>


                  

                    
                      

                        Attribute
                        Options
                        Description
                      

                    
                    
                      

                        data-slide
                        
                          [push overlay]
                        
                        Whether the panel shoudl push or overlay over content
                      

                      

                        data-panel
                        [target panel id]
                        The Target panel id
                      

                      

                        data-dir
                        
                          [left right top bottom]
                        
                        
                          The Direction in which panel should appear
                        
                      

                      

                        data-dim
                        [true false]
                        Dim page content or not
                      

                    
                  

                  

                  
Using Javascript

                  
 Alternatively you can manually invoke the slider panel using Javascript. 
                  
    
                    
  1. Add data-slide to body <body data-slide='[push overlay]'>...</body>
    2. 
                    
  2. Add .slider-panel class to panel <div class='slider-panel'>...</div>
    3. 
                    
  3. Add .wrapper class <div class='wrapper'>...</div>
    4. 
                    
  4. $(element).sliderpanel(options);
    5. 
                  

                  options are provided as a Javascript Object { }

                  

                

                

                  
Examples

                  

                    
                    
                    
                    
                  

                  

                

                

                  
Issues

                  You can raise issues at https://github.com/sudharti/slider-panel/issues
                  
Contributing

                  If you want to contribute to this project
                  
    
                    
  1. Fork the Project at https://github.com/sudharti/slider-panel
    2. 
                    
  2. Make changes
    3. 
                    
  3. Send Pull Request
    4. 
                  

                

              

            

          

          

          

            

              Released under MIT License |
              Made by sudharti