-
Notifications
You must be signed in to change notification settings - Fork 393
/
single-page-pattern.html
134 lines (134 loc) · 10.7 KB
/
single-page-pattern.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
<!-- <![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>FlexNav - Flexible, Device Agnostic Navigation</title>
<link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body id="page" class="single-page-pattern-page one-page">
<div class="container">
<header id="site-header">
<hgroup class="site-title">
<h1> <a href="http://jasonweaver.name/lab/flexiblenavigation">FlexNav</a></h1>
<h2 class="site-title-sub">A jQuery Plugin for Responsive Menus</h2>
</hgroup>
<div class="menu-button one-page">Menu</div>
<nav>
<ul data-breakpoint="800" class="flexnav one-page">
<li><a href="#page">Item 1</a></li>
<li><a href="#section2">Item 2</a></li>
<li><a href="#section3">Item 3</a></li>
<li><a href="#section4">Item 4</a></li>
<li><a href="#section5">Item 5</a></li>
</ul>
</nav>
</header>
<section id="content" role="main">
<article>
<div class="article-wrap">
<div class="block">
<h2>Single page navigation pattern</h2>
<p>This is an example of using FlexNav on a single page with the navigation anchoring to each section of the page. Just add the .one-page class to the body, .menu-button, and your navigation ul.</p>
</div>
<div class="block">
<h2>Usage</h2>
<p>Start with a simple unordered list, adding in the class and data attributes:<code><ul class="flexnav one-page" data-breakpoint="800"> <li>...</li> </ul></code></p>
<p>Add the small screen menu button somewhere outside your navigation markup:<code><div class="menu-button">Menu</div></code></p>
<p>Add flexnav.css to the head of your document:<code><link href="css/flexnav.css" rel="stylesheet" type="text/css" /></code></p>
<p>Add jquery.flexnav.min.js before the closing body tag:<code><script type="text/javascript" src="js/jquery.flexnav.min.js"></script></code></p>
<p>Initialize FlexNav right before your closing body tag:<code>$(".flexnav").flexNav();</code></p>
<p>you can change the default speed too:<code>$(".flexnav").flexNav({ 'animationSpeed' : 'fast' });</code></p>
<h2>Options</h2>
<p><code>
'animationSpeed' : '250', <span> // default drop animation speed</span> <br>
'transitionOpacity': true, <span> // default opacity animation</span> <br>
'buttonSelector': '.menu-button', <span> // default menu button class</span> <br>
'hoverIntent': false, <span> // Use with hoverIntent plugin</span> <br>
'hoverIntentTimeout': 150 <span> // hoverIntent default timeout</span> <br>
</code></p>
</div>
<div id="section2" class="block">
<h2>Section 2</h2>
<p>Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.</p>
<p>Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.</p>
<p>Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.</p>
</div>
<div id="section3" class="block">
<h2>Section 3</h2>
<p>Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.</p>
<p>Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.</p>
<p>Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.</p>
</div>
<div id="section4" class="block">
<h2>Section 4</h2>
<p>Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.</p>
<p>Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.</p>
<p>Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.</p>
</div>
<div id="section5" class="block">
<h2>Section 5</h2>
<p>Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.</p>
<p>Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.</p>
<p>Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.</p>
</div>
</div>
</article>
<article>
<div class="article-wrap">
<div class="block"><img src="http://jasonweaver.name/img/devices.png" alt="devices" class="img-devices"></div>
<div class="block">
<h2>Get FlexNav v1.1</h2>
<p><a href="https://github.com/indyplanets/flexnav" class="callout">Download on GitHub →</a></p>
</div>
<div class="block">
<h2>Features</h2>
<ul>
<li>Multiple nested sub menus</li>
<li>Tap targets to reveal sub menus for touch screens</li>
<li>Hover reveal for desktop</li>
<li>Keyboard tab input accessibility</li>
</ul>
</div>
<div class="block">
<h2>Browser Support</h2>
<ul>
<li>IE7-10</li>
<li>Latest Safari</li>
<li>Latest Chrome</li>
<li>Latest FireFox</li>
<li>Android 2.2 to Latest</li>
<li>Mobile Safari</li>
</ul>
</div>
</div>
</article>
</section>
</div>
<footer id="site-footer">
<div class="container">
<ul>
<li>Code by <a href="http://jasonweaver.name">Jason Weaver</a></li>
<li><a href="mailto:indyplanets@gmail.com">Contact Me</a></li>
</ul>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
//$.noConflict();
</script>
<script src="js/jquery.flexnav.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".flexnav").flexNav();
});
</script>
</body>
</html>