/
stepper.html
137 lines (119 loc) · 16.1 KB
/
stepper.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
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>visualNav Section stepper demo</title>
<link rel="stylesheet" href="css/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.visualNav.js"></script>
<script>
$(function(){
// make mousewheel trigger a jump to the next or previous content block
var flag = false;
$('html, body').bind('mousewheel', function(e, delta){
if (flag) { return false; }
flag = true;
// find current menu item
var cur = $('#nav').find('.current');
// find prev/next item based on mousewheel direction
cur[delta > 0 ? 'prev' : 'next']().find('a').trigger('click');
setTimeout(function(){
flag = false;
}, 1000);
// allow scroll
return true;
});
$('#nav').visualNav({
// content class to get height of the section.
contentClass : 'section',
// css class applied to menu when a link is selected (highlighted).
selectedClass : 'current',
// don't stop animation on mousewheel
stopOnInteraction : false
});
});
</script>
</head>
<body id="stepper">
<ul id="nav">
<li class="first">
test
</li>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
<li><a href="#section-5">Section 5</a></li>
<li><hr><a class="external" href="https://github.com/Mottie/visualNav">Github</a></li>
<li><a class="external" href="https://github.com/Mottie/visualNav/archive/master.zip">Download</a></li>
<li>Demos:</li>
<li class="external external-horiz">
<a href="index.html" title="Vertical">V</a>
<a href="horizontal.html" title="Horizontal">H</a>
<a href="horiz-vert.html" title="Horizontal/Vertical"> H/V </a>
</li>
<li class="external external-horiz">
<a class="current" href="stepper.html" title="Section stepper">Step</a>
<a href="bootstrap.html" title="Twitter Bootstrap">Boot</a>
</li>
</ul>
<div id="container">
<div class="section" id="section-1">
<h3>Section 1</h3>
<p><span class="hilight">Scroll the mousewheel to move the page down one section</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
</div>
<div class="section" id="section-2">
<h3>Section 2</h3>
<p><span class="hilight">Scroll the mousewheel to move the page up or down one section at a time</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
</div>
<div class="section" id="section-3">
<h3>Section 3</h3>
<p><span class="hilight">Scroll the mousewheel to move the page up or down one section at a time</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
</div>
<div class="section" id="section-4">
<h3>Section 4</h3>
<p><span class="hilight">Scroll the mousewheel to move the page up or down one section at a time</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
</div>
<div class="section" id="section-5">
<h3>Section 5</h3>
<p><span class="hilight">Scroll the mousewheel to move the page up one section</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh mauris, et semper libero. Fusce elementum varius nisi ut dapibus. Aenean arcu massa, imperdiet sit amet molestie et, iaculis eget urna. Phasellus suscipit lacus ac nisi fringilla in tincidunt elit posuere. Curabitur vehicula ornare ligula quis vehicula. Mauris condimentum, tellus id mattis hendrerit, odio dolor varius nibh, at tincidunt dui elit sit amet lectus.</p>
</div>
</div>
<div id="footer">
<p>This is a footer</p>
</div>
</body>
</html>