-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMegaMenu.html
222 lines (175 loc) · 8.3 KB
/
MegaMenu.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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<link href="libs/Semantic/semantic.css" rel="stylesheet" />
<link href="app/layout.min.css" rel="stylesheet" />
<header>
<div id="logo">LOLOGO</div>
<div id="settings">
<div id="username">I am User.</div>
<div class="ui icon buttons basic small teal" id="TopMenuButtons">
<div class="ui button">
<i class="user large icon white"></i>
</div>
<div class="ui popup basic">
<div class="ui vertical menu teal inverted">
<a class="item">
<i class="refresh icon"></i> Reload Profile & Menu
</a>
<a class="item">
<i class="protect icon"></i>
Change Password
<p>
there is a bit of text here
</p>
</a>
<!--<a class="item">
<i class="sign in icon"></i>
Switch Profile
</a>-->
</div>
</div>
<div class="ui icon button" data-content="Sign out" data-variation="basic">
<i class="sign out large icon white"></i>
</div>
</div>
</div>
</header>
<div id="topBar">
<div class="right">
<div class="ui breadcrumb small" id="breadcrumbs">
<a class="section orange">Dolor sit.</a>
<i class="right chevron icon divider"></i>
<a class="section">Vel faucibus id, aliquet</a>
<i class="right chevron icon divider"></i>
<div class="active section">m suscipit nullam nec</div>
</div>
</div>
<div class="ui button" id="MegaMenuTrigger">Go to page</div>
<div class="ui fluid popup" id="megaMenu">
<div class="ui divided grid">
<div class="four wide column" id="mmLeftColumn">
<div class="ui fluid vertical menu blue pointing">
<a href="#" class="item ">Dolor sit.</a>
<a href="#" class="item">Amet, consectetur.</a>
<a href="#" class="item">Adipiscing elit.</a>
<a href="#" class="item">Fusce vel.</a>
<a href="#" class="item">Sapien elit.</a>
<a href="#" class="item">In malesuada.</a>
<a href="#" class="item">Semper mi.</a>
</div>
</div>
<div class="twelve wide column" id="mmRightColumn">
<div class="ui menu vertical" id="cardContainer">
<div class="item" style="width: 100%; height: 100%; max-width: none;">
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
</div>
</div>
</div>
</div>
</div>
<div class="ui search dropdown button" id="NearbyPages">
<i class="search icon"></i>
<div class="default text">Nearby pages</div>
<div class="menu">
<!-- div.item*20>lorem5-->
<div class="item">Consectetur adipiscing elit fusce vel.</div>
<div class="item">Sapien elit in malesuada semper.</div>
<div class="item">Mi, id sollicitudin urna fermentum.</div>
<div class="item">Ut fusce varius nisl ac.</div>
<div class="item">Ipsum gravida vel pretium tellus.</div>
<div class="item">Tincidunt integer eu augue augue.</div>
<div class="item">Nunc elit dolor, luctus placerat.</div>
<div class="item">Scelerisque euismod, iaculis eu lacus.</div>
<div class="item">Nunc mi elit, vehicula ut.</div>
<div class="item">Laoreet ac, aliquam sit amet.</div>
<div class="item">Justo nunc tempor, metus vel.</div>
<div class="item">Placerat suscipit, orci nisl iaculis.</div>
<div class="item">Eros, a tincidunt nisi odio.</div>
<div class="item">Eget lorem nulla condimentum tempor.</div>
<div class="item">Mattis ut vitae feugiat augue.</div>
<div class="item">Cras ut metus a risus.</div>
<div class="item">Iaculis scelerisque eu ac ante.</div>
<div class="item">Fusce non varius purus aenean.</div>
<div class="item">Nec magna felis fusce vestibulum.</div>
<div class="item">Velit mollis odio sollicitudin lacinia.</div>
</div>
</div>
<style>
#topBar {
position: absolute;
width: 100%;
background-color: #5696bc;
height: 40px;
top: 40px;
padding: 0 10px;
}
#topBar #MegaMenuTrigger {
left: 0;
height: 40px;
width: 120px;
position: absolute;
border-radius: 0;
}
#topBar #NearbyPages {
left: 140px;
height: 40px;
width: 200px;
position: absolute;
border-radius: 0;
text-align: left;
padding-left: 35px;
text-indent: -15px;
}
#breadcrumbs, #breadcrumbs a, #breadcrumbs .divider {
color: whitesmoke;
}
#breadcrumbs {
float: right;
line-height: 40px;
padding-right: 10px;
}
#megaMenu {
font-family: myriad-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#mmRightColumn .ui.menu a.item:not(:hover) {
color: rgba(0,0,0,.8) !important;
}
#mmRightColumn .ui.menu a.item:hover {
color: rgba(0,0,0,1);
}
#cardContainer > .item {
max-width: 250px;
/* apply only when more than 7 2nd tier items?
or are 5 or more 2nd tier items with an average of 30 items?
apply custom max-widths by process ids?
we can controll process orders! :} (able to get short first if want)
*/
}
</style>
<div id="content">
<p>
<h3>Comments:</h3>
Need to decide what to do for long catalog items : eg(100s) & many second tier items (horizontal scroll is not fun)*
Easy enough to hide left menu on click if desired for space
Nearby pages pulls nearby third tier items if on a third tier page
<h3>TODO:</h3>
Correct Formatting, Integrate
Recent pages? dropdown with last N?
</div>
<script src="libs/Jquery/jquery-2.1.3.js"></script>
<script src="libs/Semantic/semantic.js"></script>
<script src="libs/Jquery/Plugins/menuAim.js"></script>
<!-- Content Generation Libs -->
<script src="libs/Jquery/Plugins/uniqueId.js"></script>
<script src="libs/Jquery/Plugins/zenCoding.js"></script>
<script src="libs/lorem-ipsum.js/generator.js"></script>
<script src="js/cardGenerator.js"></script>
<!-- Init -->
<script src="app/layout.js"></script>
</body>
</html>
<!-- Color Theme : http://www.colorcombos.com/color-schemes/6343/ColorCombo6343.html -->