Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
<!DOCTYPE html>
2
<!-- 
3
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.2
4
Version: 3.2.0
5
Author: KeenThemes
6
Website: http://www.keenthemes.com/
7
Contact: support@keenthemes.com
8
Follow: www.twitter.com/keenthemes
9
Like: www.facebook.com/keenthemes
10
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
11
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
12
-->
13
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
14
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
15
<!--[if !IE]><!-->
16
<html lang="en">
17
<!--<![endif]-->
18
<!-- BEGIN HEAD -->
19
<head>
20
<meta charset="utf-8"/>
21
<title>Metronic | Click vs. Hover Dropdowns</title>
22
<meta http-equiv="X-UA-Compatible" content="IE=edge">
23
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
24
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
25
<meta content="" name="description"/>
26
<meta content="" name="author"/>
27
<!-- BEGIN GLOBAL MANDATORY STYLES -->
28
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
29
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
30
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
31
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
32
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
33
<!-- END GLOBAL MANDATORY STYLES -->
34
<!-- BEGIN THEME STYLES -->
35
<link href="../../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
36
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
37
<link href="../../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
38
<link href="../../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
39
<link href="../../assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
40
<!-- END THEME STYLES -->
41
<link rel="shortcut icon" href="favicon.ico"/>
42
</head>
43
<!-- END HEAD -->
44
<!-- BEGIN BODY -->
45
<!-- DOC: Apply "page-header-menu-fixed" class to set the mega menu fixed  -->
46
<!-- DOC: Apply "page-header-top-fixed" class to set the top menu fixed  -->
47
<body>
48
<!-- BEGIN HEADER -->
49
<div class="page-header">
50
        <!-- BEGIN HEADER TOP -->
51
        <div class="page-header-top">
52
                <div class="container">
53
                        <!-- BEGIN LOGO -->
54
                        <div class="page-logo">
55
                                <a href="index.html"><img src="../../assets/admin/layout3/img/logo-default.png" alt="logo" class="logo-default"></a>
56
                        </div>
57
                        <!-- END LOGO -->
58
                        <!-- BEGIN RESPONSIVE MENU TOGGLER -->
59
                        <a href="javascript:;" class="menu-toggler"></a>
60
                        <!-- END RESPONSIVE MENU TOGGLER -->
61
                        <!-- BEGIN TOP NAVIGATION MENU -->
62
                        <div class="top-menu">
63
                                <ul class="nav navbar-nav pull-right">
64
                                        <!-- BEGIN NOTIFICATION DROPDOWN -->
65
                                        <li class="dropdown dropdown-extended dropdown-dark dropdown-notification" id="header_notification_bar">
66
                                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
67
                                                <i class="icon-bell"></i>
68
                                                <span class="badge badge-default">7</span>
69
                                                </a>
70
                                                <ul class="dropdown-menu">
71
                                                        <li class="external">
72
                                                                <h3>You have <strong>12 pending</strong> tasks</h3>
73
                                                                <a href="javascript:;">view all</a>
74
                                                        </li>
75
                                                        <li>
76
                                                                <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
77
                                                                        <li>
78
                                                                                <a href="javascript:;">
79
                                                                                <span class="time">just now</span>
80
                                                                                <span class="details">
81
                                                                                <span class="label label-sm label-icon label-success">
82
                                                                                <i class="fa fa-plus"></i>
83
                                                                                </span>
84
                                                                                New user registered. </span>
85
                                                                                </a>
86
                                                                        </li>
87
                                                                        <li>
88
                                                                                <a href="javascript:;">
89
                                                                                <span class="time">3 mins</span>
90
                                                                                <span class="details">
91
                                                                                <span class="label label-sm label-icon label-danger">
92
                                                                                <i class="fa fa-bolt"></i>
93
                                                                                </span>
94
                                                                                Server #12 overloaded. </span>
95
                                                                                </a>
96
                                                                        </li>
97
                                                                        <li>
98
                                                                                <a href="javascript:;">
99
                                                                                <span class="time">10 mins</span>
100
                                                                                <span class="details">
101
                                                                                <span class="label label-sm label-icon label-warning">
102
                                                                                <i class="fa fa-bell-o"></i>
103
                                                                                </span>
104
                                                                                Server #2 not responding. </span>
105
                                                                                </a>
106
                                                                        </li>
107
                                                                        <li>
108
                                                                                <a href="javascript:;">
109
                                                                                <span class="time">14 hrs</span>
110
                                                                                <span class="details">
111
                                                                                <span class="label label-sm label-icon label-info">
112
                                                                                <i class="fa fa-bullhorn"></i>
113
                                                                                </span>
114
                                                                                Application error. </span>
115
                                                                                </a>
116
                                                                        </li>
117
                                                                        <li>
118
                                                                                <a href="javascript:;">
119
                                                                                <span class="time">2 days</span>
120
                                                                                <span class="details">
121
                                                                                <span class="label label-sm label-icon label-danger">
122
                                                                                <i class="fa fa-bolt"></i>
123
                                                                                </span>
124
                                                                                Database overloaded 68%. </span>
125
                                                                                </a>
126
                                                                        </li>
127
                                                                        <li>
128
                                                                                <a href="javascript:;">
129
                                                                                <span class="time">3 days</span>
130
                                                                                <span class="details">
131
                                                                                <span class="label label-sm label-icon label-danger">
132
                                                                                <i class="fa fa-bolt"></i>
133
                                                                                </span>
134
                                                                                A user IP blocked. </span>
135
                                                                                </a>
136
                                                                        </li>
137
                                                                        <li>
138
                                                                                <a href="javascript:;">
139
                                                                                <span class="time">4 days</span>
140
                                                                                <span class="details">
141
                                                                                <span class="label label-sm label-icon label-warning">
142
                                                                                <i class="fa fa-bell-o"></i>
143
                                                                                </span>
144
                                                                                Storage Server #4 not responding dfdfdfd. </span>
145
                                                                                </a>
146
                                                                        </li>
147
                                                                        <li>
148
                                                                                <a href="javascript:;">
149
                                                                                <span class="time">5 days</span>
150
                                                                                <span class="details">
151
                                                                                <span class="label label-sm label-icon label-info">
152
                                                                                <i class="fa fa-bullhorn"></i>
153
                                                                                </span>
154
                                                                                System Error. </span>
155
                                                                                </a>
156
                                                                        </li>
157
                                                                        <li>
158
                                                                                <a href="javascript:;">
159
                                                                                <span class="time">9 days</span>
160
                                                                                <span class="details">
161
                                                                                <span class="label label-sm label-icon label-danger">
162
                                                                                <i class="fa fa-bolt"></i>
163
                                                                                </span>
164
                                                                                Storage server failed. </span>
165
                                                                                </a>
166
                                                                        </li>
167
                                                                </ul>
168
                                                        </li>
169
                                                </ul>
170
                                        </li>
171
                                        <!-- END NOTIFICATION DROPDOWN -->
172
                                        <!-- BEGIN TODO DROPDOWN -->
173
                                        <li class="dropdown dropdown-extended dropdown-dark dropdown-tasks" id="header_task_bar">
174
                                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
175
                                                <i class="icon-calendar"></i>
176
                                                <span class="badge badge-default">3</span>
177
                                                </a>
178
                                                <ul class="dropdown-menu extended tasks">
179
                                                        <li class="external">
180
                                                                <h3>You have <strong>12 pending</strong> tasks</h3>
181
                                                                <a href="javascript:;">view all</a>
182
                                                        </li>
183
                                                        <li>
184
                                                                <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
185
                                                                        <li>
186
                                                                                <a href="javascript:;">
187
                                                                                <span class="task">
188
                                                                                <span class="desc">New release v1.2 </span>
189
                                                                                <span class="percent">30%</span>
190
                                                                                </span>
191
                                                                                <span class="progress">
192
                                                                                <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></span>
193
                                                                                </span>
194
                                                                                </a>
195
                                                                        </li>
196
                                                                        <li>
197
                                                                                <a href="javascript:;">
198
                                                                                <span class="task">
199
                                                                                <span class="desc">Application deployment</span>
200
                                                                                <span class="percent">65%</span>
201
                                                                                </span>
202
                                                                                <span class="progress">
203
                                                                                <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">65% Complete</span></span>
204
                                                                                </span>
