xxxxxxxxxx1
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">2
<div class="container">3
<ul class="navbar-nav">4
<!-- Dropdown -->5
<li class="nav-item dropdown position-static">6
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" data-mdb-auto-close="outside" aria-expanded="false">7
Click me8
</a>9
<ul class="dropdown-menu ms-lg-5 overflow-hidden" aria-labelledby="navbarDropdownMenuLink">10
<div class="container p-4">11
<!-- Tabs navs -->12
<ul class="nav nav-tabs mb-3" id="ex-with-icons" role="tablist">13
<li class="nav-item" role="presentation">14
<a class="nav-link text-primary active" id="ex-with-icons-tab-1" data-mdb-toggle="tab" href="#ex-with-icons-tabs-1" role="tab" aria-controls="ex-with-icons-tabs-1" aria-selected="true"><i class="fas fa-chart-pie fa-fw me-2"></i>Tab 1</a>15
</li>16
<li class="nav-item" role="presentation">17
<a class="nav-link text-primary" id="ex-with-icons-tab-2" data-mdb-toggle="tab" href="#ex-with-icons-tabs-2" role="tab" aria-controls="ex-with-icons-tabs-2" aria-selected="false"><i class="fas fa-chart-line fa-fw me-2"></i>Tab 2</a>18
</li>19
<li class="nav-item" role="presentation">20
<a class="nav-link text-primary lanks" id="ex-with-icons-tab-3" data-mdb-toggle="tab" href="#ex-with-icons-tabs-3" role="tab" aria-controls="ex-with-icons-tabs-3" aria-selected="false"><i class="fas fa-cogs fa-fw me-2"></i>Tab 3</a>21
</li>22
</ul>23
<!-- Tabs navs -->24
25
<!-- Tabs content -->26
<div class="tab-content" id="ex-with-icons-content">27
<div class="tab-pane fade show active" id="ex-with-icons-tabs-1" role="tabpanel" aria-labelledby="ex-with-icons-tab-1">28
<div class="row gx-xl-5">29
<div class="col-md-6 mb-4 mb-md-0">30
<!-- Link -->31
<a href="" class="d-flex align-items-start text-reset mb-3 pe-5 lanks">32
<div class="">33
<i class="fas fa-cubes fa-lg text-primary fa-fw"></i>34
</div>35
<div class="ms-3">36
<p class="fw-bold mb-1 d-flex align-items-center">37
Components38
39
</p>40
41
</div>42
</a>43
44
<!-- Link -->45
<a href="" class="lanks d-flex align-items-start text-reset mb-3 pe-5">46
<div class="">47
<i class="fas fa-layer-group fa-lg text-primary fa-fw"></i>48
</div>49
<div class="ms-3">50
<p class="fw-bold mb-1 d-flex align-items-center">51
Designblocks52
</p>53
54
</div>55
</a>56
57
<!-- Link -->58
<a href="" class="lanks d-flex align-items-start text-reset pe-5">59
<div class="">60
<i class="fas fa-plug fa-lg text-primary fa-fw"></i>61
</div>62
<div class="ms-3">63
<p class="fw-bold mb-1 d-flex align-items-center">64
Plugins65
</p>66
67
</div>68
</a>69
</div>70
71
<div class="col-md-6 mb-4 mb-md-0">72
<!-- Link -->73
<a href="" class="lanks d-flex align-items-start text-reset mb-3">74
<div class="">75
<i class="fas fa-image fa-lg text-primary fa-fw"></i>76
</div>77
<div class="ms-3">78
<p class="fw-bold mb-1 d-flex align-items-center">79
Templates80
</p>81
82
</div>83
</a>84
85
<!-- Link -->86
<a href="" class="lanks d-flex align-items-start text-reset mb-3">87
<div class="">88
<i class="fas fa-puzzle-piece fa-lg text-primary fa-fw"></i>89
</div>90
<div class="ms-3">91
<p class="fw-bold mb-1 d-flex align-items-center">92
Integrations93
</p>94
95
</div>96
</a>97
98
<!-- Link -->99
<a href="" class="lanks d-flex align-items-start text-reset">100
<div class="">101
<i class="fas fa-flask fa-lg text-primary fa-fw"></i>102
</div>103
<div class="ms-3">104
<p class="fw-bold mb-1 d-flex align-items-center">105
LAB106
</p>107
108
</div>109
</a>110
</div>111
</div>112
</div>113
<div class="tab-pane fade" id="ex-with-icons-tabs-2" role="tabpanel" aria-labelledby="ex-with-icons-tab-2">114
<div class="row gx-xl-5">115
<div class="col-md-6 mb-4 mb-md-0">116
<!-- Link -->117
<a href="" class="lanks d-flex align-items-start text-reset mb-3 pe-5">118
<div class="">119
<i class="fas fa-cubes fa-lg text-primary fa-fw"></i>120
</div>121
<div class="ms-3">122
<p class="fw-bold mb-1 d-flex align-items-center">123
Components124
125
</p>126
127
</div>128
</a>129
130
<!-- Link -->131
<a href="" class="lanks d-flex align-items-start text-reset mb-3 pe-5">132
<div class="">133
<i class="fas fa-layer-group fa-lg text-primary fa-fw"></i>134
</div>135
<div class="ms-3">136
<p class="fw-bold mb-1 d-flex align-items-center">137
Designblocks138
</p>139
140
</div>141
</a>142
143
<!-- Link -->144
<a href="" class="lanks d-flex align-items-start text-reset pe-5">145
<div class="">146
<i class="fas fa-plug fa-lg text-primary fa-fw"></i>147
</div>148
<div class="ms-3">149
<p class="fw-bold mb-1 d-flex align-items-center">150
Plugins151
</p>152
153
</div>154
</a>155
</div>156
157
<div class="col-md-6 mb-4 mb-md-0">158
<!-- Link -->159
<a href="" class="lanks d-flex align-items-start text-reset mb-3">160
<div class="">161
<i class="fas fa-image fa-lg text-primary fa-fw"></i>162
</div>163
<div class="ms-3">164
<p class="fw-bold mb-1 d-flex align-items-center">165
Templates166
</p>167
168
</div>169
</a>170
171
<!-- Link -->172
<a href="" class="lanks d-flex align-items-start text-reset mb-3">173
<div class="">174
<i class="fas fa-puzzle-piece fa-lg text-primary fa-fw"></i>175
</div>176
<div class="ms-3">177
<p class="fw-bold mb-1 d-flex align-items-center">178
Integrations179
</p>180
181
</div>182
</a>183
184
<!-- Link -->185
<a href="" class="lanks d-flex align-items-start text-reset">186
<div class="">187
<i class="fas fa-flask fa-lg text-primary fa-fw"></i>188
</div>189
<div class="ms-3">190
<p class="fw-bold mb-1 d-flex align-items-center">191
LAB192
</p>193
194
</div>195
</a>196
</div>197
</div>198
</div>199
<div class="tab-pane fade" id="ex-with-icons-tabs-3" role="tabpanel" aria-labelledby="ex-with-icons-tab-3">200
<div class="row gx-xl-5">201
<div class="col-md-6 mb-4 mb-md-0">202
<!-- Link -->203
<a href="" class="lanks d-flex align-items-start text-reset mb-3 pe-5">204
<div class="">205
<i class="fas fa-cubes fa-lg text-primary fa-fw"></i>206
</div>207
<div class="ms-3">208
<p class="fw-bold mb-1 d-flex align-items-center">209
Components210
211
</p>212
213
</div>214
</a>215
216
<!-- Link -->217
<a href="" class="lanks d-flex align-items-start text-reset mb-3 pe-5">218
<div class="">219
<i class="fas fa-layer-group fa-lg text-primary fa-fw"></i>220
</div>221
<div class="ms-3">222
<p class="fw-bold mb-1 d-flex align-items-center">223
Designblocks224
</p>225
226
</div>227
</a>228
229
<!-- Link -->230
<a href="" class="lanks d-flex align-items-start text-reset pe-5">231
<div class="">232
<i class="fas fa-plug fa-lg text-primary fa-fw"></i>233
</div>234
<div class="ms-3">235
<p class="fw-bold mb-1 d-flex align-items-center">236
Plugins237
</p>238
239
</div>240
</a>241
</div>242
243
<div class="col-md-6 mb-4 mb-md-0">244
<!-- Link -->245
<a href="" class="lanks d-flex align-items-start text-reset mb-3">246
<div class="">247
<i class="fas fa-image fa-lg text-primary fa-fw"></i>248
</div>249
<div class="ms-3">250
<p class="fw-bold mb-1 d-flex align-items-center">251
Templates252
</p>253
254
</div>255
</a>256
257
<!-- Link -->258
<a href="" class="lanks d-flex align-items-start text-reset mb-3">259
<div class="">260
<i class="fas fa-puzzle-piece fa-lg text-primary fa-fw"></i>261
</div>262
<div class="ms-3">263
<p class="fw-bold mb-1 d-flex align-items-center">264
Integrations265
</p>266
267
</div>268
</a>269
270
<!-- Link -->271
<a href="" class="lanks d-flex align-items-start text-reset">272
<div class="">273
<i class="fas fa-flask fa-lg text-primary fa-fw"></i>274
</div>275
<div class="ms-3">276
<p class="fw-bold mb-1 d-flex align-items-center">277
LAB278
</p>279
280
</div>281
</a>282
</div>283
</div>284
</div>285
</div>286
<!-- Tabs content -->287
</div>288
289
</ul>290
</li>291
</ul>292
</div>293
</nav>xxxxxxxxxx1
body {2
background-color: hsl(0, 0%, 94%)3
}xxxxxxxxxx1
const myLinks = document.querySelectorAll('.lanks')2
const myDropdown = document.querySelector('.dropdown-toggle')3
const myDropdownInstance = mdb.Dropdown.getInstance(myDropdown);4
myLinks.forEach((link) => {5
link.addEventListener('click', (e) => {6
e.preventDefault()7
myDropdownInstance.hide();8
})9
}) Console errors: 0