CODEWITHSUNDEEP
jquery-mobilemenu
Aximili
Aximili

Reputation: 29444

jQuery Mobile menu

This has been asked for an older version, but no satisfying answer.

When viewed on small screen, the jQuery Mobile doc uses a multi-level menu panel that slides in when tapped.

The menu button enter image description here

I tried copying the code but this is all I got:

enter image description here

Apparently you also need to specify data-role="collapsible" on lis with sub-menu, and some other attributes, which is not really ideal.

Surely there are people who use jQuery Mobile who also need the menu on their mobile website. But it is nowhere in the documentation.

Has anyone figured out how to do it without reinventing the wheel?
Or does jQuery Mobile simply not support this kind of menu without manually coding everything?

Upvotes: 2

Views: 1645

Answers (1)

Omar
Omar

Reputation: 31732

If you check page source, you will notice that uls' within the panel have no data-role="listview" and lis' that contains sub-elements are given data-role="collapsible".

That's not all, on mobileinit event, the aforementioned uls' are converted into listview using the below code.

$(".jqm-navmenu-panel ul").listview();

Moreover, padding and margin are removed/modified on all panel's elements to get them stick to each others.

.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading {
  margin: 0;
}

.jqm-navmenu-panel .ui-collapsible.ui-li-static {
  padding: 0;
  border: none !important;
}

.jqm-navmenu-panel .ui-collapsible + li > .ui-btn,
.jqm-navmenu-panel .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn,
.jqm-navmenu-panel .ui-panel-inner > .ui-listview > li.ui-first-child .ui-btn {
  border-top: none !important;
}

.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
  padding-left: 1.5em;
  color: #999;
}

.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn.ui-btn-active {
  color: #fff;
}

.jqm-navmenu-panel .ui-btn:after {
  opacity: .4;
  filter: Alpha(Opacity=40);
}

.jqm-navmenu-panel ul li:first-child a{
  border-top: none;
}

Demo

Upvotes: 3

Related Questions