205
                                                                                </a>
206
                                                                        </li>
207
                                                                        <li>
208
                                                                                <a href="javascript:;">
209
                                                                                <span class="task">
210
                                                                                <span class="desc">Mobile app release</span>
211
                                                                                <span class="percent">98%</span>
212
                                                                                </span>
213
                                                                                <span class="progress">
214
                                                                                <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">98% Complete</span></span>
215
                                                                                </span>
216
                                                                                </a>
217
                                                                        </li>
218
                                                                        <li>
219
                                                                                <a href="javascript:;">
220
                                                                                <span class="task">
221
                                                                                <span class="desc">Database migration</span>
222
                                                                                <span class="percent">10%</span>
223
                                                                                </span>
224
                                                                                <span class="progress">
225
                                                                                <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">10% Complete</span></span>
226
                                                                                </span>
227
                                                                                </a>
228
                                                                        </li>
229
                                                                        <li>
230
                                                                                <a href="javascript:;">
231
                                                                                <span class="task">
232
                                                                                <span class="desc">Web server upgrade</span>
233
                                                                                <span class="percent">58%</span>
234
                                                                                </span>
235
                                                                                <span class="progress">
236
                                                                                <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">58% Complete</span></span>
237
                                                                                </span>
238
                                                                                </a>
239
                                                                        </li>
240
                                                                        <li>
241
                                                                                <a href="javascript:;">
242
                                                                                <span class="task">
243
                                                                                <span class="desc">Mobile development</span>
244
                                                                                <span class="percent">85%</span>
245
                                                                                </span>
246
                                                                                <span class="progress">
247
                                                                                <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">85% Complete</span></span>
248
                                                                                </span>
249
                                                                                </a>
250
                                                                        </li>
251
                                                                        <li>
252
                                                                                <a href="javascript:;">
253
                                                                                <span class="task">
254
                                                                                <span class="desc">New UI release</span>
255
                                                                                <span class="percent">38%</span>
256
                                                                                </span>
257
                                                                                <span class="progress progress-striped">
258
                                                                                <span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">38% Complete</span></span>
259
                                                                                </span>
260
                                                                                </a>
261
                                                                        </li>
262
                                                                </ul>
263
                                                        </li>
264
                                                </ul>
265
                                        </li>
266
                                        <!-- END TODO DROPDOWN -->
267
                                        <li class="droddown dropdown-separator">
268
                                                <span class="separator"></span>
269
                                        </li>
270
                                        <!-- BEGIN INBOX DROPDOWN -->
271
                                        <li class="dropdown dropdown-extended dropdown-dark dropdown-inbox" id="header_inbox_bar">
272
                                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
273
                                                <span class="circle">3</span>
274
                                                <span class="corner"></span>
275
                                                </a>
276
                                                <ul class="dropdown-menu">
277
                                                        <li class="external">
278
                                                                <h3>You have <strong>7 New</strong> Messages</h3>
279
                                                                <a href="javascript:;">view all</a>
280
                                                        </li>
281
                                                        <li>
282
                                                                <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
283
                                                                        <li>
284
                                                                                <a href="inbox.html?a=view">
285
                                                                                <span class="photo">
286
                                                                                <img src="../../assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt="">
287
                                                                                </span>
288
                                                                                <span class="subject">
289
                                                                                <span class="from">
290
                                                                                Lisa Wong </span>
291
                                                                                <span class="time">Just Now </span>
292
                                                                                </span>
293
                                                                                <span class="message">
294
                                                                                Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... </span>
295
                                                                                </a>
296
                                                                        </li>
297
                                                                        <li>
298
                                                                                <a href="inbox.html?a=view">
299
                                                                                <span class="photo">
300
                                                                                <img src="../../assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt="">
301
                                                                                </span>
302
                                                                                <span class="subject">
303
                                                                                <span class="from">
304
                                                                                Richard Doe </span>
305
                                                                                <span class="time">16 mins </span>
306
                                                                                </span>
307
                                                                                <span class="message">
308
                                                                                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
309
                                                                                </a>
310
                                                                        </li>
311
                                                                        <li>
312
                                                                                <a href="inbox.html?a=view">
313
                                                                                <span class="photo">
314
                                                                                <img src="../../assets/admin/layout3/img/avatar1.jpg" class="img-circle" alt="">
315
                                                                                </span>
316
                                                                                <span class="subject">
317
                                                                                <span class="from">
318
                                                                                Bob Nilson </span>
319
                                                                                <span class="time">2 hrs </span>
320
                                                                                </span>
321
                                                                                <span class="message">
322
                                                                                Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
323
                                                                                </a>
324
                                                                        </li>
325
                                                                        <li>
326
                                                                                <a href="inbox.html?a=view">
327
                                                                                <span class="photo">
328
                                                                                <img src="../../assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt="">
329
                                                                                </span>
330
                                                                                <span class="subject">
331
                                                                                <span class="from">
332
                                                                                Lisa Wong </span>
333
                                                                                <span class="time">40 mins </span>
334
                                                                                </span>
335
                                                                                <span class="message">
336
                                                                                Vivamus sed auctor 40% nibh congue nibh... </span>
337
                                                                                </a>
338
                                                                        </li>
339
                                                                        <li>
340
                                                                                <a href="inbox.html?a=view">
341
                                                                                <span class="photo">
342
                                                                                <img src="../../assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt="">
343
                                                                                </span>
344
                                                                                <span class="subject">
345
                                                                                <span class="from">
346
                                                                                Richard Doe </span>
347
                                                                                <span class="time">46 mins </span>
348
                                                                                </span>
349
                                                                                <span class="message">
350
                                                                                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
351
                                                                                </a>
352
                                                                        </li>
353
                                                                </ul>
354
                                                        </li>
355
                                                </ul>
356
                                        </li>
357
                                        <!-- END INBOX DROPDOWN -->
358
                                        <!-- BEGIN USER LOGIN DROPDOWN -->
359
                                        <li class="dropdown dropdown-user dropdown-dark">
360
                                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
361
                                                <img alt="" class="img-circle" src="../../assets/admin/layout3/img/avatar9.jpg">
362
                                                <span class="username username-hide-mobile">Nick</span>
363
                                                </a>
364
                                                <ul class="dropdown-menu dropdown-menu-default">
365
                                                        <li>
366
                                                                <a href="extra_profile.html">
367
                                                                <i class="icon-user"></i> My Profile </a>
368
                                                        </li>
369
                                                        <li>
370
                                                                <a href="page_calendar.html">
371
                                                                <i class="icon-calendar"></i> My Calendar </a>
372
                                                        </li>
373
                                                        <li>
374
                                                                <a href="inbox.html">
375
                                                                <i class="icon-envelope-open"></i> My Inbox <span class="badge badge-danger">
376
                                                                3 </span>
377
                                                                </a>
378
                                                        </li>
379
                                                        <li>
380
                                                                <a href="javascript:;">
381
                                                                <i class="icon-rocket"></i> My Tasks <span class="badge badge-success">
382
                                                                7 </span>
383
                                                                </a>
384
                                                        </li>
385
                                                        <li class="divider">
386
                                                        </li>
387
                                                        <li>
388
                                                                <a href="extra_lock.html">
389
                                                                <i class="icon-lock"></i> Lock Screen </a>
390
                                                        </li>
391
                                                        <li>
392
                                                                <a href="login.html">
393
                                                                <i class="icon-key"></i> Log Out </a>
394
                                                        </li>
395
                                                </ul>
396
                                        </li>
397
                                        <!-- END USER LOGIN DROPDOWN -->
398
                                </ul>
399
                        </div>
400
                        <!-- END TOP NAVIGATION MENU -->
401
                </div>
402
        </div>
403
        <!-- END HEADER TOP -->
404
        <!-- BEGIN HEADER MENU -->
405
        <div class="page-header-menu">
406
                <div class="container">
407
                        <!-- BEGIN HEADER SEARCH BOX -->
408
                        <form class="search-form" action="extra_search.html" method="GET">
409
                                <div class="input-group">
410
                                        <input type="text" class="form-control" placeholder="Search" name="query">
411
                                        <span class="input-group-btn">
412
                                        <a href="javascript:;" class="btn submit"><i class="icon-magnifier"></i></a>
413
                                        </span>
414
                                </div>
