My App

Menu Add

Panel position fixed: Reveal Menu + Overlay Form

With fixed toolbars

This is a typical page that has two buttons in the header bar that open panels. The left button opens a left menu with the reveal display mode. The right button opens a form in a right overlay panel.

Since the panel links are in the top bar, there really isn't a need for the fixed positioning feature on the panel since you will always be scrolled to the top of the page. We only set data-position-fixed="true" here to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled.

To make this responsive, the left panel stays open and causes the page to re-flow at wider widths. This allows both the menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the class="ui-responsive-panel" to the page container.

Markup and CSS for left reveal menu.

Markup and CSS for right overlay form.

Footer

Create new user

Landing page

Home

This is just a landing page.

Back Home