JQuery-mobile sliding menu under the heading

Question

I just entered jQuery mobile and saw the following example

Is it possible to make a sliding menu under the heading? (in red lines in the image)

Answer 1

Override .ui-panel style by changing the position of top and min-height values

Demo

Compute the .outerHeight() header and the .outerHeight() panel.

 var header = $('[data-role=header]').outerHeight(); var panel = $('.ui-panel').height(); 

Give the panel a new min-height so that it doesn't scroll

 var panelheight = panel - header; 

Change Panel Style

 $('.ui-panel').css({ 'top': header, 'min-height': panelheight }); 

Answer 2

This can be done even better:

This works for the following situation:

• Panel: data-display="push"
• Panel: data-position="left"
• Title: data-position="fixed"

and change the following css styles:

 .ui-panel { top: 41px; height: calc(100% - 41px); } .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 

First, move the panel slightly so that it moves under the heading, and the second makes the heading remain stationary, and not move to the side.

I assume a different combination of CSS classes is used for the different Panel and Header settings. You will need to play around with this.

demo: http://jsbin.com/avuviy/2/

Answer 3

Along with Omar's excellent answer, you can consider these options as well as a solution.

• You use the first item in listview as a button to close the panel. (Yes, users like it when you add a close button, see This is a question ). Just add the anchor tag inside the first li element and you will install it.

   <li data-icon="false"><a href="#my-header" data-rel="close" data-icon="delete"></a></li> 

• You can leave this place empty. (yes, I know, it sounds a bit uncomfortable, but it will not interfere with your design - its un-obstrusive ). Just add an empty h1 tag to the first li:

   <li data-icon="false"><h1></h1></li> 

Here is a demo: http://jsbin.com/avuviy/1/edit