415
                        </form>
416
                        <!-- END HEADER SEARCH BOX -->
417
                        <!-- BEGIN MEGA MENU -->
418
                        <!-- DOC: Apply "hor-menu-light" class after the "hor-menu" class below to have a horizontal menu with white background -->
419
                        <!-- DOC: Remove data-hover="dropdown" and data-close-others="true" attributes below to disable the dropdown opening on mouse hover -->
420
                        <div class="hor-menu ">
421
                                <ul class="nav navbar-nav">
422
                                        <li>
423
                                                <a href="index.html">Dashboard</a>
424
                                        </li>
425
                                        <li class="menu-dropdown mega-menu-dropdown active">
426
                                                <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle">
427
                                                Features <i class="fa fa-angle-down"></i>
428
                                                </a>
429
                                                <ul class="dropdown-menu" style="min-width: 710px">
430
                                                        <li>
431
                                                                <div class="mega-menu-content">
432
                                                                        <div class="row">
433
                                                                                <div class="col-md-4">
434
                                                                                        <ul class="mega-menu-submenu">
435
                                                                                                <li>
436
                                                                                                        <h3>eCommerce</h3>
437
                                                                                                </li>
438
                                                                                                <li>
439
                                                                                                        <a href="ecommerce_index.html" class="iconify">
440
                                                                                                        <i class="icon-home"></i>
441
                                                                                                        Dashboard </a>
442
                                                                                                </li>
443
                                                                                                <li>
444
                                                                                                        <a href="ecommerce_orders.html" class="iconify">
445
                                                                                                        <i class="icon-basket"></i>
446
                                                                                                        Manage Orders </a>
447
                                                                                                </li>
448
                                                                                                <li>
449
                                                                                                        <a href="ecommerce_orders_view.html" class="iconify">
450
                                                                                                        <i class="icon-tag"></i>
451
                                                                                                        Order View </a>
452
                                                                                                </li>
453
                                                                                                <li>
454
                                                                                                        <a href="ecommerce_products.html" class="iconify">
455
                                                                                                        <i class="icon-handbag"></i>
456
                                                                                                        Manage Products </a>
457
                                                                                                </li>
458
                                                                                                <li>
459
                                                                                                        <a href="ecommerce_products_edit.html" class="iconify">
460
                                                                                                        <i class="icon-pencil"></i>
461
                                                                                                        Product Edit </a>
462
                                                                                                </li>
463
                                                                                        </ul>
464
                                                                                </div>
465
                                                                                <div class="col-md-4">
466
                                                                                        <ul class="mega-menu-submenu">
467
                                                                                                <li>
468
                                                                                                        <h3>Layouts</h3>
469
                                                                                                </li>
470
                                                                                                <li>
471
                                                                                                        <a href="layout_fluid.html" class="iconify">
472
                                                                                                        <i class="icon-cursor-move"></i>
473
                                                                                                        Fluid Layout </a>
474
                                                                                                </li>
475
                                                                                                <li>
476
                                                                                                        <a href="layout_mega_menu_fixed.html" class="iconify">
477
                                                                                                        <i class="icon-pin"></i>
478
                                                                                                        Fixed Mega Menu </a>
479
                                                                                                </li>
480
                                                                                                <li>
481
                                                                                                        <a href="layout_top_bar_fixed.html" class="iconify">
482
                                                                                                        <i class="icon-bar-chart"></i>
483
                                                                                                        Fixed Top Bar </a>
484
                                                                                                </li>
485
                                                                                                <li>
486
                                                                                                        <a href="layout_light_header.html" class="iconify">
487
                                                                                                        <i class="icon-paper-plane"></i>
488
                                                                                                        Light Header Dropdowns </a>
489
                                                                                                </li>
490
                                                                                                <li>
491
                                                                                                        <a href="layout_blank_page.html" class="iconify">
492
                                                                                                        <i class="icon-doc"></i>
493
                                                                                                        Blank Page </a>
494
                                                                                                </li>
495
                                                                                        </ul>
496
                                                                                </div>
497
                                                                                <div class="col-md-4">
498
                                                                                        <ul class="mega-menu-submenu">
499
                                                                                                <li>
500
                                                                                                        <h3>More Layouts</h3>
501
                                                                                                </li>
502
                                                                                                <li class="active">
503
                                                                                                        <a href="layout_click_dropdowns.html" class="iconify">
504
                                                                                                        <i class="icon-speech"></i>
505
                                                                                                        Click vs. Hover Dropdowns </a>
506
                                                                                                </li>
507
                                                                                                <li>
508
                                                                                                        <a href="layout_fontawesome_icons.html" class="iconify">
509
                                                                                                        <i class="icon-link"></i>
510
                                                                                                        Layout with Fontawesome </a>
511
                                                                                                </li>
512
                                                                                                <li>
513
                                                                                                        <a href="layout_glyphicons.html" class="iconify">
514
                                                                                                        <i class="icon-settings"></i>
515
                                                                                                        Layout with Glyphicon </a>
516
                                                                                                </li>
517
                                                                                                <li>
518
                                                                                                        <a href="layout_language_bar.html" class="iconify">
519
                                                                                                        <i class="icon-globe"></i>
520
                                                                                                        Language Switch Bar </a>
521
                                                                                                </li>
522
                                                                                                <li>
523
                                                                                                        <a href="layout_disabled_menu.html" class="iconify">
524
                                                                                                        <i class=" icon-lock"></i>
525
                                                                                                        Disabled Menu Links </a>
526
                                                                                                </li>
527
                                                                                        </ul>
528
                                                                                </div>
529
                                                                        </div>
530
                                                                </div>
531
                                                        </li>
532
                                                </ul>
533
                                        </li>
534
                                        <li class="menu-dropdown mega-menu-dropdown mega-menu-full ">
535
                                                <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle">
536
                                                UI Components <i class="fa fa-angle-down"></i>
537
                                                </a>
538
                                                <ul class="dropdown-menu">
539
                                                        <li>
540
                                                                <div class="mega-menu-content">
541
                                                                        <div class="row">
542
                                                                                <div class="col-md-3">
543
                                                                                        <ul class="mega-menu-submenu">
544
                                                                                                <li>
545
                                                                                                        <h3>UI Components</h3>
546
                                                                                                </li>
547
                                                                                                <li>
548
                                                                                                        <a href="ui_general.html">
549
                                                                                                        <i class="fa fa-angle-right"></i>
550
                                                                                                        General </a>
551
                                                                                                </li>
552
                                                                                                <li>
553
                                                                                                        <a href="ui_buttons.html">
554
                                                                                                        <i class="fa fa-angle-right"></i>
555
                                                                                                        Buttons </a>
556
                                                                                                </li>
557
                                                                                                <li>
558
                                                                                                        <a href="ui_confirmations.html">
559
                                                                                                        <i class="fa fa-angle-right"></i>
560
                                                                                                        Popover Confirmations </a>
561
                                                                                                </li>
562
                                                                                                <li>
563
                                                                                                        <a href="ui_icons.html">
564
                                                                                                        <i class="fa fa-angle-right"></i>
565
                                                                                                        Font Icons </a>
566
                                                                                                </li>
567
                                                                                                <li>
568
                                                                                                        <a href="ui_colors.html">
569
                                                                                                        <i class="fa fa-angle-right"></i>
570
                                                                                                        Flat UI Colors </a>
571
                                                                                                </li>
572
                                                                                                <li>
573
                                                                                                        <a href="ui_typography.html">
574
                                                                                                        <i class="fa fa-angle-right"></i>
575
                                                                                                        Typography </a>
576
                                                                                                </li>
577
                                                                                                <li>
578
                                                                                                        <a href="ui_tabs_accordions_navs.html">
579
                                                                                                        <i class="fa fa-angle-right"></i>
580
                                                                                                        Tabs, Accordions & Navs </a>
581
                                                                                                </li>
582
                                                                                                <li>
583
                                                                                                        <a href="ui_tree.html">
584
                                                                                                        <i class="fa fa-angle-right"></i>
585
                                                                                                        Tree View </a>
586
                                                                                                </li>
587
                                                                                                <li>
588
                                                                                                        <a href="ui_page_progress_style_1.html">
589
                                                                                                        <i class="fa fa-angle-right"></i>
