In a post before I highlighted an issue related to responsive design,according to which if in the small screen sizes the sidebar goes down.It will decrease the user interface,hence the solution is to use sliding panel for sidebar.Therefore this post will solve your sliding panel problem using Jquery panel plugin or Jquery mobile.
jQuery Plugin jPanel
Lets start with our first option of Jquery panel plugin.So the plugin I would like to suggest is to use jPanel which is easy to use plugin.So lets begin with it.First add Jquery in your template just after
<head><script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
Now add jPanel script in your template.Add the following line before
</head><script src='http://jpanelmenu.com/jquery.jpanelmenu.js'></script>Then
trigger the plugin using Jquery in a DOM ready function.Like below one$(function(){Just change the menu
var jPM = $.jPanelMenu({
menu: '#custom-menu-selector',
trigger: '.custom-menu-trigger-selector'
});
jPM.on();
});
id or class and trigger id or class.To add more options like animation and more you can refer the jPanel options.The demo is belowSee the Pen Demo for jPanel plugin by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen
Using jQuery Mobile
Okay,now its time for second and most considered topic of this post.The Jquery Mobile is developed by Jquery foundation and required Jquery to work with it.It assist to work with responsive website to create a mobile website experience more refined.It has provided many widgets to work with but I would like to discus the Panel.
So the first step is to add Jquery,Jquery Mobile JS and Jquery Mobile CSS which you will find from Jquery Mobile website.
To work with Jquery Mobile Panel widget you must have to create a format.The outer most wrapper should have
data-role="page".Then header,main content and footer should be the sibling of panel.Like I've done below.<div id='outer' data-role='page'>Now just for clarification,with
<div class='header' data-role='header'></div>
<div class='content-wrapper' data-role='content'></div>
<div id='sidebar' data-role='panel' data-position='right' data-display='push'></div>
</div>
data-role I've added data-position and data-display.Actually the reason is data-position will declare the position of sliding panel that is either right or left.The data-display will show the way that panel will be displayed,the values of data-display are push,reveal and overlay.The above format will work fine.Now its time to add
trigger button.Its simple to add button,just make sure that the button will go under <a> tag and the value of href will be the class or id of the panel (which is sidebar in the above format).If the panel have id then id goes with hash(#) and if it is class then a dot(.).Accordingly,the button will be something like below one.<a href="#sidebar" data-role="button" data-inline="true" data-icon="bars">Button</a>The others are to just add styling options into button.If a user clicks on this button then the panel will not cover the whole page but will leave some space,if a user again click on the open button or on the page the panel will be closed,but in any case if you want to create a close button then just add
data-rel='close' and the href will point to the class or id of the page.<a href="#outer" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>Now its time to have a demo.Look at the pen for demo.
Post A Comment:
0 comments: