xxxxxxxxxx1
<div class="container my-4">2
3
<p class="font-weight-bold">Multiple examples of the hamburger menu</p>4
5
<p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/navigation/hamburger-menu/"6
target="_blank">Bootstrap Hamburger Menu Docs</a> </p>7
8
<hr>9
10
<p class="font-weight-bold">Examples</p>11
12
<!--Navbar-->13
<nav class="navbar navbar-light white mb-4">14
15
<!-- Navbar brand -->16
<a class="navbar-brand" href="#">Navbar</a>17
18
<!-- Collapse button -->19
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class=""><i class="fas fa-bars fa-1x"></i></span></button>20
21
<!-- Collapsible content -->22
<div class="collapse navbar-collapse" id="navbarSupportedContent">23
24
<!-- Links -->25
<ul class="navbar-nav mr-auto">26
<li class="nav-item active">27
<a class="nav-link waves-effect waves-light" href="#">Home <span class="sr-only">(current)</span></a>28
</li>29
<li class="nav-item">30
<a class="nav-link waves-effect waves-light" href="#">Features</a>31
</li>32
<li class="nav-item">33
<a class="nav-link waves-effect waves-light" href="#">Pricing</a>34
</li>35
</ul>36
<!-- Links -->37
38
</div>39
<!-- Collapsible content -->40
41
</nav>42
<!--/.Navbar-->43
44
<!--Navbar-->45
<nav class="navbar navbar-light light-blue lighten-4 mb-4">46
47
<!-- Navbar brand -->48
<a class="navbar-brand" href="#">Navbar</a>49
50
<!-- Collapse button -->51
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i class="fas fa-bars fa-1x"></i></span></button>52
53
<!-- Collapsible content -->54
<div class="collapse navbar-collapse" id="navbarSupportedContent1">55
56
<!-- Links -->57
<ul class="navbar-nav mr-auto">58
<li class="nav-item active">59
<a class="nav-link waves-effect waves-light" href="#">Home <span class="sr-only">(current)</span></a>60
</li>61
<li class="nav-item">62
<a class="nav-link waves-effect waves-light" href="#">Features</a>63
</li>64
<li class="nav-item">65
<a class="nav-link waves-effect waves-light" href="#">Pricing</a>66
</li>67
</ul>68
<!-- Links -->69
70
</div>71
<!-- Collapsible content -->72
73
</nav>74
<!--/.Navbar-->75
76
<!--Navbar-->77
<nav class="navbar navbar-light pink lighten-4 mb-4">78
79
<!-- Navbar brand -->80
<a class="navbar-brand" href="#">Navbar</a>81
82
<!-- Collapse button -->83
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-pink-text"><i class="fas fa-bars fa-1x"></i></span></button>84
85
<!-- Collapsible content -->86
<div class="collapse navbar-collapse" id="navbarSupportedContent2">87
88
<!-- Links -->89
<ul class="navbar-nav mr-auto">90
<li class="nav-item active">91
<a class="nav-link waves-effect waves-light" href="#">Home <span class="sr-only">(current)</span></a>92
</li>93
<li class="nav-item">94
<a class="nav-link waves-effect waves-light" href="#">Features</a>95
</li>96
<li class="nav-item">97
<a class="nav-link waves-effect waves-light" href="#">Pricing</a>98
</li>99
</ul>100
<!-- Links -->101
102
</div>103
<!-- Collapsible content -->104
105
</nav>106
<!--/.Navbar-->107
108
<!--Navbar-->109
<nav class="navbar navbar-light amber lighten-4 mb-4">110
111
<!-- Navbar brand -->112
<a class="navbar-brand" href="#">Navbar</a>113
114
<!-- Collapse button -->115
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent7" aria-controls="navbarSupportedContent7" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-amber-text"><i class="fas fa-bars fa-1x"></i></span></button>116
117
<!-- Collapsible content -->118
<div class="collapse navbar-collapse" id="navbarSupportedContent7">119
120
<!-- Links -->121
<ul class="navbar-nav mr-auto">122
<li class="nav-item active">123
<a class="nav-link waves-effect waves-light" href="#">Home <span class="sr-only">(current)</span></a>124
</li>125
<li class="nav-item">126
<a class="nav-link waves-effect waves-light" href="#">Features</a>127
</li>128
<li class="nav-item">129
<a class="nav-link waves-effect waves-light" href="#">Pricing</a>130
</li>131
</ul>132
<!-- Links -->133
134
</div>135
<!-- Collapsible content -->136
137
</nav>138
<!--/.Navbar-->139
140
<!--Navbar-->141
<nav class="navbar navbar-light teal lighten-4">142
143
<!-- Navbar brand -->144
<a class="navbar-brand" href="#">Navbar</a>145
146
<!-- Collapse button -->147
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent8" aria-controls="navbarSupportedContent8" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-teal-text"><i class="fas fa-bars fa-1x"></i></span></button>148
149
<!-- Collapsible content -->150
<div class="collapse navbar-collapse" id="navbarSupportedContent8">151
152
<!-- Links -->153
<ul class="navbar-nav mr-auto">154
<li class="nav-item active">155
<a class="nav-link waves-effect waves-light" href="#">Home <span class="sr-only">(current)</span></a>156
</li>157
<li class="nav-item">158
<a class="nav-link waves-effect waves-light" href="#">Features</a>159
</li>160
<li class="nav-item">161
<a class="nav-link waves-effect waves-light" href="#">Pricing</a>162
</li>163
</ul>164
<!-- Links -->165
166
</div>167
<!-- Collapsible content -->168
169
</nav>170
171
<!--/.Navbar-->172
</div>1
1
1
1
Console errors: 0