Slideout

C Slideout Start with Tbar Stacked and Sidebar

C Slideout End with Tbar Stacked and Sidebar

A fixed position container aligned to the right side of the browser window and is used for aligning complex navigations like tbar-stacked and sidebar.

C Slideout End with Sidebar

A fixed position container aligned to the right side of the browser window and is used for aligning complex navigations like tbar-stacked and sidebar.

C Slideout

A CSS component for displaying off canvas content that slides out from the left or right. This component must be used with .sidebar, .tbar.tbar-stacked or both.

The modifiers c-slideout-fixed and c-slideout-absolute sets position: fixed; and position: absolute; on c-slideout, respectively.

The modifiers c-slideout-start and c-slideout-end positions the slideout on the left and right, respectively. It also sets display and positions sidebar and tbar components so the animations can be rendered properly.

On Open

Add the classes c-slideout-transition c-slideout-transition-in on sidebar and tbar.

If rendering a push style animation, add the class c-slideout-push or c-slideout-push-tbar to c-slideout depending on the type of push style you need. Then add the classes c-slideout-transition c-slideout-transition-in to the parent element.

After the browser applies the transition styles, add the class c-slideout-show on sidebar and tbar.

For push style animation add padding-left or padding-right to the parent element with the width of c-slideout.

On transitionend, remove the classes c-slideout-transition c-slideout-transition-in from sidebar, tbar, and the parent element. Then add the class c-slideout-shown to c-slideout. If showing a tbar add the class c-slideout-tbar-shown to c-slideout. This ensures the transition stays smooth when rendering a push style transition.

On Close

If closing both, add the class c-slideout-transition c-slideout-transition-out on sidebar and tbar and remove the classes c-slideout-shown c-slideout-tbar-shown from c-slideout.

If closing only sidebar, add c-slideout-transition c-slideout-transition-out to that.

If rendering a push style animation, add the class c-slideout-transition c-slideout-transition-out to the parent element.

After the browser applies the transition styles, remove the class c-slideout-show on sidebar and/or tbar.

For push style animation remove padding-left or padding-right from the parent element.

On transitionend, remove the class c-slideout-transition c-slideout-transition-out from sidebar, tbar, and parent element.