590
                                                                                                        Page Progress Bar <span class="badge badge-roundless badge-warning">new</span></a>
591
                                                                                                </li>
592
                                                                                                <li>
593
                                                                                                        <a href="ui_blockui.html">
594
                                                                                                        <i class="fa fa-angle-right"></i>
595
                                                                                                        Block UI </a>
596
                                                                                                </li>
597
                                                                                                <li>
598
                                                                                                        <a href="ui_notific8.html">
599
                                                                                                        <i class="fa fa-angle-right"></i>
600
                                                                                                        Notific8 Notifications </a>
601
                                                                                                </li>
602
                                                                                        </ul>
603
                                                                                </div>
604
                                                                                <div class="col-md-3">
605
                                                                                        <ul class="mega-menu-submenu">
606
                                                                                                <li>
607
                                                                                                        <h3>More UI Components</h3>
608
                                                                                                </li>
609
                                                                                                <li>
610
                                                                                                        <a href="ui_toastr.html">
611
                                                                                                        <i class="fa fa-angle-right"></i>
612
                                                                                                        Toastr Notifications </a>
613
                                                                                                </li>
614
                                                                                                <li>
615
                                                                                                        <a href="ui_alert_dialog_api.html">
616
                                                                                                        <i class="fa fa-angle-right"></i>
617
                                                                                                        Alerts & Dialogs API <span class="badge badge-roundless badge-danger">new</span></a>
618
                                                                                                </li>
619
                                                                                                <li>
620
                                                                                                        <a href="ui_session_timeout.html">
621
                                                                                                        <i class="fa fa-angle-right"></i>
622
                                                                                                        Session Timeout </a>
623
                                                                                                </li>
624
                                                                                                <li>
625
                                                                                                        <a href="ui_idle_timeout.html">
626
                                                                                                        <i class="fa fa-angle-right"></i>
627
                                                                                                        User Idle Timeout </a>
628
                                                                                                </li>
629
                                                                                                <li>
630
                                                                                                        <a href="ui_modals.html">
631
                                                                                                        <i class="fa fa-angle-right"></i>
632
                                                                                                        Modals </a>
633
                                                                                                </li>
634
                                                                                                <li>
635
                                                                                                        <a href="ui_extended_modals.html">
636
                                                                                                        <i class="fa fa-angle-right"></i>
637
                                                                                                        Extended Modals </a>
638
                                                                                                </li>
639
                                                                                                <li>
640
                                                                                                        <a href="ui_tiles.html">
641
                                                                                                        <i class="fa fa-angle-right"></i>
642
                                                                                                        Tiles </a>
643
                                                                                                </li>
644
                                                                                                <li>
645
                                                                                                        <a href="ui_datepaginator.html">
646
                                                                                                        <i class="fa fa-angle-right"></i>
647
                                                                                                        Date Paginator </a>
648
                                                                                                </li>
649
                                                                                                <li>
650
                                                                                                        <a href="ui_nestable.html">
651
                                                                                                        <i class="fa fa-angle-right"></i>
652
                                                                                                        Nestable List </a>
653
                                                                                                </li>
654
                                                                                        </ul>
655
                                                                                </div>
656
                                                                                <div class="col-md-3">
657
                                                                                        <ul class="mega-menu-submenu">
658
                                                                                                <li>
659
                                                                                                        <h3>Form Stuff</h3>
660
                                                                                                </li>
661
                                                                                                <li>
662
                                                                                                        <a href="form_controls.html">
663
                                                                                                        <i class="fa fa-angle-right"></i>
664
                                                                                                        Form Controls </a>
665
                                                                                                </li>
666
                                                                                                <li>
667
                                                                                                        <a href="form_layouts.html">
668
                                                                                                        <i class="fa fa-angle-right"></i>
669
                                                                                                        Form Layouts </a>
670
                                                                                                </li>
671
                                                                                                <li>
672
                                                                                                        <a href="form_editable.html">
673
                                                                                                        <i class="fa fa-angle-right"></i>
674
                                                                                                        Form X-editable <span class="badge badge-roundless badge-success">new</span></a>
675
                                                                                                </li>
676
                                                                                                <li>
677
                                                                                                        <a href="form_wizard.html">
678
                                                                                                        <i class="fa fa-angle-right"></i>
679
                                                                                                        Form Wizard </a>
680
                                                                                                </li>
681
                                                                                                <li>
682
                                                                                                        <a href="form_validation.html">
683
                                                                                                        <i class="fa fa-angle-right"></i>
684
                                                                                                        Form Validation </a>
685
                                                                                                </li>
686
                                                                                                <li>
687
                                                                                                        <a href="form_image_crop.html">
688
                                                                                                        <i class="fa fa-angle-right"></i>
689
                                                                                                        Image Cropping </a>
690
                                                                                                </li>
691
                                                                                                <li>
692
                                                                                                        <a href="form_fileupload.html">
693
                                                                                                        <i class="fa fa-angle-right"></i>
694
                                                                                                        Multiple File Upload </a>
695
                                                                                                </li>
696
                                                                                                <li>
697
                                                                                                        <a href="form_dropzone.html">
698
                                                                                                        <i class="fa fa-angle-right"></i>
699
                                                                                                        Dropzone File Upload </a>
700
                                                                                                </li>
701
                                                                                        </ul>
702
                                                                                </div>
703
                                                                                <div class="col-md-3">
704
                                                                                        <ul class="mega-menu-submenu">
705
                                                                                                <li>
706
                                                                                                        <h3>Form Components</h3>
707
                                                                                                </li>
708
                                                                                                <li>
709
                                                                                                        <a href="components_pickers.html">
710
                                                                                                        <i class="fa fa-angle-right"></i>
711
                                                                                                        Pickers </a>
712
                                                                                                </li>
713
                                                                                                <li>
714
                                                                                                        <a href="components_dropdowns.html">
715
                                                                                                        <i class="fa fa-angle-right"></i>
716
                                                                                                        Custom Dropdowns </a>
717
                                                                                                </li>
718
                                                                                                <li>
719
                                                                                                        <a href="components_form_tools.html">
720
                                                                                                        <i class="fa fa-angle-right"></i>
721
                                                                                                        Form Tools </a>
722
                                                                                                </li>
723
                                                                                                <li>
724
                                                                                                        <a href="components_editors.html">
725
                                                                                                        <i class="fa fa-angle-right"></i>
726
                                                                                                        Markdown & WYSIWYG Editors </a>
727
                                                                                                </li>
728
                                                                                                <li>
729
                                                                                                        <a href="components_ion_sliders.html">
730
                                                                                                        <i class="fa fa-angle-right"></i>
731
                                                                                                        Ion Range Sliders </a>
732
                                                                                                </li>
733
                                                                                                <li>
734
                                                                                                        <a href="components_noui_sliders.html">
735
                                                                                                        <i class="fa fa-angle-right"></i>
736
                                                                                                        NoUI Range Sliders </a>
737
                                                                                                </li>
738
                                                                                                <li>
739
                                                                                                        <a href="components_jqueryui_sliders.html">
740
                                                                                                        <i class="fa fa-angle-right"></i>
741
                                                                                                        jQuery UI Sliders </a>
742
                                                                                                </li>
743
                                                                                                <li>
744
                                                                                                        <a href="components_knob_dials.html">
745
                                                                                                        <i class="fa fa-angle-right"></i>
746
                                                                                                        Knob Circle Dials </a>
747
                                                                                                </li>
748
                                                                                        </ul>
749
                                                                                </div>
750
                                                                        </div>
751
                                                                </div>
752
                                                        </li>
753
                                                </ul>
754
                                        </li>
755
                                        <li class="menu-dropdown classic-menu-dropdown ">
756
                                                <a data-toggle="dropdown" href="javascript:;">
757
                                                Extra <i class="fa fa-angle-down"></i>
758
                                                </a>
759
                                                <ul class="dropdown-menu pull-left">
760
                                                        <li class=" dropdown-submenu">
761
                                                                <a href="javascript:;">
762
                                                                <i class="icon-briefcase"></i>
763
                                                                Data Tables </a>
764
                                                                <ul class="dropdown-menu">
765
                                                                        <li class=" ">
766
                                                                                <a href="table_basic.html">
767
                                                                                Basic Datatables </a>
768
                                                                        </li>
769
                                                                        <li class=" ">
