forked from Dogfalo/materialize
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmobile.html
110 lines (101 loc) · 5.25 KB
/
mobile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Mobile - Materialize</title>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"/>
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"/>
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32"/>
<!-- Android 5 Chrome Color -->
<meta name="theme-color" content="#EE6E73"/>
<!-- CSS -->
<link href="css/prism.css" rel="stylesheet"/>
<link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Buy sell ads-->
<script>
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<nav id="">
<div class="container">
<div class="nav-wrapper"><a href="http://materializecss.com/" class="brand-logo">Materialize</a>
<ul id="nav-mobile" class="right side-nav">
<li><a href="http://materializecss.com/about.html">About</a></li>
<li><a href="http://materializecss.com/getting_started.html">Getting Started</a></li>
<li><a href="http://materializecss.com/sass.html">Sass</a></li>
<li><a href="http://materializecss.com/components.html">Components</a></li>
<li><a href="http://materializecss.com/javascript.html">JavaScript</a></li>
<li class="active"><a href="http://materializecss.com/mobile.html">Mobile</a></li>
</ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav><div class="container">
<div class="row">
<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#right">Sidebar</a></li>
</ul>
</div>
</div>
<div class="col s12 m9 l10">
<div id="right" class="section scrollspy">
<h2 class="header">Navbar</h2>
<p class="caption">The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.
</p>
<h4>Drag Out Menu</h4>
<p>There are 2 options for this plugin. You can set the menu width and the activation area width. The values shown in the example are the defaults so you don't have to set them if you are okay with those values.</p>
<img src="images/menu.gif">
<div class="row">
<pre><code class="language-javascript col s12">
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
</code></pre>
</div>
</div>
</div>
</div>
</div> <!-- End Container --><div id="footer" class="section">
<div class="footer-block">
<iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</div>
<div class="footer-block">
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
</div>
<div class="footer-block">
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
</div>
<div class="footer-block">
<a href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
</div>
</div><!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.timeago.js"></script>
<script src="js/prism.js"></script>
<script src="bin/materialize.js"></script>
<script src="js/init.js"></script>
<!-- Twitter Button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Google Plus Button-->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56218128-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>