Demo
Do you see a tab button on the left side of this text? And the other one on the top right corner of the screen? Try clicking them. Then...
That's MojoPlug Slide Panel, a free WordPress plugin.
Hardware accelerated
Most of the similar WordPress plugins seem to use 2D transform technique in animations, which leads to somewhat slow and jerky panel movement in mobile devices. MojorPlug plugin uses hardware acceleration technique, supported by most of the mobile browsers, making animation fast and smooth.
Starting to use a panel
After installing a plugin go to WordPress Admin area, open the Appearance-Widgets screen. You should see two new widget holders, one for the left and one for the right panel. Drop at least one widget on a panel and it will automatically activate and be visible on your site.
Next, go to Settings section and adjust your panel for your needs.
Attaching panels to your web page
You can attach a slide panel to any element in your site. You do that in plugin setting by indicating a target element, which can be an HTML tag, id or class. The important thing is that you have only one of those element names on you page, so the slide panel knows which one to hook to.
The default target element is 'body'. The top right side panel on this page is actually using it. Since 'body' element is found on every single html page, you will also have your panel available everywhere.
If you use some other target element, the height of the panel is automatically adjusted to be the same as with the element. As an example, I have selected the first text block in this page and given it ID "mojo-sp-demo-id". In the plugin settings I defined "#mojo-sp-demo-id" as a target element for the left panel. Voilá!
Btw I'm using SiteOrigin Page Builder in this site. It makes creating text blocks (or "rows") a breeze and you can define your customized IDs for the blocks very easily. Recommended.
Toggling panel with customized button or link
If you want to control panel toggle by yourself, it's very simple. Just create any clickable element (link, button...) and give it a predefined ID or class:
Left Panel: #mojosp-toggle-left / .mojosp-toggle-left
Right Panel: #mojosp-toggle-right / .mojosp-toggle-right
That's it! If you have enabled your panel it should toggle now when you click your link or button. Furthermore, in the plugin setting you can take away the built-in tab button if you wish.
FAQ
A typical reason for this may be that some HTML elements on the page that are overlapping or hiding the button and panel.
If you understand HTML code, try to find elements with z-index or overflow:hidden CSS directives on the page. For example, if z-index value is very high for a sidebar, it may block the panel entirely.
You may solve these type of problems by:
a) tuning MojoPlug Slide Panel z-index in settings to higher value
b) tuning your theme element's z-index to lower value and/or removing overflow:hidden
b) attaching panel to some other element in Settings
c) trying out with some other WordPress theme
See the first question. The most probable reason is that some other elements on your page are using higher z-index value than Slide Panel.
See the first question. Other elements are probably having higher z-index value than the panel.
Go to Plugins->Installed Plugins and press "edit" in MojoPlug Slide Panel section. Find the style.css and modify it to set headline and normal text colors.
Go to Plugins->Installed Plugins and press "edit" in MojoPlug Slide Panel section. Open the style.css and find the tab button section. Use "top" parameter to set button position.