770
                                                                                <a href="table_responsive.html">
771
                                                                                Responsive Datatables </a>
772
                                                                        </li>
773
                                                                        <li class=" ">
774
                                                                                <a href="table_managed.html">
775
                                                                                Managed Datatables </a>
776
                                                                        </li>
777
                                                                        <li class=" ">
778
                                                                                <a href="table_editable.html">
779
                                                                                Editable Datatables </a>
780
                                                                        </li>
781
                                                                        <li class=" ">
782
                                                                                <a href="table_advanced.html">
783
                                                                                Advanced Datatables </a>
784
                                                                        </li>
785
                                                                        <li class=" ">
786
                                                                                <a href="table_ajax.html">
787
                                                                                Ajax Datatables </a>
788
                                                                        </li>
789
                                                                </ul>
790
                                                        </li>
791
                                                        <li class=" dropdown-submenu">
792
                                                                <a href="javascript:;">
793
                                                                <i class="icon-wallet"></i>
794
                                                                Portlets </a>
795
                                                                <ul class="dropdown-menu">
796
                                                                        <li class=" ">
797
                                                                                <a href="portlet_general.html">
798
                                                                                General Portlets </a>
799
                                                                        </li>
800
                                                                        <li class=" ">
801
                                                                                <a href="portlet_general2.html">
802
                                                                                New Portlets #1 <span class="badge badge-roundless badge-danger">new</span>
803
                                                                                </a>
804
                                                                        </li>
805
                                                                        <li class=" ">
806
                                                                                <a href="portlet_general3.html">
807
                                                                                New Portlets #2 <span class="badge badge-roundless badge-danger">new</span>
808
                                                                                </a>
809
                                                                        </li>
810
                                                                        <li class=" ">
811
                                                                                <a href="portlet_ajax.html">
812
                                                                                Ajax Portlets </a>
813
                                                                        </li>
814
                                                                        <li class=" ">
815
                                                                                <a href="portlet_draggable.html">
816
                                                                                Draggable Portlets </a>
817
                                                                        </li>
818
                                                                </ul>
819
                                                        </li>
820
                                                        <li class=" dropdown-submenu">
821
                                                                <a href="javascript:;">
822
                                                                <i class="icon-pointer"></i>
823
                                                                Maps </a>
824
                                                                <ul class="dropdown-menu">
825
                                                                        <li class=" ">
826
                                                                                <a href="maps_google.html">
827
                                                                                Google Maps </a>
828
                                                                        </li>
829
                                                                        <li class=" ">
830
                                                                                <a href="maps_vector.html">
831
                                                                                Vector Maps </a>
832
                                                                        </li>
833
                                                                </ul>
834
                                                        </li>
835
                                                        <li class=" ">
836
                                                                <a href="charts.html">
837
                                                                <i class="icon-bar-chart"></i>
838
                                                                Visual Charts </a>
839
                                                        </li>
840
                                                        <li class="divider">
841
                                                        </li>
842
                                                        <li class=" dropdown-submenu">
843
                                                                <a href="javascript:;">
844
                                                                <i class="icon-puzzle"></i>
845
                                                                Multi Level </a>
846
                                                                <ul class="dropdown-menu">
847
                                                                        <li class=" ">
848
                                                                                <a href="javascript:;">
849
                                                                                <i class="icon-settings"></i>
850
                                                                                Item 1 </a>
851
                                                                        </li>
852
                                                                        <li class=" ">
853
                                                                                <a href="javascript:;">
854
                                                                                <i class="icon-user"></i>
855
                                                                                Item 2 </a>
856
                                                                        </li>
857
                                                                        <li class=" ">
858
                                                                                <a href="javascript:;">
859
                                                                                <i class="icon-globe"></i>
860
                                                                                Item 3 </a>
861
                                                                        </li>
862
                                                                        <li class=" dropdown-submenu">
863
                                                                                <a href="javascript:;">
864
                                                                                <i class="icon-folder"></i>
865
                                                                                Sub Items </a>
866
                                                                                <ul class="dropdown-menu">
867
                                                                                        <li class=" ">
868
                                                                                                <a href="javascript:;">
869
                                                                                                Item 1 </a>
870
                                                                                        </li>
871
                                                                                        <li class=" ">
872
                                                                                                <a href="javascript:;">
873
                                                                                                Item 2 </a>
874
                                                                                        </li>
875
                                                                                        <li class=" ">
876
                                                                                                <a href="javascript:;">
877
                                                                                                Item 3 </a>
878
                                                                                        </li>
879
                                                                                        <li class=" ">
880
                                                                                                <a href="javascript:;">
881
                                                                                                Item 4 </a>
882
                                                                                        </li>
883
                                                                                </ul>
884
                                                                        </li>
885
                                                                        <li class=" ">
886
                                                                                <a href="javascript:;">
887
                                                                                <i class="icon-share"></i>
888
                                                                                Item 4 </a>
889
                                                                        </li>
890
                                                                        <li class=" ">
891
                                                                                <a href="javascript:;">
892
                                                                                <i class="icon-bar-chart"></i>
893
                                                                                Item 5 </a>
894
                                                                        </li>
895
                                                                </ul>
896
                                                        </li>
897
                                                </ul>
898
                                        </li>
899
                                        <li class="menu-dropdown mega-menu-dropdown mega-menu-full ">
900
                                                <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle">
901
                                                Pages <i class="fa fa-angle-down"></i>
902
                                                </a>
903
                                                <ul class="dropdown-menu">
904
                                                        <li>
905
                                                                <div class="mega-menu-content">
906
                                                                        <div class="row">
907
                                                                                <div class="col-md-3">
908
                                                                                        <ul class="mega-menu-submenu">
909
                                                                                                <li>
910
                                                                                                        <h3>User Pages</h3>
911
                                                                                                </li>
912
                                                                                                <li>
913
                                                                                                        <a href="page_timeline.html">
914
                                                                                                        <i class="fa fa-angle-right"></i>
915
                                                                                                        New Timeline <span class="badge badge-warning">2</span>
916
                                                                                                        </a>
917
                                                                                                </li>
918
                                                                                                <li>
919
                                                                                                        <a href="page_todo.html">
920
                                                                                                        <i class="fa fa-angle-right"></i>
921
                                                                                                        Todo & Tasks <span class="badge badge-danger">4</span></a>
922
                                                                                                </li>
923
                                                                                                <li>
924
                                                                                                        <a href="inbox.html">
925
                                                                                                        <i class="fa fa-angle-right"></i>
926
                                                                                                        User Inbox <span class="badge badge-success">4</span></a>
927
                                                                                                </li>
928
                                                                                                <li>
929
                                                                                                        <a href="page_calendar.html">
930
                                                                                                        <i class="fa fa-angle-right"></i>
931
                                                                                                        User Calendar <span class="badge badge-warning">14</span></a>
932
                                                                                                </li>
933
                                                                                                <li>
934
                                                                                                        <a href="extra_profile.html">
935
                                                                                                        <i class="fa fa-angle-right"></i>
936
                                                                                                        User Profile </a>
937
                                                                                                </li>
938
                                                                                                <li>
939
                                                                                                        <a href="extra_lock.html">
940
                                                                                                        <i class="fa fa-angle-right"></i>
941
                                                                                                        Lock Screen </a>
942
                                                                                                </li>
943
                                                                                                <li>
944
                                                                                                        <a href="login.html">
945
                                                                                                        <i class="fa fa-angle-right"></i>
946
                                                                                                        Login Form 1 </a>
947
                                                                                                </li>
948
                                                                                                <li>
949
                                                                                                        <a href="login_soft.html">
950
                                                                                                        <i class="fa fa-angle-right"></i>
951
                                                                                                        Login Form 2 </a>
952
                                                                                                </li>
953
                                                                                        </ul>
954
                                                                                </div>
955
                                                                                <div class="col-md-3">
956
                                                                                        <ul class="mega-menu-submenu">
957
                                                                                                <li>
958
                                                                                                        <h3>General Pages</h3>
959
                                                                                                </li>
960
                                                                                                <li>
961
                                                                                                        <a href="extra_faq.html">
962
                                                                                                        <i class="fa fa-angle-right"></i>
963
                                                                                                        FAQ Page </a>
964
                                                                                                </li>
965
                                                                                                <li>
