Search jQuery

jQuery Forum

Screen name:
jasoncmcg

jasoncmcg's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Mimic JQuery Mobile Docs Menu

[3 Replies]
- 14-Dec-2012 07:54 PM
- Forum: jQuery Mobile
What is the secret to get a list menu to work just like the one on the JQuery Mobile docs pages?

It seems to work in every browser. If there is enough screen realestate, then you see the nav menu on the left. If there is not enough room, then it shows the menu in a "more in this section" expandable list at the bottom of the page.

Looking at the source of the page, I see the structure looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Page titles</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
  <div data-role="header" data-theme="f">
  <h1>Page titles</h1>
  <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>
<div data-role="content">
   <div class="content-primary">
    <p>Primary page content</p>
   </div>
   <div class="content-secondary">
    <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
      <h3>More in this section</h3>
      <ul data-role="listview" data-theme="c" data-dividertheme="d">
       <li><a href="listoflinks.html">List of Links</a></li>
      </ul>
    </div>
   </div>
   </div>
   <div data-role="footer" class="footer-docs" data-theme="c">
     <p class="jqm-version"></p>
    <p>footer</p>
   </div>
</div>
</body>
</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend