xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Jumbotron -->4
<div class="card red py-2" id="intro">5
6
<!-- Content -->7
<div class="card-body text-white">8
9
<h5 class="mb-4 font-weight-bold">10
This example is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5.11
</h5>12
<p class="mb-n2">13
Find detailed documentation and more examples here:14
<a target="_blank" href="https://mdbootstrap.com/docs/standard/navigation/navbar/" class="mb-3 mx-2 btn btn-sm btn-outline-white">Go to Docs v515
</a>16
</p>17
18
</div>19
<!-- Content -->20
21
</div>22
<!-- Jumbotron --> 23
24
<hr class="my-5">25
26
<div class="container">27
<h1 class="mb-5">First option</h1>28
<ul style="list-style-type:none">29
<li>30
<a href="#" type="button" id="dropdown" data-toggle="dropdown"class="dropdown multi-level-dropdown"31
aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a>32
<ul style = "list-style-type:none"class="dropdown-menu mt-2 rounded-0 white border-0 z-depth-1">33
<li class="dropdown-item dropdown-submenu p-0">34
<a href="#" data-toggle="dropdown" class="dropdown-toggle dropdown-item w-100">Click Me! </a>35
<ul class="dropdown-menu rounded-0 white border-0 z-depth-1">36
<li class="dropdown-item p-0">37
<a href="#" class="dropdown-item w-100">Hey</a>38
</li>39
<li class="dropdown-item p-0">40
<a href="#" class="dropdown-item w-100">Hi</a>41
</li>42
<li class="dropdown-item p-0">43
<a href="#" class="dropdown-item w-100">Hello</a>44
</li>45
</ul>46
</li>47
<li class="dropdown-item dropdown-submenu p-0">48
<a href="#" data-toggle="dropdown" class="dropdown-toggle dropdown-item w-100">Click Me Too! </a>49
<ul class="dropdown-menu mr-2 rounded-0 white border-0 z-depth-1 r-100">50
<li class="dropdown-item p-0">51
<a href="#" class="dropdown-item w-100">How</a>52
</li>53
<li class="dropdown-item p-0">54
<a href="#" class="dropdown-item w-100">are</a>55
</li>56
<li class="dropdown-item dropdown-submenu p-0">57
<a href="#" data-toggle="dropdown" class="dropdown-toggle dropdown-item w-100">Click Me Too! </a>58
<ul style = "list-style-type:none"class="dropdown-menu mr-2 rounded-0 white border-0 z-depth-1 r-100 ">59
<li class="dropdown-item p-0">60
<a href="#" class="dropdown-item w-100">How</a>61
</li>62
<li class="dropdown-item p-0">63
<a href="#" class="dropdown-item w-100">are</a>64
</li>65
</ul>66
</li>67
</ul>68
</li>69
</ul>70
</li>71
</ul>72
<hr class="my-5">73
74
<h1 class="mb-5">Second Option</h1>75
<!--Navbar-->76
<nav class="navbar navbar-expand-lg navbar-dark primary-color">77
<!-- Navbar brand -->78
<a class="navbar-brand" href="#">Navbar</a>79
<!-- Collapse button -->80
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"81
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">82
<span class="navbar-toggler-icon"></span>83
</button>84
<!-- Collapsible content -->85
<div class="collapse navbar-collapse" id="basicExampleNav">86
<!-- Links -->87
<ul class="navbar-nav mr-auto">88
<li class="nav-item active">89
<a class="nav-link" href="#">Home90
<span class="sr-only">(current)</span>91
</a>92
</li>93
<li class="nav-item">94
<a class="nav-link" href="#">Features</a>95
</li>96
<li class="nav-item">97
<a class="nav-link" href="#">Pricing</a>98
</li>99
<!-- Dropdown -->100
<li class="nav-item dropdown multi-level-dropdown">101
<a href="#" id="menu" data-toggle="dropdown" class="nav-link dropdown-toggle w-100">Dropdown</a>102
<ul class="dropdown-menu mt-2 rounded-0 primary-color border-0 z-depth-1">103
<li class="dropdown-item dropdown-submenu p-0">104
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me Too! </a>105
<ul class="dropdown-menu ml-2 rounded-0 primary-color border-0 z-depth-1">106
<li class="dropdown-item p-0">107
<a href="#" class="text-white w-100">Hey</a>108
</li>109
<li class="dropdown-item p-0">110
<a href="#" class="text-white w-100">Hi</a>111
</li>112
<li class="dropdown-item dropdown-submenu p-0">113
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Hello </a>114
<ul class="dropdown-menu mr-2 rounded-0 primary-color border-0 z-depth-1 r-100 ">115
<li class="dropdown-item p-0">116
<a href="#" class="text-white w-100">Some</a>117
</li>118
<li class="dropdown-item p-0">119
<a href="#" class="text-white w-100">Text</a>120
</li>121
</ul>122
</li>123
</ul>124
</li>125
<li class="dropdown-item dropdown-submenu">126
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click me </a>127
<ul class="dropdown-menu mr-2 rounded-0 primary-color border-0 z-depth-1 r-100 ">128
<li class="dropdown-item p-0">129
<a href="#" class="text-white w-100">How</a>130
</li>131
<li class="dropdown-item p-0">132
<a href="#" class="text-white w-100">are</a>133
</li>134
<li class="dropdown-item p-0">135
<a href="#" class="text-white w-100">you </a>136
</li>137
</ul>138
</li>139
</ul>140
</li>141
</ul>142
<!-- Links -->143
<form class="form-inline">144
<div class="md-form my-0">145
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">146
</div>147
</form>148
</div>149
<!-- Collapsible content -->150
</nav>151
152
<!--/.Navbar-->153
<hr class="my-5">154
155
156
<h1 class="mb-5">Third option</h1>157
<!-- Navbar -->158
<nav class="navbar navbar-expand-lg navbar-dark pink darken-4">159
160
<!-- Navbar brand -->161
<a class="navbar-brand text-uppercase" href="#">Navbar</a>162
163
<!-- Collapse button -->164
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"165
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">166
<span class="navbar-toggler-icon"></span>167
</button>168
169
<!-- Collapsible content -->170
<div class="collapse navbar-collapse" id="navbarSupportedContent2">171
172
<!-- Links -->173
<ul class="navbar-nav mr-auto">174
175
<!-- Features -->176
<li class="nav-item dropdown mega-dropdown active">177
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"178
aria-haspopup="true" aria-expanded="false">Features179
<span class="sr-only">(current)</span>180
</a>181
<div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"182
aria-labelledby="navbarDropdownMenuLink2">183
<div class="row">184
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">185
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>186
<ul class="list-unstyled">187
<li>188
<a class="menu-item pl-0" href="#!">189
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet190
</a>191
</li>192
<li>193
<a class="menu-item pl-0" href="#!">194
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit195
</a>196
</li>197
<li>198
<a class="menu-item pl-0" href="#!">199
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt200
</a>201
</li>202
<li>203
<a class="menu-item pl-0" href="#!">204
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna205
</a>206
</li>207
<li>208
<a class="menu-item pl-0" href="#!">209
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam210
</a>211
</li>212
</ul>213
</div>214
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">215
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>216
<ul class="list-unstyled">217
<li>218
<a class="menu-item pl-0" href="#!">219
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation220
</a>221
</li>222
<li>223
<a class="menu-item pl-0" href="#!">224
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in225
</a>226
</li>227
<li>228
<a class="menu-item pl-0" href="#!">229
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat230
</a>231
</li>232
<li>233
<a class="menu-item pl-0" href="#!">234
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate235
</a>236
</li>237
<li>238
<a class="menu-item pl-0" href="#!">239
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur240
</a>241
</li>242
</ul>243
</div>244
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">245
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>246
<ul class="list-unstyled">247
<li>248
<a class="menu-item pl-0" href="#!">249
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat250
</a>251
</li>252
<li>253
<a class="menu-item pl-0" href="#!">254
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia255
</a>256
</li>257
<li>258
<a class="menu-item pl-0" href="#!">259
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error260
</a>261
</li>262
<li>263
<a class="menu-item pl-0" href="#!">264
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum265
</a>266
</li>267
<li>268
<a class="menu-item pl-0" href="#!">269
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium270
</a>271
</li>272
</ul>273
</div>274
<div class="col-md-6 col-xl-3 sub-menu mb-0">275
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>276
<ul class="list-unstyled">277
<li>278
<a class="menu-item pl-0" href="#!">279
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque280
</a>281
</li>282
<li>283
<a class="menu-item pl-0" href="#!">284
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun285
</a>286
</li>287
<li>288
<a class="menu-item pl-0" href="#!">289
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi290
architecto291
</a>292
</li>293
<li>294
<a class="menu-item pl-0" href="#!">295
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem296
</a>297
</li>298
<li>299
<a class="menu-item pl-0" href="#!">300
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est301
</a>302
</li>303
</ul>304
</div>305
</div>306
</div>307
</li>308
<!-- Technology -->309
<li class="nav-item dropdown mega-dropdown">310
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"311
aria-haspopup="true" aria-expanded="false">Technology</a>312
<div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"313
aria-labelledby="navbarDropdownMenuLink3">314
<div class="row">315
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">316
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>317
<!--Featured image-->318
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">319
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg"320
class="img-fluid" alt="First sample image">321
<div class="mask rgba-white-slight"></div>322
</a>323
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>324
<p class="font-small text-uppercase white-text">325
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i326
class="far fa-comments px-1" aria-hidden="true"></i> 20327
</p>328
</div>329
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">330
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>331
<ul class="list-unstyled">332
<li>333
<a class="menu-item pl-0" href="#!">334
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation335
</a>336
</li>337
<li>338
<a class="menu-item pl-0" href="#!">339
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in340
</a>341
</li>342
<li>343
<a class="menu-item pl-0" href="#!">344
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat345
</a>346
</li>347
<li>348
<a class="menu-item pl-0" href="#!">349
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate350
</a>351
</li>352
<li>353
<a class="menu-item pl-0" href="#!">354
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur355
</a>356
</li>357
</ul>358
</div>359
<div class="col-md-6 col-xl-4 sub-menu mb-0">360
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>361
<ul class="list-unstyled">362
<li>363
<a class="menu-item pl-0" href="#!">364
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat365
</a>366
</li>367
<li>368
<a class="menu-item pl-0" href="#!">369
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia370
</a>371
</li>372
<li>373
<a class="menu-item pl-0" href="#!">374
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error375
</a>376
</li>377
<li>378
<a class="menu-item pl-0" href="#!">379
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum380
</a>381
</li>382
<li>383
<a class="menu-item pl-0" href="#!">384
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium385
</a>386
</li>387
</ul>388
</div>389
</div>390
</div>391
</li>392
<!-- Lifestyle -->393
<li class="nav-item dropdown mega-dropdown">394
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"395
aria-haspopup="true" aria-expanded="false">Lifestyle</a>396
<div class="dropdown-menu mega-menu v-2 z-depth-1 pink darken-4 py-5 px-3"397
aria-labelledby="navbarDropdownMenuLink4">398
<div class="row">399
<div class="col-md-6 col-xl-3 sub-menu mb-4">400
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>401
<ul class="list-unstyled">402
<li>403
<a class="menu-item pl-0" href="#!">404
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet405
</a>406
</li>407
<li>408
<a class="menu-item pl-0" href="#!">409
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit410
</a>411
</li>412
<li>413
<a class="menu-item pl-0" href="#!">414
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt415
</a>416
</li>417
<li>418
<a class="menu-item pl-0" href="#!">419
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna420
</a>421
</li>422
<li>423
<a class="menu-item pl-0" href="#!">424
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam425
</a>426
</li>427
</ul>428
</div>429
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">430
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>431
<!--Featured image-->432
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">433
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg"434
class="img-fluid" alt="First sample image">435
<div class="mask rgba-white-slight"></div>436
</a>437
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>438
<p class="font-small text-uppercase white-text">439
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i440
class="far fa-comments px-1" aria-hidden="true"></i> 20441
</p>442
</div>443
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">444
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>445
<!--Featured image-->446
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">447
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg"448
class="img-fluid" alt="First sample image">449
<div class="mask rgba-white-slight"></div>450
</a>451
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>452
<p class="font-small text-uppercase white-text">453
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i454
class="far fa-comments px-1" aria-hidden="true"></i> 25455
</p>456
</div>457
<div class="col-md-6 col-xl-3 sub-menu mb-0">458
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>459
<ul class="list-unstyled">460
<li>461
<a class="menu-item pl-0" href="#!">462
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque463
</a>464
</li>465
<li>466
<a class="menu-item pl-0" href="#!">467
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun468
</a>469
</li>470
<li>471
<a class="menu-item pl-0" href="#!">472
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi473
architecto474
</a>475
</li>476
<li>477
<a class="menu-item pl-0" href="#!">478
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem479
</a>480
</li>481
<li>482
<a class="menu-item pl-0" href="#!">483
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est484
</a>485
</li>486
</ul>487
</div>488
</div>489
</div>490
</li>491
<!-- Multi-level dropdown -->492
<li class="nav-item dropdown multi-level-dropdown">493
<a href="#" id="menu" data-toggle="dropdown" class="nav-link dropdown-toggle white-text " 494
>DROPDOWN</a>495
<ul class="dropdown-menu mt-2 rounded-0 pink darken-4 border-0 z-depth-1">496
<li class="dropdown-item dropdown-submenu p-0">497
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click Me Too! </a>498
<ul class="dropdown-menu ml-1 rounded-0 pink darken-4 border-0 z-depth-1">499
<li class="dropdown-item p-0">500
<a href="#" class="text-white w-100">Hey</a>501
</li>502
<li class="dropdown-item p-0">503
<a href="#" class="text-white w-100">Hi</a>504
</li>505
<li class="dropdown-item dropdown-submenu p-0">506
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Hello </a>507
<ul class="dropdown-menu ml-1 rounded-0 pink darken-4 border-0 z-depth-1 r-100 ">508
<li class="dropdown-item p-0">509
<a href="#" class="text-white w-100">Some</a>510
</li>511
<li class="dropdown-item p-0">512
<a href="#" class="text-white w-100">Text</a>513
</li>514
</ul>515
</ul>516
</li>517
<li class="dropdown-item dropdown-submenu p-0">518
<a href="#" data-toggle="dropdown" class="dropdown-toggle text-white w-100">Click me </a>519
<ul class="dropdown-menu ml-1 rounded-0 pink darken-4 border-0 z-depth-1 r-100 ">520
<li class="dropdown-item p-0">521
<a href="#" class="text-white w-100">How</a>522
</li>523
<li class="dropdown-item p-0">524
<a href="#" class="text-white w-100">are</a>525
</li>526
<li class="dropdown-item p-0">527
<a href="#" class="text-white w-100">you </a>528
</li>529
</ul>530
</li>531
</ul>532
</li>533
534
</ul>535
536
<!-- Search form -->537
<form class="form-inline">538
<div class="md-form my-0">539
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">540
</div>541
</form>542
543
</div>544
<!-- Collapsible content -->545
546
</nav>547
<!-- Navbar -->548
549
</div> 550
551
552
553
554
555
556
557
xxxxxxxxxx1
.dropdown-submenu {2
position: relative;3
}4
5
.dropdown-submenu>.dropdown-menu {6
top: 0;7
left: 100%;8
margin-top: -6px;9
margin-left: 1px;10
-webkit-border-radius: 0 6px 6px 6px;11
-moz-border-radius: 0 6px 6px;12
border-radius: 0 6px 6px 6px;13
}14
15
.dropdown-submenu:hover>.dropdown-menu {16
display: block;17
}18
19
.dropdown-submenu>a:after {20
display: block;21
content: " ";22
float: right;23
width: 0;24
height: 0;25
border-color: transparent;26
border-style: solid;27
border-width: 5px 0 5px 5px;28
border-left-color: #ccc;29
margin-top: 5px;30
margin-right: -10px;31
}32
33
.dropdown-submenu:hover>a:after {34
border-left-color: #fff;35
}36
37
.dropdown-submenu.pull-left {38
float: none;39
}40
41
.dropdown-submenu.pull-left>.dropdown-menu {42
left: 100%;43
margin-left: 10px;44
-webkit-border-radius: 6px 0 6px 6px;45
-moz-border-radius: 6px 0 6px 6px;46
border-radius: 6px 0 6px 6px;47
}48
xxxxxxxxxx1
2
$('.multi-level-dropdown .dropdown-submenu > a').on("mouseenter", function(e) {3
var submenu = $(this);4
$('.multi-level-dropdown .dropdown-submenu .dropdown-menu').removeClass('show');5
submenu.next('.dropdown-menu').addClass('show');6
e.stopPropagation();7
});8
9
$('.multi-level-dropdown .dropdown').on("hidden.bs.dropdown", function() {10
// hide any open menus when parent closes11
$('.multi-level-dropdown .dropdown-menu.show').removeClass('show');12
}); Console errors: 0