966
                                                                                                        <a href="page_portfolio.html">
967
                                                                                                        <i class="fa fa-angle-right"></i>
968
                                                                                                        Portfolio </a>
969
                                                                                                </li>
970
                                                                                                <li>
971
                                                                                                        <a href="page_timeline.html">
972
                                                                                                        <i class="fa fa-angle-right"></i>
973
                                                                                                        Old Timeline <span class="badge badge-info">4</span></a>
974
                                                                                                </li>
975
                                                                                                <li>
976
                                                                                                        <a href="page_coming_soon.html">
977
                                                                                                        <i class="fa fa-angle-right"></i>
978
                                                                                                        Coming Soon </a>
979
                                                                                                </li>
980
                                                                                                <li>
981
                                                                                                        <a href="extra_invoice.html">
982
                                                                                                        <i class="fa fa-angle-right"></i>
983
                                                                                                        Invoice </a>
984
                                                                                                </li>
985
                                                                                                <li>
986
                                                                                                        <a href="page_blog.html">
987
                                                                                                        <i class="fa fa-angle-right"></i>
988
                                                                                                        Blog </a>
989
                                                                                                </li>
990
                                                                                                <li>
991
                                                                                                        <a href="page_blog_item.html">
992
                                                                                                        <i class="fa fa-angle-right"></i>
993
                                                                                                        Blog Post </a>
994
                                                                                                </li>
995
                                                                                        </ul>
996
                                                                                </div>
997
                                                                                <div class="col-md-3">
998
                                                                                        <ul class="mega-menu-submenu">
999
                                                                                                <li>
1000
                                                                                                        <h3>Custom Pages</h3>
1001
                                                                                                </li>
1002
                                                                                                <li>
1003
                                                                                                        <a href="page_news.html">
1004
                                                                                                        <i class="fa fa-angle-right"></i>
1005
                                                                                                        News <span class="badge badge-success">9</span></a>
1006
                                                                                                </li>
1007
                                                                                                <li>
1008
                                                                                                        <a href="page_news_item.html">
1009
                                                                                                        <i class="fa fa-angle-right"></i>
1010
                                                                                                        News View </a>
1011
                                                                                                </li>
1012
                                                                                                <li>
1013
                                                                                                        <a href="page_about.html">
1014
                                                                                                        <i class="fa fa-angle-right"></i>
1015
                                                                                                        About Us </a>
1016
                                                                                                </li>
1017
                                                                                                <li>
1018
                                                                                                        <a href="page_contact.html">
1019
                                                                                                        <i class="fa fa-angle-right"></i>
1020
                                                                                                        Contact Us </a>
1021
                                                                                                </li>
1022
                                                                                                <li>
1023
                                                                                                        <a href="extra_search.html">
1024
                                                                                                        <i class="fa fa-angle-right"></i>
1025
                                                                                                        Search Results </a>
1026
                                                                                                </li>
1027
                                                                                                <li>
1028
                                                                                                        <a href="extra_pricing_table.html">
1029
                                                                                                        <i class="fa fa-angle-right"></i>
1030
                                                                                                        Pricing Tables </a>
1031
                                                                                                </li>
1032
                                                                                        </ul>
1033
                                                                                </div>
1034
                                                                                <div class="col-md-3">
1035
                                                                                        <ul class="mega-menu-submenu">
1036
                                                                                                <li>
1037
                                                                                                        <h3>Miscellaneous</h3>
1038
                                                                                                </li>
1039
                                                                                                <li>
1040
                                                                                                        <a href="extra_404_option1.html">
1041
                                                                                                        <i class="fa fa-angle-right"></i>
1042
                                                                                                        404 Page Option 1 </a>
1043
                                                                                                </li>
1044
                                                                                                <li>
1045
                                                                                                        <a href="extra_404_option2.html">
1046
                                                                                                        <i class="fa fa-angle-right"></i>
1047
                                                                                                        404 Page Option 2 </a>
1048
                                                                                                </li>
1049
                                                                                                <li>
1050
                                                                                                        <a href="extra_404_option3.html">
1051
                                                                                                        <i class="fa fa-angle-right"></i>
1052
                                                                                                        404 Page Option 3 </a>
1053
                                                                                                </li>
1054
                                                                                                <li>
1055
                                                                                                        <a href="extra_500_option1.html">
1056
                                                                                                        <i class="fa fa-angle-right"></i>
1057
                                                                                                        500 Page Option 1 </a>
1058
                                                                                                </li>
1059
                                                                                                <li>
1060
                                                                                                        <a href="extra_500_option2.html">
1061
                                                                                                        <i class="fa fa-angle-right"></i>
1062
                                                                                                        500 Page Option 2 </a>
1063
                                                                                                </li>
1064
                                                                                                <li>
1065
                                                                                                        <a href="email_newsletter.html">
1066
                                                                                                        <i class="fa fa-angle-right"></i>
1067
                                                                                                        Newsletter Email Template </a>
1068
                                                                                                </li>
1069
                                                                                                <li>
1070
                                                                                                        <a href="email_system.html">
1071
                                                                                                        <i class="fa fa-angle-right"></i>
1072
                                                                                                        System Email Template </a>
1073
                                                                                                </li>
1074
                                                                                        </ul>
1075
                                                                                </div>
1076
                                                                        </div>
1077
                                                                </div>
1078
                                                        </li>
1079
                                                </ul>
1080
                                        </li>
1081
                                        <!-- begin: mega menu with custom content -->
1082
                                        <li class="menu-dropdown mega-menu-dropdown mega-menu-full hide">
1083
                                                <a data-toggle="dropdown" href="javascript:;" class="dropdown-toggle">
1084
                                                Mega Menu <i class="fa fa-angle-down"></i>
1085
                                                </a>
1086
                                                <ul class="dropdown-menu">
1087
                                                        <li>
1088
                                                                <div class="mega-menu-content">
1089
                                                                        <div class="row">
1090
                                                                                <div class="col-md-6">
1091
                                                                                        <div id="accordion" class="panel-group">
1092
                                                                                                <div class="panel panel-success">
1093
                                                                                                        <div class="panel-heading">
1094
                                                                                                                <h4 class="panel-title">
1095
                                                                                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
1096
                                                                                                                Mega Menu Info #1 </a>
1097
                                                                                                                </h4>
1098
                                                                                                        </div>
1099
                                                                                                        <div id="collapseOne" class="panel-collapse in">
1100
                                                                                                                <div class="panel-body">
1101
                                                                                                                        <p>
1102
                                                                                                                                 Metronic Mega Menu Works for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements and jquery plugins.
1103
                                                                                                                        </p>
1104
                                                                                                                        <p>
1105
                                                                                                                                 Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula. nisi erat mattis consectetur purus
1106
                                                                                                                        </p>
1107
                                                                                                                </div>
1108
                                                                                                        </div>
1109
                                                                                                </div>
1110
                                                                                                <div class="panel panel-danger">
1111
                                                                                                        <div class="panel-heading">
1112
                                                                                                                <h4 class="panel-title">
1113
                                                                                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
1114
                                                                                                                Mega Menu Info #2 </a>
1115
                                                                                                                </h4>
1116
                                                                                                        </div>
1117
                                                                                                        <div id="collapseTwo" class="panel-collapse collapse">
1118
                                                                                                                <div class="panel-body">
1119
                                                                                                                        <p>
1120
                                                                                                                                 Metronic Mega Menu Works for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements and jquery plugins.
1121
                                                                                                                        </p>
1122
                                                                                                                        <p>
1123
                                                                                                                                 Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula. nisi erat mattis consectetur purus
1124
                                                                                                                        </p>
1125
                                                                                                                </div>
1126
                                                                                                        </div>
1127
                                                                                                </div>
1128
                                                                                                <div class="panel panel-info">
1129
                                                                                                        <div class="panel-heading">
1130
                                                                                                                <h4 class="panel-title">
1131
                                                                                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
1132
                                                                                                                Mega Menu Info #3 </a>
1133
                                                                                                                </h4>
1134
                                                                                                        </div>
1135
                                                                                                        <div id="collapseThree" class="panel-collapse collapse">
1136
                                                                                                                <div class="panel-body">
1137
                                                                                                                        <p>
1138
                                                                                                                                 Metronic Mega Menu Works for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements and jquery plugins.
