HTML
xxxxxxxxxx1
2
<!-- Navbar 1 -->3
<nav class="navbar fixed-top navbar-expand-lg navbar-light scrolling-navbar white">4
5
<div class="container">6
7
<div class="btn-group">8
<a href="#" class="button-collapse" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">9
<i class="fas fa-bars" style="font-size:28px"></i>10
</a>11
<div class="dropdown-menu">12
<a class="dropdown-item" href="#">Action</a>13
<a class="dropdown-item" href="#">Another action</a>14
<a class="dropdown-item" href="#">Something else here</a>15
<div class="dropdown-divider"></div>16
<a class="dropdown-item" href="#">Separated link</a>17
</div>18
</div>19
20
<!-- SideNav slide-out button -->21
<a class="navbar-brand font-weight-bold" href="#">22
23
<strong>SHOP</strong>24
25
</a>26
27
28
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"29
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">30
31
<span class="navbar-toggler-icon"></span>32
33
</button>34
35
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">36
37
<ul class="navbar-nav ml-auto">38
39
<li class="nav-item">40
41
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" href="#">42
43
<i class="fas fa-envelope blue-text"></i> Contact44
45
<span class="sr-only">(current)</span>46
47
</a>48
49
</li>50
51
<li class="nav-item ml-3">52
53
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" href="#">54
55
<i class="fas fa-cog blue-text"></i> Settings</a>56
57
</li>58
59
<li class="nav-item dropdown ml-3">60
61
<a class="nav-link dropdown-toggle waves-effect waves-light dark-grey-text font-weight-bold"62
id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">63
64
<i class="fas fa-user blue-text"></i> Profile </a>65
66
<div class="dropdown-menu dropdown-menu-right dropdown-cyan" aria-labelledby="navbarDropdownMenuLink-4">67
68
<a class="dropdown-item waves-effect waves-light" href="#">My account</a>69
70
<a class="dropdown-item waves-effect waves-light" href="#">Log out</a>71
72
</div>73
74
</li>75
76
</ul>77
78
</div>79
80
</div>81
82
</nav>83
<!-- Navbar -->84
85
<!-- Navbar -->86
<nav class="navbar navbar-expand-lg navbar-dark primary-color mb-5">87
88
<div class="container">89
90
<!-- Navbar brand -->91
<a class="font-weight-bold white-text mr-4" href="#">Categories</a>92
93
<!-- Collapse button -->94
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"95
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">96
97
<span class="navbar-toggler-icon"></span>98
99
</button>100
101
<!-- Collapsible content -->102
<div class="collapse navbar-collapse" id="navbarSupportedContent1">103
104
<!-- Links -->105
<ul class="navbar-nav mr-auto">106
107
<li class="nav-item dropdown mega-dropdown active">108
109
<a class="nav-link dropdown-toggle no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown"110
aria-haspopup="true" aria-expanded="false">Laptop</a>111
112
<div class="dropdown-menu mega-menu v-2 row z-depth-1 white" aria-labelledby="navbarDropdownMenuLink1">113
114
<div class="row mx-md-4 mx-1">115
116
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">117
118
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Brand</h6>119
120
<ul class="caret-style pl-0">121
122
<li class="">123
124
<a class="menu-item mb-0" href="">Sony</a>125
126
</li>127
128
<li class="">129
130
<a class="menu-item" href="">Lenovo</a>131
132
</li>133
134
<li class="">135
136
<a class="menu-item" href="">Apple</a>137
138
</li>139
140
<li class="">141
142
<a class="menu-item" href="">Dell</a>143
144
</li>145
146
<li class="">147
148
<a class="menu-item" href="">Asus</a>149
150
</li>151
152
</ul>153
154
</div>155
156
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">157
158
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Sales</h6>159
160
<ul class="caret-style pl-0">161
162
<li class="">163
164
<a class="menu-item" href="">Laptops Up to 50% Off </a>165
166
</li>167
168
<li class="">169
170
<a class="menu-item" href="">Laptops under $399</a>171
172
</li>173
174
<li class="">175
176
<a class="menu-item" href="">Laptops Up to 50% Off</a>177
178
</li>179
180
<li class="">181
182
<a class="menu-item" href="">Laptops for designers</a>183
184
</li>185
186
<li class="">187
188
<a class="menu-item" href="">Laptops for developers</a>189
190
</li>191
192
</ul>193
194
</div>195
196
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">197
198
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Processor Type</h6>199
200
<ul class="caret-style pl-0">201
202
<li class="">203
204
<a class="menu-item" href="">Intel Core i5 4th Gen.</a>205
206
</li>207
208
<li class="">209
210
<a class="menu-item" href="">Intel Core i5 5th Gen.</a>211
212
</li>213
214
<li class="">215
216
<a class="menu-item" href="">Intel Core i5 3th Gen.</a>217
218
</li>219
220
<li class="">221
222
<a class="menu-item" href="">Intel Core i5 6th Gen.</a>223
224
</li>225
226
<li class="">227
228
<a class="menu-item" href="">Intel Core i5 7th Gen.</a>229
230
</li>231
232
</ul>233
234
</div>235
236
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">237
238
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Customers opinions</h6>239
240
<ul class="caret-style pl-0">241
242
<li class="">243
244
<a class="menu-item" href="">Totam rem aperiam eaque</a>245
246
</li>247
248
<li class="">249
250
<a class="menu-item" href="">Beatae vitae dicta sun</a>251
252
</li>253
254
<li class="">255
256
<a class="menu-item" href="">Quae ab illo inventore</a>257
258
</li>259
260
<li class="">261
262
<a class="menu-item" href="">Nemo enim ipsam</a>263
264
</li>265
266
<li class="">267
268
<a class="menu-item" href="">Neque porro quisquam est</a>269
270
</li>271
272
</ul>273
274
</div>275
276
</div>277
278
</div>279
280
</li>281
282
<li class="nav-item dropdown mega-dropdown">283
284
<a class="nav-link dropdown-toggle no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown"285
aria-haspopup="true" aria-expanded="false">Cameras</a>286
287
<div class="dropdown-menu mega-menu v-2 row z-depth-1 white" aria-labelledby="navbarDropdownMenuLink1">288
289
<div class="row mx-md-4 mx-1">290
291
<div class="col-md-12 col-lg-4 sub-menu my-lg-5 mt-5 mb-4">292
293
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Featured</h6>294
295
<!-- Featured image -->296
<div class="view overlay mb-3 z-depth-1">297
298
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/9.jpg"299
class="img-fluid" alt="First sample image">300
301
<div class="mask flex-center rgba-white-slight">302
303
<p></p>304
305
</div>306
307
</div>308
309
<h4 class="mb-2">310
311
<a class="news-title-2 pl-0" href="">Lorem ipsum dolor sit</a>312
313
</h4>314
315
</div>316
317
<div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">318
319
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Brands</h6>320
321
<ul class="caret-style pl-0">322
323
<li class="">324
325
<a class="menu-item" href="">Canon</a>326
327
</li>328
329
<li class="">330
331
<a class="menu-item" href="">Nikon</a>332
333
</li>334
335
<li class="">336
337
<a class="menu-item" href="">Sony</a>338
339
</li>340
341
<li class="">342
343
<a class="menu-item" href="">GoPro</a>344
345
</li>346
347
<li class="">348
349
<a class="menu-item" href="">Samsung</a>350
351
</li>352
353
</ul>354
355
</div>356
357
<div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">358
359
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Accesories</h6>360
361
<ul class="caret-style pl-0">362
363
<li class="">364
365
<a class="menu-item" href="">Excepteur sint</a>366
367
</li>368
369
<li class="">370
371
<a class="menu-item" href="">Sunt in culpa</a>372
373
</li>374
375
<li class="">376
377
<a class="menu-item" href="">Sed ut perspiciatis</a>378
379
</li>380
381
<li class="">382
383
<a class="menu-item" href="">Mollit anim id est</a>384
385
</li>386
387
<li class="">388
389
<a class="menu-item" href="">Accusantium doloremque</a>390
391
</li>392
393
</ul>394
395
</div>396
397
</div>398
399
</div>400
401
</li>402
403
<li class="nav-item dropdown mega-dropdown">404
405
<a class="nav-link dropdown-toggle no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown"406
aria-haspopup="true" aria-expanded="false">Accesories</a>407
408
<div class="dropdown-menu mega-menu v-2 row z-depth-1 white" aria-labelledby="navbarDropdownMenuLink1">409
410
<div class="row mx-md-4 mx-1">411
412
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">413
414
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Featured</h6>415
416
<ul class="caret-style pl-0">417
418
<li class="">419
420
<a class="menu-item mb-0" href="">Mouse</a>421
422
</li>423
424
<li class="">425
426
<a class="menu-item" href="">Printer</a>427
428
</li>429
430
<li class="">431
432
<a class="menu-item" href="">Laptop bags</a>433
434
</li>435
436
<li class="">437
438
<a class="menu-item" href="">Software</a>439
440
</li>441
442
<li class="">443
444
<a class="menu-item" href="">Headphones</a>445
446
</li>447
448
</ul>449
450
</div>451
452
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">453
454
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Related</h6>455
456
<!-- Featured image -->457
<div class="view overlay mb-3 z-depth-1">458
459
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg"460
class="img-fluid" alt="First sample image">461
462
<div class="mask flex-center rgba-white-slight">463
464
<p></p>465
466
</div>467
468
</div>469
470
<h4 class="mb-2">471
472
<a class="news-title-2 pl-0" href="">Lorem ipsum dolor sit</a>473
474
</h4>475
476
<p class="font-small text-uppercase dark-grey-text">477
478
<i class="far fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 /479
480
<i class="far fa-comments px-1" aria-hidden="true"></i> 20</p>481
482
</div>483
484
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">485
486
<h6 class="sub-title text-uppercase font-weight-bold blue-text">Bestseller</h6>487
488
<!-- Featured image -->489
<div class="view overlay mb-3 z-depth-1">490
491
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/6.jpg"492
class="img-fluid" alt="First sample image">493
494
<div class="mask flex-center rgba-white-slight">495
496
<p></p>497
498
</div>499
500
</div>501
502
<h4 class="mb-2">503
504
<a class="news-title-2 pl-0" href="">Ut labore et dolore magna</a>505
506
</h4>507
508
<p class="font-small text-uppercase dark-grey-text">509
510
<i class="far fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 /511
512
<i class="far fa-comments px-1" aria-hidden="true"></i> 25</p>513
514
</div>515
516
<div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">517
518
<h6 class="sub-title text-uppercase font-weight-bold blue-text">519
520
Customers opinion</h6>521
522
<ul class="caret-style pl-0">523
524
<li class="">525
526
<a class="menu-item" href="">Totam rem aperiam eaque</a>527
528
</li>529
530
<li class="">531
532
<a class="menu-item" href="">Beatae vitae dicta sun</a>533
534
</li>535
536
<li class="">537
538
<a class="menu-item" href="">Quae ab illo inventore</a>539
540
</li>541
542
<li class="">543
544
<a class="menu-item" href="">Nemo enim ipsam</a>545
546
</li>547
548
<li class="">549
550
<a class="menu-item" href="">Neque porro quisquam est</a>551
552
</li>553
554
</ul>555
556
</div>557
558
</div>559
560
</div>561
562
</li>563
564
</ul>565
566
<!-- Links -->567
<form class="search-form" role="search">568
569
<div class="form-group md-form my-0 waves-light">570
571
<input type="text" class="form-control" placeholder="Search">572
573
</div>574
575
</form>576
577
</div>578
<!-- Collapsible content -->579
580
</div>581
582
</nav>583
<!-- Navbar -->584
585
CSS
1
1
JS
1
1
Console errors: 0