CODEWITHSUNDEEP
jqueryjquery-mobilecordova
NickF
NickF

Reputation: 5737

jQuery-mobile sliding menu under header

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)

enter image description here

Upvotes: 4

Views: 16906

Answers (3)

Omar
Omar

Reputation: 31732

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
});

Upvotes: 12

Tech-Junkie
Tech-Junkie

Reputation: 33

It can be done even better:

This works for the following situation:

  • Panel: data-display="push"
  • Panel: data-position="left"
  • Header: 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);
}

The first is to move the panel a bit down so it moves under the header while the second makes the header stay still instead of also moving to the side.

I guess that for different Panel and Header settings a different combination of CSS classes is used. You'll need to fiddle with that.

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

Upvotes: 2

krishwader
krishwader

Reputation: 11371

Along with the excellent answer by Omar, you could consider these options also as a solution.

  • You make use the first element in the listview as a button to close your panel. (Yes, users love it when you add a close button, see this question). Just add an anchor tag inside in the first li element and you're set. 

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

  • You could leave that place to be empty. (yeah i know, sounds kinda lame, but it wont hinder your design - its un-obstrusive. Just add an empty h1 tag to the first li:

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

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

Upvotes: 1

Related Questions