1139
                                                                                                                        </p>
1140
                                                                                                                        <p>
1141
                                                                                                                                 Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula. nisi erat mattis consectetur purus
1142
                                                                                                                        </p>
1143
                                                                                                                </div>
1144
                                                                                                        </div>
1145
                                                                                                </div>
1146
                                                                                        </div>
1147
                                                                                </div>
1148
                                                                                <div class="col-md-6">
1149
                                                                                        <div class="portlet light">
1150
                                                                                                <div class="portlet-title">
1151
                                                                                                        <div class="caption">
1152
                                                                                                                <i class="fa fa-cogs font-red-sunglo"></i>
1153
                                                                                                                <span class="caption-subject font-red-sunglo bold uppercase">Notes</span>
1154
                                                                                                                <span class="caption-helper">notes samples...</span>
1155
                                                                                                        </div>
1156
                                                                                                        <div class="tools">
1157
                                                                                                                <a href="javascript:;" class="collapse">
1158
                                                                                                                </a>
1159
                                                                                                                <a href="#portlet-config" data-toggle="modal" class="config">
1160
                                                                                                                </a>
1161
                                                                                                                <a href="javascript:;" class="reload">
1162
                                                                                                                </a>
1163
                                                                                                                <a href="javascript:;" class="remove">
1164
                                                                                                                </a>
1165
                                                                                                        </div>
1166
                                                                                                </div>
1167
                                                                                                <div class="portlet-body">
1168
                                                                                                        <div class="note note-success">
1169
                                                                                                                <h4 class="block">Success! Some Header Goes Here</h4>
1170
                                                                                                                <p>
1171
                                                                                                                         Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1172
                                                                                                                </p>
1173
                                                                                                        </div>
1174
                                                                                                </div>
1175
                                                                                        </div>
1176
                                                                                </div>
1177
                                                                        </div>
1178
                                                                </div>
1179
                                                        </li>
1180
                                                </ul>
1181
                                        </li>
1182
                                        <!-- end: mega menu with custom content -->
1183
                                </ul>
1184
                        </div>
1185
                        <!-- END MEGA MENU -->
1186
                </div>
1187
        </div>
1188
        <!-- END HEADER MENU -->
1189
</div>
1190
<!-- END HEADER -->
1191
<!-- BEGIN PAGE CONTAINER -->
1192
<div class="page-container">
1193
        <!-- BEGIN PAGE HEAD -->
1194
        <div class="page-head">
1195
                <div class="container">
1196
                        <!-- BEGIN PAGE TITLE -->
1197
                        <div class="page-title">
1198
                                <h1>Click vs. Hover Dropdowns <small>clickable dropdown samples</small></h1>
1199
                        </div>
1200
                        <!-- END PAGE TITLE -->
1201
                        <!-- BEGIN PAGE TOOLBAR -->
1202
                        <div class="page-toolbar">
1203
                                <!-- BEGIN THEME PANEL -->
1204
                                <div class="btn-group btn-theme-panel">
1205
                                        <a href="javascript:;" class="btn dropdown-toggle" data-toggle="dropdown">
1206
                                        <i class="icon-settings"></i>
1207
                                        </a>
1208
                                        <div class="dropdown-menu theme-panel pull-right dropdown-custom hold-on-click">
1209
                                                <div class="row">
1210
                                                        <div class="col-md-6 col-sm-6 col-xs-12">
1211
                                                                <h3>THEME COLORS</h3>
1212
                                                                <div class="row">
1213
                                                                        <div class="col-md-6 col-sm-6 col-xs-12">
1214
                                                                                <ul class="theme-colors">
1215
                                                                                        <li class="theme-color theme-color-default" data-theme="default">
1216
                                                                                                <span class="theme-color-view"></span>
1217
                                                                                                <span class="theme-color-name">Default</span>
1218
                                                                                        </li>
1219
                                                                                        <li class="theme-color theme-color-blue-hoki" data-theme="blue-hoki">
1220
                                                                                                <span class="theme-color-view"></span>
1221
                                                                                                <span class="theme-color-name">Blue Hoki</span>
1222
                                                                                        </li>
1223
                                                                                        <li class="theme-color theme-color-blue-steel" data-theme="blue-steel">
1224
                                                                                                <span class="theme-color-view"></span>
1225
                                                                                                <span class="theme-color-name">Blue Steel</span>
1226
                                                                                        </li>
1227
                                                                                        <li class="theme-color theme-color-yellow-orange" data-theme="yellow-orange">
1228
                                                                                                <span class="theme-color-view"></span>
1229
                                                                                                <span class="theme-color-name">Orange</span>
1230
                                                                                        </li>
1231
                                                                                        <li class="theme-color theme-color-yellow-crusta" data-theme="yellow-crusta">
1232
                                                                                                <span class="theme-color-view"></span>
1233
                                                                                                <span class="theme-color-name">Yellow Crusta</span>
1234
                                                                                        </li>
1235
                                                                                </ul>
1236
                                                                        </div>
1237
                                                                        <div class="col-md-6 col-sm-6 col-xs-12">
1238
                                                                                <ul class="theme-colors">
1239
                                                                                        <li class="theme-color theme-color-green-haze" data-theme="green-haze">
1240
                                                                                                <span class="theme-color-view"></span>
1241
                                                                                                <span class="theme-color-name">Green Haze</span>
1242
                                                                                        </li>
1243
                                                                                        <li class="theme-color theme-color-red-sunglo" data-theme="red-sunglo">
1244
                                                                                                <span class="theme-color-view"></span>
1245
                                                                                                <span class="theme-color-name">Red Sunglo</span>
1246
                                                                                        </li>
1247
                                                                                        <li class="theme-color theme-color-red-intense" data-theme="red-intense">
1248
                                                                                                <span class="theme-color-view"></span>
1249
                                                                                                <span class="theme-color-name">Red Intense</span>
1250
                                                                                        </li>
1251
                                                                                        <li class="theme-color theme-color-purple-plum" data-theme="purple-plum">
1252
                                                                                                <span class="theme-color-view"></span>
1253
                                                                                                <span class="theme-color-name">Purple Plum</span>
1254
                                                                                        </li>
1255
                                                                                        <li class="theme-color theme-color-purple-studio" data-theme="purple-studio">
1256
                                                                                                <span class="theme-color-view"></span>
1257
                                                                                                <span class="theme-color-name">Purple Studio</span>
1258
                                                                                        </li>
1259
                                                                                </ul>
1260
                                                                        </div>
1261
                                                                </div>
1262
                                                        </div>
1263
                                                        <div class="col-md-6 col-sm-6 col-xs-12 seperator">
1264
                                                                <h3>LAYOUT</h3>
1265
                                                                <ul class="theme-settings">
1266
                                                                        <li>
1267
                                                                                 Theme Style
1268
                                                                                <select class="theme-setting theme-setting-style form-control input-sm input-small input-inline tooltips" data-original-title="Change theme style" data-container="body" data-placement="left">
1269
                                                                                        <option value="boxed" selected="selected">Square corners</option>
1270
                                                                                        <option value="rounded">Rounded corners</option>
1271
                                                                                </select>
1272
                                                                        </li>
1273
                                                                        <li>
1274
                                                                                 Layout
1275
                                                                                <select class="theme-setting theme-setting-layout form-control input-sm input-small input-inline tooltips" data-original-title="Change layout type" data-container="body" data-placement="left">
1276
                                                                                        <option value="boxed" selected="selected">Boxed</option>
1277
                                                                                        <option value="fluid">Fluid</option>
1278
                                                                                </select>
1279
                                                                        </li>
1280
                                                                        <li>
1281
                                                                                 Top Menu Style
1282
                                                                                <select class="theme-setting theme-setting-top-menu-style form-control input-sm input-small input-inline tooltips" data-original-title="Change top menu dropdowns style" data-container="body" data-placement="left">
1283
                                                                                        <option value="dark" selected="selected">Dark</option>
1284
                                                                                        <option value="light">Light</option>
1285
                                                                                </select>
1286
                                                                        </li>
1287
                                                                        <li>
1288
                                                                                 Top Menu Mode
1289
                                                                                <select class="theme-setting theme-setting-top-menu-mode form-control input-sm input-small input-inline tooltips" data-original-title="Enable fixed(sticky) top menu" data-container="body" data-placement="left">
