jQuery-mobile sliding menu under header

Question

I just entered into jQuery mobile, and saw the next example

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

Answer 1

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

Demo

Calculate header's .outerHeight() and panel's .height().

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

Give panel a new min-height in order not to cause page to scroll

var panelheight = panel - header;

Override panel style

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