Push, reveal and overlay panel using jQuery

I discussed Jquery Mobile panels earlier. Jquery Mobile is quite useful, no doubt about that but believe me its quite heavy and increases loading time and believe me I hate the CSS over riding issue of jQuery Mobile sucks. So I created panels with jQuery to get rid off mobile stuff. Its an easy solution and works like jQuery Mobile.

Find This Project On Github

To generate a panel the panel and other content shpuld be siblings, on action panel or content acts to generate the effect. In all the cases panel have minimum height same as main content.The panel have 3 effects and all of them have a bit difference. Lets talk about them one by one.

Overlay

Overlay have main content static but on trigger the panel slides over content. The transition and shadow makes the effect more realistic.

Since margin does not create any overflow therefore the panel stays at position absolute with left and top at 0 . To make him hide out off the screen, we are going to use negative margin that is equal to the outer width of panel.

Taking two classes on panel, first is for close and second one is for closed panel that stays off screen and one class is added when panel is on screen. So in that case CSS would be:

.overlayp{
  position:absolute;
  left:0;
  top:0;
  margin-left:-300px;
  transition:margin-left .2s ease-in;
  -moz-transition:margin-left .2s ease-in;
  -webkit-transition:margin-left .2s ease-in;
}
.overlayp.active{
  margin-left:0;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
}

Push

The push effect is generated with the motion of main content and panel at same rate. The panel stays hidden with same technique as overlay but on trigger the panel comes put while the main content is pushed away from panel at same time.

While panel is hidden off screen on trigger negative margin becomes zero while 100% width of main content and margin at left of equal outer width of panel.

Since we need both, panel and content move on trigger so I'm adding two classes on each of them for initial and final positions. So CSS would be:

.pushp{
  position:absolute;
  left:0;
  top:0;
  margin-left:-300px;
  transition:margin-left .2s ease-in;
  -moz-transition:margin-left .2s ease-in;
  -webkit-transition:margin-left .2s ease-in;
}
.pushp.active{
  margin-left:0;
}
.main.pactive{
  margin-left:300px;
}

Reveal

Reveal effect is quite different from above two ones, in this effect the panel stays at back while on trigger the main content moves ahead which reveals the panel content. The transition and shadow makes it more realistic.

To attain this effect the make the panel absolute to left and top zero and let the z-index less then the content. While on trigger, make the content move ahead by negative margin which do not create horizontal scroll. Pretty simple right? Cool.

We need to move only content on trigger so just adding two classes on content for initial and final positions while panel holds a position.

.main.ractive{
  margin-left:300px;
  width:100%;
  box-shadow:0 0 20px rgba(0,0,0,0.6);
}
.revealp{
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
}

Demo

See the Pen LERqVp by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

What Else?

I found it pretty cool, but you know what Bruce Lee quoted that, "Absorb what is good, discard what is not. Add what is uniquely your own." I have some more creative advises to make it more pretty.

Well, I took all the panel from left side, it could be any side on the screen just a bit change of code and concept. Further I found this demo on Codrops and believe me I found it pretty creative. So just absorb the idea and put out some wow-ideas out of your mind.