CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-mobiledrop-down-menu
Nirmal Patel
Nirmal Patel

Reputation: 5168

JQueryMobile: Dropdown menus in Header

I am creating a JQM webapp and need to add dropdown menu to the header to achieve the following effect

----------------------------------
 [Menu1]   Page Title     [Menu2]     
----------------------------------

Any examples of dropdown widgets for JQM?

Upvotes: 5

Views: 52042

Answers (5)

negin51
negin51

Reputation: 9

You should set navbar grid menu with for example 5 buttons in header bar and then set for each of navbar buttons one popup menu with dropdown transation.

Upvotes: 0

Laszlo Lugosi
Laszlo Lugosi

Reputation: 3829

In JQuery Mobile 1.3 there is a built in sample for this problem.

http://view.jquerymobile.com/1.3.0/docs/widgets/popup/

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slidedown" data-icon="gear" data-theme="e">Actions...</a>
 <div data-role="popup" id="popupMenu" data-theme="d">
    <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
        <li data-role="divider" data-theme="e">Choose an action</li>
        <li><a href="#">View details</a></li>
        <li><a href="#">Edit</a></li>
        <li><a href="#">Disable</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

Upvotes: 6

bluescrubbie
bluescrubbie

Reputation: 540

The jQuery Mobile 1.2 docs give an example of using the popup widget for creating a menu from a button rather than a select:

http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">Menu</a>

<div data-role="popup" id="popupMenu" data-overlay-theme="b">
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
        <li><a data-rel="popup" href="#popupMenuLevel1">Add</a></li>
        <li><a data-rel="popup" href="#popupMenuLevel1">Edit</a></li>
        <li><a data-rel="popup" href="#popupMenuLevel1">Manage</a></li>
        <li><a data-rel="popup" href="#popupMenuLevel1">Delete</a></li>
    </ul>
</div>

<div data-role="popup" id="popupMenuLevel1" data-overlay-theme="b">
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
    <li><a data-rel="popup" href="#popupMenuLevel2">Remove</a></li>
    <li><a data-rel="popup" href="#popupMenuLevel2">Undo</a></li>
    <li><a data-rel="popup" href="#popupMenuLevel2">Splice</a></li>
    <li><a data-rel="popup" href="#popupMenuLevel2">Reticulate</a></li>
    </ul>
</div>

<div data-role="popup" id="popupMenuLevel2" data-overlay-theme="b">
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
        <li><a href="index.html">Basics</a></li>
        <li><a href="options.html">Options</a></li>
        <li><a href="methods.html">Methods</a></li>
        <li><a href="events.html">Events</a></li>
    </ul>
</div>

Upvotes: 4

Nirmal Patel
Nirmal Patel

Reputation: 5168

Here's a jsFiddle with the code I wrote for this.

Screenshot from JSFiddle

Upvotes: 23

Ryan
Ryan

Reputation: 28177

See this jsFiddle for a sample based on jQuery Mobile's built-in select menus. I've had to do something like this in the past... it's far from perfect and likely wont render correctly on all devices, but it worked OK in my case.

enter image description here

Upvotes: 5

Related Questions