forked from kdajones/jquery-pageslide
/
responsive.html
109 lines (96 loc) · 4.15 KB
/
responsive.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
<!doctype html>
<html lang="en">
<head>
<title>jQuery PageSlide Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- The jquery.pageslide.css stylesheet has the class that you'll need on your page -->
<link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" />
<style>
body {
background: #f4f4f4;
font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: none;
}
a, a:visited { color: #C30; text-decoration: none; border-bottom: 1px dotted #C30; }
a:hover { color: #900; border-bottom-style: solid; }
p { margin-bottom: 20px; }
#content {
width: 940px;
padding: 10px;
margin: 0 auto;
}
#content h1 { color: #333; line-height: 1em; }
ul#nav { padding-left: 0; list-style: none; width: 100%; margin-bottom: 40px; }
ul#nav:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
#content ul#nav li { float: left; width: 20%; text-align: center; }
#content ul#nav a {
display: block;
background: #000;
color: #FFF;
font-weight: bold;
padding: 10px;
border-right: 1px solid #FFF;
}
#content ul#nav a:hover { background: #333; }
.open {
display: none;
float: left;
width: 40px;
height: 30px;
margin-right: 10px;
background: url(menu.png) center center no-repeat #333;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-border-radius: 8px;
box-shadow: inset 0 0 3px #000;
text-indent: -999999px;
border: 0;
}
/* Media Queries
================================================== */
/* Mobile and iPad Portrait */
@media only screen and (max-width: 959px) {
#content { width: 748px; }
}
/* Mobile Landscape and Portrait */
@media only screen and (max-width: 767px) {
#content { width: 400px; }
#content h1 { font-size: 22px; line-height: 30px; background-color: #000; color: #FFF; padding: 10px; }
#content ul#nav { display: none; }
.open { display: block; }
#pageslide { width: 200px; }
#pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }
#pageslide #nav li a { color: #FFF; border: none; }
#pageslide #nav li a:hover { text-decoration: underline; }
}
/* Mobile Portrait */
@media only screen and (max-width: 479px) {
#content { width: 280px; }
#content h1 { font-size: 14px; }
}
</style>
</head>
<body>
<div id="content">
<h1><a class="open" href="#nav">Menu</a>PageSlide Responsive Demo</h1>
<ul id="nav">
<li><a href="">Menu Item 1</a></li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 3</a></li>
<li><a href="">Menu Item 4</a></li>
<li><a href="">Menu Item 5</a></li>
</ul>
<div class="copy">
<p>If you've ever used the <a href="http://m.facebook.com">mobile version of Facebook</a>, or <a href="http://www.path.com">Path</a>, then you've probably seen something akin to PageSlide in action.</p>
<p>In this example, resizing the browser to a smaller window (less than or equal to an iPhone's landscape view) will collapse and hide the faux menu nav above. Clicking on the menu icon will then trigger PageSlide to open.</a>
</div>
</div>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../jquery.pageslide.min.js"></script>
<script>
$(".open").pageslide();
</script>
</body>
</html>