CSS Tips & Tricks: Sliding Panel Transition in SAP Design Studio

Introduction

A sliding panel transition can be a really good solution for someone looking to save on dashboard real estate. Sliding it in and out of view with butter-smooth transitions on demand presents a very compelling case when it comes to dashboard aesthetics – it’s fast, can be easily animated, and it’s something users are used to seeing on SAP Design Studio dashboards.

What is a slide panel?

The slide-out panel, using CSS3 transitions, promotes efficient use of space on a dashboard. When used as a navigation panel, users can choose to reveal the panel on-demand. Transitions give an aesthetic appeal to the panel, constituting a good look-and-feel along with functionality.

How to create the slide panel using CSS3:

1) Insert a panel in the application and set its layout attributes as required.

2) Insert a Grid Layout inside the panel and set its layout attributes as required. All components to be shown in the navigation panel are to be contained in the Grid Layout (it is preferable to set the width of the Grid Layout to an absolute value to ensure that the transition works seamlessly).

3)  Save the CSS script given below as a separate style sheet (Create a notepad file and save it as <name>.css).

.slideout {
  position: fixed;
  top: 42px;
  left:0;
  width: 35px;
  padding: 12px 0;
  text-align: center;
  background: #fdcb03;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  cursor:pointer;
  height:90% !important;
 }
 .slideout_inner {
  position: fixed;
  top: 42px;
  left: -300px;
  height:93% !important;
  background: #000000;
  padding: 25px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  text-align: left;
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
 }
 .slideout:hover, .slideout:focus {
  left: 300px;
 }
 .slideout:hover .slideout_inner, .slideout:focus .slideout_inner {
  left: 0;
 }

4) Now insert a Text Box with the layout attributes similar to that of the panel, and width as an absolute value – around 10px. Insert the CSS tags/attributes given below under the CSS Style property of the Text Box:

filter:flipv fliph;
 writing-mode:tb-rl;
 color:#333333;
 font-size:14px;
 text-align:center;
 height:90%;

5) Upload the CSS file using the application’s properties (Properties View), and set the CSS classes as follows:

• Panel -> ‘slideout’
• Grid Layout -> ‘slideout_inner’

The application should now look like this:

What are the advantages of having a Slide-Out Panel using CSS?

1) Responsive on all devices and all browsers (10+ for ie and all latest versions)

2) Much faster transitions

3) Light weight animation

4) Access filters/navigation on demand, without wasting or disturbing the layout of the dashboard.

source: http://visualbi.com/blogs/design-studio/design-studio-tips-and-tricks/css-sliding-panel-transition-sap-design-studio/