-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (164 loc) · 6.24 KB
/
index.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<title>Flex by Ross Whitehouse</title>
<link rel="stylesheet" href="https://rawgit.com/rosswhitehouse/flex/gh-pages/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/rosswhitehouse/flex/gh-pages/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="one">
<div class="title">Flex
</div>
<div class="description">Easily turn your list into a responsive Flexbox menu that won't interrupt your code.</div>
<div class="boxes">
<a href="flex.js"><div class="zip">Download JS file</div></a>
<a href="https://github.com/rosswhitehouse/flex"><div class="github">View on Github</div></a>
</div>
<div class="arrow"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="two">
<div class="instructions">
<div class="title">How It Works</div>
<p>Take your regular list-menu, like this:</p>
<div class="code">
<ul class='menu'>
<br />
<br />
<li>Home</li><br />
<li>About</li><br />
<li>Generic Menu Item</li><br />
<li>Contact</li><br />
<br />
</ul></div>
</div>
<div class="arrowTwo"><i class="fa fa-arrow-circle-down"></i></div>
</div>
<div class="three">
<div class="title">Next...</div>
<p>Having called Flex.js, simply replace the class name in this section at the bottom of flex.js:</p>
<div class="code">$('.menu').flex({});</div>
<div class="arrowThree"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="demo">
<div class="title">Try it Out!</div>
<p>
Resize the window and watch the menu change!
</p>
<div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>General</li>
<li>Link</li>
</ul>
</div>
<div class="arrowDemo"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="four">
<div class="title">Now...</div>
<p>There are plenty of options to customise your menu as you like:</p>
<ul>
<li class="optionOne">Colours, fonts etc.</li>
<li class='optionTwo'>Direction</li>
<li class="optionThree">Responsiveness</li>
<li class="optionFour">Spacing</li>
<li class="optionFive">Order</li>
</ul>
<div class="arrowFour"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="five">
<div class="arrowOptions"><i class=" fa fa-arrow-circle-up"></i></div>
<div class="title">Colours and Fonts</div>
<p>Good news! Flex is as code-agnostic as possible, which means your menu items will inherit styles like these from the CSS you set and it won't interrupt what flex is doing!</p>
<div class="arrowFive"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="six">
<div class="arrowOptions"><i class=" fa fa-arrow-circle-up"></i></div>
<div class="title">
Direction
</div>
<p>
In order to change the direction of the menu, find this part of the script:</p>
<span class="code">direction: 'row'</span>
<p>You can change the option here to either row (horizontal), or column (vertical).
</p>
<div class="arrowSix"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="seven">
<div class="arrowOptions"><i class=" fa fa-arrow-circle-up"></i></div>
<div class="title">
Responsiveness
</div>
<p>Flex will automatically change direction from a row to a column when the screen becomes smaller than 720 pixels. To change this, find this code section:</p>
<span class="code">
if($(window).width() < 720){<br />
$('.flex-grid-ross-css').css({<br />
'flex-direction':'column'<br />
});<br />
}<br />
<br />
$(window).resize(function(){<br />
if($(window).width() < 720){<br />
$('.flex-grid-ross-css').css({<br />
'flex-direction':'column'<br />
});<br />
}<br />
<br />
else {<br />
$('.flex-grid-ross-css').css({<br />
'flex-direction':'row'<br />
});<br />
}<br />
</span>
<p class="pTwo">You can remove this completely, or change it to a different screen width. You can also swap column for row.</p>
<div class="arrowSeven"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="eight">
<div class="arrowOptions"><i class=" fa fa-arrow-circle-up"></i></div>
<div class="title">
Space Between
</div>
<p>
In order to define the space around your menu items, first, find the options at the top, and set the following option:</p>
<div class="code">justify: 'space-around'</div>
<p class="pTwo">
You can change the option to any of the following:
<ul>
<li>Flex-start - Aligns the items to the left-hand side</li>
<li>Flex-end - Aligns the items on the right</li>
<li>Center - Justifies the items into the center</li>
<li>Space-Between - Leaves space between each item, but not at the edges</li>
<li>Space-Around - Similar to Space-Between, but also puts space at the edges of the menu.</li>
</ul>
</p>
<div class="arrowEight"><i class=" fa fa-arrow-circle-down"></i></div>
</div>
<div class="nine">
<div class="arrowOptions"><i class=" fa fa-arrow-circle-up"></i></div>
<div class="title">
Order
</div>
<p>This section of code selects each item in your list and applies an order to them. To change the order, simply change the number in the qoutes. The lower the number, the earlier the order.</p>
<div class="code">
$(one).css({<br />
'order':'1'<br />
});<br />
<br />
$(two).css({<br />
'order':'2'<br />
});<br />
<br />
$(three).css({<br />
'order':'3'<br />
});
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/rosswhitehouse/flex/gh-pages/flex.js"></script>
<script src="https://rawgit.com/rosswhitehouse/flex/gh-pages/script.js"></script>
</body>
</html>