Response title
This is preview!
- Screen name: jasoncmcg
jasoncmcg's Profile
1 Posts
1 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 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><!-- /header --><div data-role="content">
<div class="content-primary">
<p>Primary page content</p>
</div><!--/content-primary -->
<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><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p class="jqm-version"></p>
<p>footer</p>
</div>
</div><!-- /page -->
</body>
</html>- «Prev
- Next »
Moderate user : jasoncmcg
