-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (178 loc) · 5.69 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 lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Fast & Dirty Template</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"/>
<link rel="stylesheet" href="css/application.css"/>
</head>
<body class="op" id="www_dominio_com">
<h3 id="section-sample-1">Sample #1. #single-bubble-button</h3>
<p>Easiest sample, simple show / hide element binding link with #ID and content layer with another <b>unique #ID</b></p>
<span class="single-bubble" id="single-bubble-button-a"><a href="#">Simple bubble on-click</a>
<div class="single-bubble-content" id="single-bubble-content-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, beatae. Tempore autem, eveniet nulla voluptate culpa commodi magni!</p>
</div>
</span>
<span class="single-bubble" id="single-bubble-button-b"><a href="#">Simple bubble on-click, timeout 10s</a>
<div class="single-bubble-content" id="single-bubble-content-b">
<p><b>Waits 10s then closes.</b><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, beatae. Tempore autem, eveniet nulla voluptate culpa commodi magni!</p>
</div>
</span>
<span id="close-both-bubbles">Force close both bubles!</span>
<hr>
<h3 id="section-sample-2">Sample #2</h3>
<p>Tipical UL > LI menu. The submenu options are show toggling a class on the submenu UL itself...</p>
<ul id="sample-menu-2">
<li class="has-children">
<a href="#">option 2A</a>
<ul class="is-children">
<li><a href="#">option 2A.1</a></li>
<li><a href="#">option 2A.2</a></li>
<li><a href="#">option 2A.3</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">option 2B</a>
<ul class="is-children">
<li><a href="#">option 2B.1</a></li>
<li><a href="#">option 2B.2</a></li>
<li><a href="#">option 2B.3</a></li>
<li><a href="#">option 2B.3</a></li>
</ul>
</li>
<li class="has-children">
<a href="">option 2C</a>
<ul class="is-children">
<li><a href="#">option 2C.1</a></li>
<li><a href="#">option 2C.2</a></li>
</ul>
</li>
<li>
<a href="#">option 2D (has no submenu)</a>
</li>
</ul>
<br>
<hr>
<h3 id="section-sample-3">Sample #3</h3>
<p>Another common scenario we show / hide the submenu <b>toggling a class in the LI parent of the submenu.</b><br>So fade-in / fade-out is pure CSS using transition.</p>
<ul id="sample-menu-3">
<li>
<a href="#">option 3A</a>
<ul>
<li><a href="#">option 3A.1</a></li>
<li><a href="#">option 3A.2</a></li>
<li><a href="#">option 3A.3</a></li>
</ul>
</li>
<li>
<a href="#">option 3B</a>
<ul>
<li><a href="#">option 3B.1</a></li>
<li><a href="#">option 3B.2</a></li>
<li><a href="#">option 3B.3</a></li>
<li><a href="#">option 3B.3</a></li>
</ul>
</li>
<li>
<a href="#">option 3C (has no submenu)</a>
</li>
<li>
<a href="#">option 3D</a>
<ul>
<li><a href="#">option 3D.1</a></li>
<li><a href="#">option 3D.2</a></li>
</ul>
</li>
</ul>
<br>
<hr>
<h3 id="section-sample-4">Sample #4. Megadrop</h3>
<p>Another common scenario, several megadrops, outside the nav container</p>
<ul id="sample-4-megadrop">
<li>
<a href="#option-4a">option 4A</a>
</li>
<li>
<a href="#option-4b">option 4B</a>
</li>
<li>
<a href="#option-4c">option 4C</a>
</li>
<li class="exclude">
<a href="#option-4d">option 4D (has no megadrop)</a>
</li>
</ul>
<div class="megadrop-wrapper-4">
<div id="md-option-4a" class="megadrop">
<ul>
<li><a href="#">option 4A.1</a></li>
<li><a href="#">option 4A.2</a></li>
<li><a href="#">option 4A.3</a></li>
</ul>
</div>
<div id="md-option-4b" class="megadrop">
<ul>
<li><a href="#">option 4B.1</a></li>
<li><a href="#">option 4B.2</a></li>
<li><a href="#">option 4B.3</a></li>
<li><a href="#">option 4B.3</a></li>
</ul>
</div>
<div id="md-option-4c" class="megadrop">
<ul>
<li><a href="#">option 4C.1</a></li>
<li><a href="#">option 4C.2</a></li>
</ul>
</div>
</div>
<br>
<hr>
<h3 id="section-sample-4">Sample #5. Megadrop slide-down</h3>
<p>Another common scenario, several megadrops, outside the nav container slided-down / up with jQuery</p>
<ul id="sample-5-megadrop">
<li>
<a href="#option-5a">option 5A</a>
</li>
<li>
<a href="#option-5b">option 5B</a>
</li>
<li>
<a href="#option-5c">option 5C</a>
</li>
<li class="exclude">
<a href="#option-5d">option 5D (has no megadrop)</a>
</li>
</ul>
<div class="megadrop-wrapper-5">
<div id="md-option-5a" class="megadrop">
<ul>
<li><a href="#">option 5A.1</a></li>
<li><a href="#">option 5A.2</a></li>
<li><a href="#">option 5A.3</a></li>
</ul>
</div>
<div id="md-option-5b" class="megadrop">
<ul>
<li><a href="#">option 5B.1</a></li>
<li><a href="#">option 5B.2</a></li>
<li><a href="#">option 5B.3</a></li>
<li><a href="#">option 5B.3</a></li>
</ul>
</div>
<div id="md-option-5c" class="megadrop">
<ul>
<li><a href="#">option 5C.1</a></li>
<li><a href="#">option 5C.2</a></li>
</ul>
</div>
</div>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>
<script src="js/jquery.autohide.js"></script>
<script src="js/ready.js"></script>
</body>
</html>