1290
                                                                                        <option value="fixed">Fixed</option>
1291
                                                                                        <option value="not-fixed" selected="selected">Not Fixed</option>
1292
                                                                                </select>
1293
                                                                        </li>
1294
                                                                        <li>
1295
                                                                                 Mega Menu Style
1296
                                                                                <select class="theme-setting theme-setting-mega-menu-style form-control input-sm input-small input-inline tooltips" data-original-title="Change mega menu dropdowns style" data-container="body" data-placement="left">
1297
                                                                                        <option value="dark" selected="selected">Dark</option>
1298
                                                                                        <option value="light">Light</option>
1299
                                                                                </select>
1300
                                                                        </li>
1301
                                                                        <li>
1302
                                                                                 Mega Menu Mode
1303
                                                                                <select class="theme-setting theme-setting-mega-menu-mode form-control input-sm input-small input-inline tooltips" data-original-title="Enable fixed(sticky) mega menu" data-container="body" data-placement="left">
1304
                                                                                        <option value="fixed" selected="selected">Fixed</option>
1305
                                                                                        <option value="not-fixed">Not Fixed</option>
1306
                                                                                </select>
1307
                                                                        </li>
1308
                                                                </ul>
1309
                                                        </div>
1310
                                                </div>
1311
                                        </div>
1312
                                </div>
1313
                                <!-- END THEME PANEL -->
1314
                        </div>
1315
                        <!-- END PAGE TOOLBAR -->
1316
                </div>
1317
        </div>
1318
        <!-- END PAGE HEAD -->
1319
        <!-- BEGIN PAGE CONTENT -->
1320
        <div class="page-content">
1321
                <div class="container">
1322
                        <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
1323
                        <div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1324
                                <div class="modal-dialog">
1325
                                        <div class="modal-content">
1326
                                                <div class="modal-header">
1327
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
1328
                                                        <h4 class="modal-title">Modal title</h4>
1329
                                                </div>
1330
                                                <div class="modal-body">
1331
                                                         Widget settings form goes here
1332
                                                </div>
1333
                                                <div class="modal-footer">
1334
                                                        <button type="button" class="btn blue">Save changes</button>
1335
                                                        <button type="button" class="btn default" data-dismiss="modal">Close</button>
1336
                                                </div>
1337
                                        </div>
1338
                                        <!-- /.modal-content -->
1339
                                </div>
1340
                                <!-- /.modal-dialog -->
1341
                        </div>
1342
                        <!-- /.modal -->
1343
                        <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
1344
                        <!-- BEGIN PAGE BREADCRUMB -->
1345
                        <ul class="page-breadcrumb breadcrumb">
1346
                                <li>
1347
                                        <a href="javascript:;">Home</a><i class="fa fa-circle"></i>
1348
                                </li>
1349
                                <li>
1350
                                        <a href="javascript:;">Features</a><i class="fa fa-circle"></i>
1351
                                </li>
1352
                                <li class="active">
1353
                                         Click vs. Hover Dropdowns
1354
                                </li>
1355
                        </ul>
1356
                        <!-- END PAGE BREADCRUMB -->
1357
                        <!-- BEGIN PAGE CONTENT INNER -->
1358
                        <div class="row">
1359
                                <div class="col-md-12">
1360
                                        <div class="portlet light">
1361
                                                <div class="portlet-body">
1362
                                                        <div class="note note-danger">
1363
                                                                <h4 class="block">Clickable Dropdowns For Top Bar & Mega Menu</h4>
1364
                                                                <p>
1365
                                                                         To disable the hoverable dropdowns and make them clickable just remove <code>data-hover="dropdown"</code> and <code>data-close-others="true"</code> from the top bar dropdown links and <code>data-hover="megamenu-dropdown"</code> and <code>data-close-others="true"</code> from the mega menu dropdown links.
1366
                                                                </p>
1367
                                                        </div>
1368
                                                        <p>
1369
                                                                 Duis mollis, est non commodo luctus, nisi erat mattis nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
1370
                                                        </p>
1371
                                                </div>
1372
                                        </div>
1373
                                </div>
1374
                        </div>
1375
                        <!-- END PAGE CONTENT INNER -->
1376
                </div>
1377
        </div>
1378
        <!-- BEGIN PAGE CONTENT -->
1379
</div>
1380
<!-- BEGIN PRE-FOOTER -->
1381
<div class="page-prefooter">
1382
        <div class="container">
1383
                <div class="row">
1384
                        <div class="col-md-3 col-sm-6 col-xs-12 footer-block">
1385
                                <h2>About</h2>
1386
                                <p>
1387
                                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam dolore.
1388
                                </p>
1389
                        </div>
1390
                        <div class="col-md-3 col-sm-6 col-xs12 footer-block">
1391
                                <h2>Subscribe Email</h2>
1392
                                <div class="subscribe-form">
1393
                                        <form action="javascript:;">
1394
                                                <div class="input-group">
1395
                                                        <input type="text" placeholder="mail@email.com" class="form-control">
1396
                                                        <span class="input-group-btn">
1397
                                                        <button class="btn" type="submit">Submit</button>
1398
                                                        </span>
1399
                                                </div>
1400
                                        </form>
1401
                                </div>
1402
                        </div>
1403
                        <div class="col-md-3 col-sm-6 col-xs-12 footer-block">
1404
                                <h2>Follow Us On</h2>
1405
                                <ul class="social-icons">
1406
                                        <li>
1407
                                                <a href="javascript:;" data-original-title="rss" class="rss"></a>
1408
                                        </li>
1409
                                        <li>
1410
                                                <a href="javascript:;" data-original-title="facebook" class="facebook"></a>
1411
                                        </li>
1412
                                        <li>
1413
                                                <a href="javascript:;" data-original-title="twitter" class="twitter"></a>
1414
                                        </li>
1415
                                        <li>
1416
                                                <a href="javascript:;" data-original-title="googleplus" class="googleplus"></a>
1417
                                        </li>
1418
                                        <li>
1419
                                                <a href="javascript:;" data-original-title="linkedin" class="linkedin"></a>
1420
                                        </li>
1421
                                        <li>
1422
                                                <a href="javascript:;" data-original-title="youtube" class="youtube"></a>
1423
                                        </li>
1424
                                        <li>
1425
                                                <a href="javascript:;" data-original-title="vimeo" class="vimeo"></a>
1426
                                        </li>
1427
                                </ul>
1428
                        </div>
1429
                        <div class="col-md-3 col-sm-6 col-xs-12 footer-block">
1430
                                <h2>Contacts</h2>
1431
                                <address class="margin-bottom-40">
1432
                                Phone: 800 123 3456<br>
1433
                                 Email: <a href="mailto:info@metronic.com">info@metronic.com</a>
1434
                                </address>
1435
                        </div>
1436
                </div>
1437
        </div>
1438
</div>
1439
<!-- END PRE-FOOTER -->
1440
<!-- BEGIN FOOTER -->
1441
<div class="page-footer">
1442
        <div class="container">
1443
                 2014 &copy; Metronic. All Rights Reserved.
1444
        </div>
1445
</div>
1446
<div class="scroll-to-top">
1447
        <i class="icon-arrow-up"></i>
1448
</div>
1449
<!-- END FOOTER -->
1450
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
1451
<!-- BEGIN CORE PLUGINS -->
1452
<!--[if lt IE 9]>
1453
<script src="../../assets/global/plugins/respond.min.js"></script>
1454
<script src="../../assets/global/plugins/excanvas.min.js"></script> 
1455
<![endif]-->
1456
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
1457
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
1458
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
1459
<script src="../../assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
1460
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
1461
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
1462
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
1463
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
1464
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
1465
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
1466
<!-- END CORE PLUGINS -->
1467
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
1468
<script src="../../assets/admin/layout3/scripts/layout.js" type="text/javascript"></script>
1469
<script src="../../assets/admin/layout3/scripts/demo.js" type="text/javascript"></script>
1470
<script>
1471
      jQuery(document).ready(function() {    
1472
        Metronic.init(); // init metronic core components
1473
Layout.init(); // init current layout
1474
Demo.init(); // init demo features
1475
      });
1476
   </script>
1477
<!-- END JAVASCRIPTS -->
1478
</body>
1479
<!-- END BODY -->
1480
</html>