Ninja Kick: Sliding Panel is a WordPress plugin that adds hidden sidebar with content push animation effect on every page of your site. It uses modern CSS3 transitions with fallback to older JS animations if browser lacks support. Plugin Sidebar is responsive to screen size changes, works well on mobile devices and reacts on swipe gestures.
- Unzip plugin archive.
- Place 'NKS-custom' folder into the .../wp-content/plugins/ directory of your site.
Or you can do the second part in more handy way via WordPress Admin panel:
- On the Plugins panel press the Add New button.
- Press Upload tab.
- Browse for the NKS-custom.zip file, select it, press Open.
- Click Install Now.
Main widget file
main.php generates sidebar HTML and injects JS (like main JS
nks-custom.js and required JS libraries based on WordPress jQuery) from
/js folder and CSS from
/css folder on your site page.
Plugin main PHP class is defined in
main.php_. It provides standard WordPress plugin routine like settings and appearance presentation in admin and settings storage in WordPress database and also includes other .php files and injects .js, .css for browser pages. Nothing really to customize here, only in case of new functionality addition.
settings.phpare both dedicated to handle settings page presentation and scripting.
- Dynamic content generation takes place in
nks-custom.php. There can be found base HTML for sidebar.
- Logic of how sidebar works on your page is encapsulated in
nks-custom.js. Plugin initialization and animation logic can be found here. If you want to change something of this stuff you should edit this file.
IMPORTANT: by default plugin uses minified
nks-custom.min.js to optimize page load but editing of this file is much harder. We suggest you to switch to non-minified
nks-custom.js. Search for string
main.php and change path. Then edit this file (found in
/js folder) and minify it here. Save as new
- jQuery plugin
tinycolor.jsto work with colors.
- jQuery Colorpicker UI plugin
Design: CSS and images
We use two CSS files in this theme. The first one
admin.css is for plugin styles in WordPress admin like settings page. The second file
NKS-subscription.css contains all of the specific stylings for the panel on your site pages.
Feel free to edit any of this CSS. Please double-check if editing more than just font or background color.
By default only way to expose sidebar is to click on label with icon. Plugin doesn’t generate buttons by itself, it looks for exact class
nks_cc_trigger_element on page. If element with this class exists click on it will expose sidebar. You need manually add class to desired element like this:
<a class="my_theme_standard_button nks_cc_trigger_element" href="#">EXPOSE!</a>
Also you can call sidebar API methods
NinjaSidebarCustom.hideSidebar() from your JS code to control panel exposure on certain conditions.
- Chrome >= 20
- Mozilla Firefox >= 15
- Internet Explorer >= 8
- Safari >= 5
- Opera >= 12
- Safari Mobile for iOS
- Chrome for Android / iOS
- Firefox for Android
Only dependency is jQuery equal or greater than 1.7 version.
IMPORTANT: when sidebar is exposed first time Ninja Form script puts all body contents in special wrapper element. You might encounter problems if your html, body or main container element is positioned absolute or fixed.
To get support for any our product please visit our Help Center. Our Help Center is the only official Looks Awesome support handling mechanism. Questions sent using other channels may be ignored without notice. Check out our Support Policy.